Figma hat die Welt des digitalen Designs komplett verändert. Interface-Design, das früher mit Photoshop oder Sketch gemacht wurde, ist mit Figma heute viel schneller, kollaborativer und zugänglicher geworden. Außerdem läuft Figma komplett im Browser, egal ob Mac oder Windows, und der kostenlose Tarif reicht für den Einstieg mehr als aus. In diesem Artikel teile ich alles mit dir, was du brauchst, um Figma von Grund auf zu lernen. Ich erzähle es als Designer, der seit drei Jahren mit Figma arbeitet, gemeinsam mit meinen Erfahrungen aus echten Projekten.
Was ist Figma und warum ist es so beliebt?
Figma ist ein browserbasiertes Design-Tool. Man nutzt es, um Websites, mobile Apps, Dashboards und Interfaces zu gestalten. Was Figma besonders macht, ist aber weniger die Fähigkeit zu gestalten als das, was es für die Teamarbeit bietet.
Ich habe vor drei Jahren in einem Startup-Projekt zum ersten Mal Figma genutzt. Bis dahin hatte ich Sketch verwendet und war an den Mac gebunden. In unserem Team gab es einen Entwickler, der Windows nutzte, und um Designs zu teilen, haben wir ständig PNGs exportiert und verschickt. Nach dem Wechsel zu Figma konnte der Entwickler das Design live in derselben Datei sehen. Allein das brachte einen unglaublichen Effizienzgewinn.
Das sind die wichtigsten Gründe für Figmas Beliebtheit. Es läuft im Browser und braucht keine Installation. Mehrere Personen können gleichzeitig in derselben Datei arbeiten. Der kostenlose Tarif funktioniert, auch wenn er auf drei Dateien begrenzt ist. Prototyping, Designsystem und Entwickler-Handoff sind alle in einem Tool.
Die ersten Schritte: Lernen wir die Oberfläche kennen
Wenn du Figma zum ersten Mal öffnest, kann es ein wenig überwältigend wirken, aber die Grundstruktur ist eigentlich ganz einfach.
Auf der linken Seite befindet sich das Ebenen-Panel. Hier werden alle Designelemente aufgelistet. Auf der rechten Seite ist das Eigenschaften-Panel. Hier bearbeitest du Farbe, Größe, Schriftart und weitere Eigenschaften des ausgewählten Elements. Oben ist die Werkzeugleiste. Dort findest du die grundlegenden Werkzeuge wie Formen zeichnen, Text hinzufügen und Frames erstellen.
Das Verständnis des Frame-Konzepts bildet die Grundlage von Figma. Ein Frame ist ein Rahmen für eine Seite oder einen Bildschirm. Wenn du einen Frame in der Größe eines iPhone 14 anlegst, gestaltest du dein Design innerhalb dieses Frames. Ich beginne jedes Projekt mit dem Anlegen von Frames: 1440 Pixel Breite für den Desktop, 390 Pixel Breite für mobile Geräte.
Dein erstes Design erstellen
Lass uns eine einfache Karten-Komponente gestalten. Erstelle zunächst einen Frame mit 350 Pixeln Breite und 400 Pixeln Höhe. Setze die Hintergrundfarbe auf Weiß. Zeichne in den Frame ein Rechteck, das der Bildbereich wird. Füge darunter ein Textelement hinzu, das der Titel wird. Füge noch einen Text hinzu, der die Beschreibung wird. Zum Schluss fügst du einen Button hinzu.
Füge dieser einfachen Struktur Auto Layout hinzu. Auto Layout ordnet die Elemente automatisch an und passt die Abstände an. Klicke im rechten Panel auf den Auto-Layout-Button, richte die Elemente deines Frames vertikal aus und stelle die Abstände auf sechzehn Pixel ein. Wenn du jetzt ein Element löschst oder hinzufügst, passen sich die übrigen Elemente automatisch an.
Ein Designsystem aufbauen
Die Grundlage professioneller Figma-Nutzung ist das Designsystem. Farben, Schriften, Komponenten und Stile werden einmal definiert und im gesamten Projekt einheitlich verwendet.
In meinem ersten Projekt habe ich kein Designsystem angelegt und erst später gemerkt, dass das ein großer Fehler war. Als der Kunde eine Farbänderung wollte, musste ich Hunderte Elemente einzeln ändern. Im zweiten Projekt habe ich als Allererstes ein Designsystem aufgebaut, und dieselbe Änderung war in dreißig Sekunden erledigt.
So legst du Farbstile an: Zeichne ein Rechteck, weise ihm die gewünschte Farbe zu, klicke im rechten Panel auf das Farbfeld und wähle „Create style“. Verwende als Namen eine Benennung wie „Primary/500“. Wenn du dann im gesamten Projekt diesen Stil verwendest und die Farbe an einer Stelle änderst, ändert sie sich überall.
Komponenten (Components) sind Figmas stärkste Funktion. Gestalte einen Button, klicke mit der rechten Maustaste und wähle „Create component“. Jetzt kannst du diesen Button überall im Projekt verwenden, und wenn du die Hauptkomponente änderst, werden alle Kopien automatisch aktualisiert.
Mit der Variant-Funktion kannst du verschiedene Zustände einer Komponente definieren. Du legst zum Beispiel die Varianten Primary, Secondary und Outline eines Buttons innerhalb derselben Komponente an. Oder du erstellst separate Varianten für die Zustände Hover, Active und Disabled.
Prototyping: Erwecke deine Designs zum Leben
Mit der Prototyping-Funktion von Figma machst du deine Designs klickbar und interaktiv. Es ist großartig, um dem Kunden oder dem Team zu zeigen: „Wenn du hier klickst, öffnet sich diese Seite.“
Prototyping ist ganz einfach: Wähle ein Element aus, wechsle im rechten Panel zum Tab „Prototype“ und ziehe von diesem Element aus einen Pfeil zum Ziel-Frame. Wähle die Übergangsanimation: Slide, Dissolve, Smart Animate und so weiter. Wenn du im Präsentationsmodus auf das Element klickst, springt die Ansicht zur Zielseite.
Die Funktion Smart Animate ist ein Gamechanger. Sie animiert gleichnamige Elemente zwischen zwei Frames automatisch. Beim Übergang von einer Kartenlisten-Seite zur Kartendetail-Seite vergrößert sich zum Beispiel das Kartenbild. Diese Mikroanimationen lassen deinen Prototyp wie eine echte App wirken.
Letzten Monat habe ich bei einer Kundenpräsentation einen Prototyp mit Smart Animate gezeigt, der dem Kunden sehr gut gefallen hat. Er fragte: „Ist das schon die echte App?“ Es war noch keine einzige Zeile Code geschrieben, aber der Prototyp sah so realistisch aus.