So verwenden Sie Figma: Ein Leitfaden für Anfänger

So verwenden Sie Figma: Ein Leitfaden für Anfänger

Die Welt der Grafikdesign-Software ist riesig und hat viel Konkurrenz. Figma ist ein Designtool, das für UX/UI-Designer auf der ganzen Welt an die Spitze rennt. Aber was wissen Sie über dieses intuitive Tool?

Obwohl es einfach ist, gibt es auch eine Lernkurve, wenn Sie an andere Designtools gewöhnt sind. Schauen wir uns Figma an und wie man es benutzt. Willkommen bei Figma 101.

Was ist Figma?

Wenn Sie in den letzten Jahren als Grafikdesigner oder Webdesigner gearbeitet haben, haben Sie wahrscheinlich schon von Figma gehört. Vielleicht hast du es sogar benutzt.

Figma ist ein Designtool, das sich stetig zu einem Favoriten für Digitaldesigner entwickelt hat und über Optionen wie Adobe XD, Adobe Photoshop und Sketch für Webdesign und mehr emporsteigt. Da Adobe Figma im Jahr 2022 übernommen hat, kann es jedoch einige Änderungen geben, die die Rangliste neu mischen werden.

Es gibt viele Verwendungsmöglichkeiten für Figma. Es wird hauptsächlich für digitales Design verwendet, und Sie können nicht in CMYK für den Druck entwerfen. Einige der Hauptanwendungen von Figma sind:

  • Prototyp entwickeln
  • UX/UI-Design
  • App-Design
  • Web-Design
  • Präsentationsdesign

Sie können Figma-Mockup-Plugins verwenden, um Ihre Designs zu präsentieren, echte Webseiten mithilfe von Plugins in Figma-Designs umwandeln und sogar Master-Vorlagen für Figma-Designs erstellen, um Zeit bei sich wiederholenden Designtypen zu sparen.

Wie viel kostet Figma?

Sie können kostenlos ein Figma-Konto auf der Figma-Website erstellen oder die Figma-App herunterladen . Ein kostenloses Konto bietet Funktionen für alle Designaspekte der App. Sie können mit Figma und FigJam entwerfen – dem Kollaborationstool von Figma.

Wenn Sie Figma als Bastler oder als alleiniger Freiberufler verwenden, ist die Free Forever-Version nahezu perfekt. Sie haben weiterhin Zugriff auf alle Plugins, können unbegrenzt Mitarbeiter einladen, unbegrenzt persönliche Dateien verwenden und Figma von allen Plattformen aus verwenden.

Während die kostenlose Version von Figma mehr als genug für jeden Standarddesigner bietet, können Sie mit einem Figma Professional-Abonnement Teamkollegen einladen, aus Teambibliotheken arbeiten, Zugriff auf unbegrenzte Figma-Dateien und den Versionsverlauf haben und vieles mehr für 12 $ pro Monat und Editor. Wenn Sie Student oder Pädagoge sind, können Sie Figma Professional kostenlos erhalten.

So verwenden Sie Figma: Die Grundlagen

Egal, ob Sie die Figma-App oder die Browserversion verwenden, Sie können ganz einfach mitverfolgen.

Figma-Homepage.

Wenn Sie Figma öffnen, werden Ihnen Optionen zum Starten einer neuen Figma-Datei, einer neuen FigJam-Datei oder zum Importieren einer Datei angezeigt, die in einem anderen Programm wie Sketch oder Adobe XD erstellt wurde. Wenn Sie Figma bereits verwendet haben, sehen Sie auch Ihre früheren Figma-Projekte, die Sie öffnen und bearbeiten können.

Figma leerer Arbeitsbereich.

Das Öffnen einer neuen Datei sieht zunächst wenig inspirierend aus. Im Gegensatz zu vielen anderen Designprogrammen beginnen Sie nicht mit Ihrer Zeichenfläche oder Leinwand, sondern mit einer völlig leeren Designseite. Aber mit einem Geist voller Inspiration wird es nicht lange leer bleiben.

Figma-Menüoptionen.

Das horizontale Menü oben links beginnt mit dem Hauptmenü -Symbol – dem Figma-Logo. Wenn Sie das Hauptmenü auswählen, können Sie zu Ihren anderen Dateien, Figma-Schnellaktionen, typischen Dateioptionen und Zugriff auf Plugins, Widgets und Bibliotheken navigieren.

Als nächstes finden Sie das Verschieben- Werkzeug ( V ) mit dem Skalierungs- Werkzeug ( K ) darunter eingebettet. Mit diesen Werkzeugen können Sie Elemente verschieben oder Teile Ihres Designs nach oben oder unten skalieren. Und rechts neben diesen Werkzeugen sehen Sie die Region-Werkzeuge Frame ( F ), Section und Slice , die ineinander verschachtelt sind.

Figma Frame-Menü.

In Figma ist ein Rahmen das, was andere Programme als Zeichenfläche oder Leinwand bezeichnen. Wählen Sie Rahmen , um Ihre Leinwand in benutzerdefinierter Größe zu zeichnen. Bei Auswahl zeigt das Menü auf der rechten Seite vorgefertigte Rahmenoptionen für gängige Gerätegrößen: Smartphones, Tablets, Desktops, Smartwatches, Präsentationen und Optionen für soziale Medien. Sie können Ihren Rahmen auch direkt anklicken und ziehen, um ihm eine benutzerdefinierte Größe zu geben.

Figma-Werkzeuge.

Zurück zum oberen linken Menü, rechts neben den Bereichswerkzeugen, befinden sich die Formwerkzeuge , Stiftwerkzeuge und das Textwerkzeug . Gefolgt von Ressourcen – Komponenten , Plugins und Widgets – und dem Hand -Werkzeug zum Bewegen in Ihrer Datei. Und schließlich das Kommentar- Tool, das sich hervorragend zum Erstellen von Notizen und zur Zusammenarbeit mit Teamkollegen eignet.

Das Figma-Designmenü

Designmenü in Figma

Wenn ein Rahmen erstellt ist, aktiviert die Auswahl seines Titels den Rahmen und ist bereit für die Gestaltung. Das Menü auf der rechten Seite zeigt Titel für Design , Prototype und Inspect . Wie der Name schon sagt, ist die Design-Option das Menü, mit dem Sie die Elemente auf Ihrem Rahmen entwerfen.

Während das anfängliche Design-Menü etwas vereinfacht ist, entwickeln sich die Menüoptionen, wenn Sie Ihrem Design weitere Elemente hinzufügen. Zuerst läuft das Menü von oben nach unten mit Ausrichtungswerkzeugen, Größenanpassungswerkzeugen, Automatisches Layout , Layoutraster , Ebene , Füllung , Strich , Effekte und Export . Einige davon sind standardmäßig minimiert, aber durch Klicken auf das + -Zeichen können Sie jedes Menü öffnen oder auf klicken, um es zu minimieren.

Figma Fill and Image Menü.

Nachdem Sie Ihren Hauptrahmen für das Projekt gezeichnet haben, können Sie mit den Formwerkzeugen oder Stiftwerkzeugen Formen zeichnen oder Bildplatzhalter hinzufügen, und Sie können mit dem Textwerkzeug Text hinzufügen, wie Sie es wahrscheinlich auch in anderer Software getan haben.

Sobald Sie Formen oder Text auf dem Rahmen haben, verwenden Sie die verschiedenen Menüoptionen auf der rechten Seite, um diese Elemente zu bearbeiten und zu gestalten. Das Ebenenmenü bietet Deckkraft- und Mischmodi; Mit Fill können Sie Farbe hinzufügen oder Bilder mit einigen Bearbeitungsfunktionen wie Belichtung , Kontrast , Temperatur und mehr einfügen.

Figma hervorgehobene Elementebene.

Wenn Sie weitere Elemente in Ihrem Projekt aufbauen, werden die Ebenen im Menü „Ebenen“ auf der linken Seite neben der Registerkarte „ Assets “ angezeigt. Sie können auf einen Ebenentitel doppelklicken, um das Element zu finden, und umgekehrt; Sie können auf ein Designelement doppelklicken, um die hervorgehobene Ebene zu finden. Durch Doppelklicken auf Titel können Sie diese für eine optimale Organisation umbenennen.

Das Figma-Prototyp-Menü

Figma-Prototyp-Interaktionsmenü.

Rechts neben der Menüoption „ Design “ befindet sich das Menü „ Prototyp “ . Sobald Sie die visuellen Aspekte Ihres Designs fertiggestellt und Bildrahmen und Text an die gewünschte Stelle gesetzt haben, können Sie die Prototyp-Tools verwenden, um Ihren Designs Animationen und Übergänge hinzuzufügen.

Im Menü Prototyp können Sie Frames oder Komponenten als Übergänge miteinander verbinden. Sie können wählen, in welcher Reihenfolge und wie jeder Frame in einen anderen übergeht.

Dies funktioniert hervorragend, wenn Sie eine Figma-Präsentation erstellen, die von einer Folie zur nächsten animiert, aber das Tool ermöglicht Ihnen auch, Animationen für Schaltflächen oder Menüs für das App- und Webdesign fachmännisch zu visualisieren. Sie können mehrere Übergänge pro Seite für alle möglichen Dinge hinzufügen, damit Sie sehen können, wie Benutzer mit Ihrer Website interagieren würden, wenn sie live ist.

Während die Verwendung von Figma zum Entwerfen einer Website nicht dasselbe ist wie das Erstellen einer Live-Website, können Sie Ihr Figma-Design an Ihr Entwicklerteam übergeben, das Ihre Prototyp-Interaktionen als reale Animationsdesigns für Ihre Website nachbilden kann. Das bedeutet, dass Sie von Seite zu Seite von Klicks, Zeit oder anderen Interaktionen wechseln können.

Der Einstieg in Figma ist einfach

Jetzt wissen Sie, wie Sie im Figma-Layout navigieren und wie die grundlegenden Design- und Prototyp-Tools funktionieren. Da Figma so leicht zugänglich ist, ist es an der Zeit, an diesem Designtool herumzubasteln und zu sehen, was Sie erstellen können.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert