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 Design-Tool, 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. Allerdings seit Adobe hat Figma im Jahr 2022 übernommen, kann es einige Änderungen geben, die die Bestenliste neu mischen.
Es gibt viele Verwendungen 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
Du kannst Verwenden Sie Figma-Mockup-Plugins um Ihre Designs zu zeigen, Konvertieren Sie echte Webseiten in Figma-Designs mit Plugins und sogar erstellen Master-Vorlagen für Figma-Designs um Ihnen bei sich wiederholenden Designtypen Zeit zu sparen.
Wie viel kostet Figma?
Sie können kostenlos ein Figma-Konto auf der erstellen Figma-Website oder durch Download der Figma-App. Ein kostenloses Konto bietet Funktionen für alle Designaspekte der App. Sie können mit Figma und entwerfen FigJam – das Collaboration-Tool 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, ermöglicht Ihnen ein Figma Professional-Abonnement dies Laden Sie Teamkollegen ein, arbeiten Sie in Teambibliotheken, haben Sie Zugriff auf unbegrenzte Figma-Dateien und den Versionsverlauf und vieles mehr für 12 $ pro Monat und pro Monat 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.
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.
Navigieren im Figma-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.
Das horizontale Menü oben links beginnt mit dem Hauptmenü Symbol – das Figma-Logo. Auswahl der Hauptmenü, Sie können zu Ihren anderen Dateien, Figma-Schnellaktionen, typischen Dateioptionen und Zugriff auf Plugins, Widgets und Bibliotheken navigieren.
Als nächstes finden Sie die Umzug Werkzeug (v), mit dem Skala 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, Rahmen (F), Abschnitt, Und Scheibe, aneinandergeschmiegt.
In Figma ist ein Rahmen das, was andere Programme als Zeichenfläche oder Leinwand bezeichnen. Wählen 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.
Zurück zum Menü oben links, rechts neben den Regionswerkzeugen befinden sich die Form Werkzeug, Stift Werkzeuge und die Text Werkzeug. Gefolgt von Ressourcen—Komponenten, Plugins, Und Widgets-und das Hand Werkzeug zum Bewegen in Ihrer Datei. Und schließlich die Kommentare Tool, das sich hervorragend zum Erstellen von Notizen und zur Zusammenarbeit mit Teamkollegen eignet.
Das Figma-Designmenü
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, Prototyp, Und Prüfen. 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ößenwerkzeugen, Automatisches Layout, Layout-Raster, Schicht, Füllen, Schlaganfall, Auswirkungen, Und Export. Einige davon werden standardmäßig minimiert, aber durch Klicken auf die + Zeichen, können Sie jedes Menü öffnen oder drücken – um es zu minimieren.
Nachdem Sie Ihren Hauptrahmen für das Projekt gezeichnet haben, können Sie mit den Formwerkzeugen oder Stiftwerkzeugen Formen zeichnen oder Fügen Sie Bildplatzhalter hinzu, und Sie können Text mit dem Textwerkzeug auf eine Weise hinzufügen, wie Sie es wahrscheinlich schon in anderen Fällen getan haben Software.
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. Der Schicht Menü bietet Deckkraft und Mischmodi; mit Füllen Sie können Farbe hinzufügen oder Bilder mit einigen Bearbeitungsfunktionen wie einfügen Belichtung, Kontrast, Temperatur, und mehr.
Wenn Sie weitere Elemente in Ihrem Projekt aufbauen, bilden sich die Ebenen auf der linken Seite Lagen Menü neben dem Vermögenswerte Tab. 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ü
Rechts von der Design Menüoption ist die Prototyp Speisekarte. 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.
Der Prototyp Menü 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.
Das funktioniert großartig, wenn Sie es sind eine Figma-Präsentation zu machen das von einer Folie zur nächsten animiert, aber auch Animationen für Schaltflächen oder Menüs für App- und Webdesign lassen sich mit dem Tool gekonnt 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 Ihre Figma weitergeben Design an Ihr Entwicklerteam weiter, das Ihre Prototyp-Interaktionen als reale Animationsdesigns für Sie nachbilden kann Webseite. 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.
