Figma für Einsteiger: Die ersten Schritte

Figma ist ein Programm zum Gestalten von Websites, Apps und Grafiken, das im Browser und als Desktop-App läuft. Der Einstieg gelingt am schnellsten, wenn Sie nicht alle Funktionen auf einmal lernen, sondern eine kleine Seite Schritt für Schritt aufbauen: Frame anlegen, Inhalte platzieren, mit Auto Layout anordnen, Farben und Schriften speichern, Komponenten bilden und am Ende einen klickbaren Prototyp erstellen. Diese Anleitung folgt genau diesem Weg. Einen Überblick über weitere Design-Programme gibt die Rubrik Werkzeuge.

Was Figma ist und kann

Figma ist ein vektorbasiertes Design-Werkzeug. Entwürfe liegen in der Cloud, mehrere Personen können gleichzeitig in derselben Datei arbeiten und kommentieren. Neben dem eigentlichen Design-Editor gehören weitere Produkte zum Angebot, darunter ein digitales Whiteboard namens FigJam und ein Modus für die Übergabe an die Entwicklung.

Typische Einsatzzwecke sind Wireframes, Mockups und Prototypen von Websites und Apps, aber auch Social-Media-Grafiken, Präsentationen und Icons. Was die einzelnen Entwurfsstufen unterscheidet, erklärt der Artikel Wireframe, Mockup, Prototyp.

Kosten und Zugang

Für den Start brauchen Sie ein Konto. Figma bietet einen kostenlosen Einstiegstarif, der zum Lernen reicht, aber Grenzen hat, etwa bei der Zahl gemeinsamer Dateien und bei Teamfunktionen. Kostenpflichtige Tarife werden pro Platz abgerechnet. Für Schulen und Hochschulen gibt es gesonderte Angebote. Da sich Tarife und Grenzen regelmäßig ändern, sollten Sie die aktuellen Bedingungen vor einer Entscheidung auf der Preisseite des Anbieters prüfen.

Die Oberfläche in vier Bereichen

• Arbeitsfläche (Canvas): die unendliche Fläche in der Mitte, auf der Sie gestalten. Mit gedrückter Leertaste und Maus verschieben Sie die Ansicht, mit Strg oder Cmd und Mausrad zoomen Sie.
• Werkzeugleiste: enthält Auswahl, Frame, Formen, Stift, Text und Kommentare. In der aktuellen Oberfläche sitzt sie am unteren Rand.
• Linke Seitenleiste: zeigt die Seiten der Datei und die Ebenen, also alle Elemente in ihrer Verschachtelung.
• Rechte Seitenleiste: zeigt die Eigenschaften des ausgewählten Elements, etwa Größe, Farbe, Schrift und Abstände, und schaltet zwischen Design- und Prototyp-Ansicht um.

Die Oberfläche ist in mehreren Sprachen verfügbar. Viele Anleitungen und Tutorials verwenden die englischen Bezeichnungen, deshalb nennen wir sie hier mit.

Schritt 1: Datei und Frame anlegen

Legen Sie eine neue Design-Datei an. Wählen Sie dann das Frame-Werkzeug mit der Taste F oder A. In der rechten Seitenleiste erscheinen Vorlagen für gängige Gerätegrößen, etwa Desktop und Smartphone. Ein Klick auf eine Vorlage erzeugt einen Frame in dieser Größe. Benennen Sie ihn sofort sinnvoll, etwa “Startseite Desktop”.

Ein Frame ist mehr als eine Zeichenfläche. Er kann Hintergrundfarben, Innenabstände und Raster haben und Inhalte beschneiden. Frames lassen sich ineinander verschachteln, etwa eine Karte in einem Abschnitt in einer Seite.

Schritt 2: Formen, Text und Bilder platzieren

Die wichtigsten Werkzeuge:

• Rechteck mit R, Ellipse mit O, Linie mit L,
• Text mit T: einmal klicken für eine automatisch wachsende Textzeile, ziehen für ein festes Textfeld,
• Stift mit P für eigene Vektorformen,
• Bilder einfach per Drag and Drop aus dem Dateisystem auf die Arbeitsfläche ziehen.

Im Textbereich der rechten Seitenleiste stellen Sie Schriftart, Größe, Zeilenabstand und Buchstabenabstand ein. Wie zwei Schriften harmonisch zusammenspielen, beschreibt der Artikel Schriftarten kombinieren.

Schritt 3: Mit Auto Layout anordnen

Auto Layout ist die Funktion, die Figma-Entwürfe flexibel macht. Markieren Sie einen Frame oder mehrere Elemente und drücken Sie Umschalt und A. Die Elemente werden dann automatisch untereinander oder nebeneinander angeordnet, mit festem Abstand und Innenabstand.

Ein Beispiel: Ein Button aus Text in einem Frame mit Auto Layout wächst automatisch mit, wenn Sie den Text ändern. Eine Liste aus Karten verschiebt sich selbstständig, wenn eine Karte hinzukommt. Das entspricht weitgehend dem Verhalten von Flexbox im CSS, was die spätere Umsetzung im Code erleichtert.

Die wichtigsten Einstellungen:

• Richtung: horizontal oder vertikal,
• Abstand zwischen Elementen: am besten nach einer festen Skala,
• Innenabstand: Raum zwischen Rand und Inhalt,
• Größenverhalten: fest, an den Inhalt angepasst oder den verfügbaren Platz füllend.

Schritt 4: Farben und Schriften als Styles speichern

Statt jeder Fläche einzeln einen Farbwert zuzuweisen, legen Sie Farben, Textformate und Effekte als Styles an. Zusätzlich gibt es Variablen, mit denen sich Werte wie Farben, Abstände oder Radien zentral verwalten und für Varianten wie hellen und dunklen Modus umschalten lassen. Ändern Sie später eine Farbe, ändert sie sich überall dort, wo sie verwendet wird. Diese zentralen Werte sind der Kern jedes Styleguides. Wie Sie Gestaltungsregeln dauerhaft festhalten, beschreibt der Artikel Styleguide und Designsystem.

Schritt 5: Komponenten und Instanzen

Elemente, die mehrfach vorkommen, etwa Buttons, Navigationsleisten oder Karten, wandeln Sie in Komponenten um: markieren und Strg plus Alt plus K drücken, auf dem Mac Cmd plus Option plus K. Die ursprüngliche Komponente ist die Vorlage, jede Kopie davon ist eine Instanz. Ändern Sie die Vorlage, übernehmen alle Instanzen die Änderung. Einzelne Eigenschaften wie Text dürfen in Instanzen trotzdem abweichen.

Mit Varianten fassen Sie verwandte Komponenten zusammen, etwa einen Button in den Zuständen normal, Hover und deaktiviert oder in den Größen klein und groß.

Schritt 6: Einen Prototyp verbinden

Wechseln Sie in der rechten Seitenleiste in die Prototyp-Ansicht. Wählen Sie ein Element aus, zum Beispiel einen Button, und ziehen Sie den Verbindungspunkt auf den Ziel-Frame. Anschließend legen Sie fest, was passiert: bei Klick zur nächsten Ansicht wechseln, ein Overlay öffnen oder zurückgehen, mit oder ohne Übergangsanimation. Über die Präsentationsansicht testen Sie den Prototyp im Browser oder auf dem Smartphone.

Schritt 7: Teilen, kommentieren, übergeben

Über die Teilen-Funktion laden Sie andere zum Ansehen, Kommentieren oder Bearbeiten ein. Kommentare lassen sich direkt an Elemente heften. Für die Übergabe an die Entwicklung können Elemente als PNG, JPG, SVG oder PDF exportiert werden, und Entwickler können Maße, Abstände und Farbwerte ablesen. Ein eigener Entwicklermodus erweitert das, ist aber an bestimmte Tarife gebunden.

Die wichtigsten Tastenkürzel

Eine vollständige Übersicht zeigt Figma im Hilfemenü der Oberfläche.

Typische Anfängerfehler

• Gruppen statt Frames: Gruppen haben keinen Innenabstand und kein Auto Layout. Spätere Änderungen werden mühsam.
• Alles von Hand ausgerichtet: Ohne Auto Layout verschieben sich Elemente nicht mit, wenn sich Inhalte ändern.
• Farbwerte direkt eingetragen: Ohne Styles oder Variablen muss jede Farbänderung an jeder Stelle einzeln erfolgen.
• Unbenannte Ebenen: Nach einer Woche weiß niemand mehr, was “Rectangle 247” ist. Ebenen und Frames sollten klare Namen bekommen.
• Nur Desktop gestaltet: Mobile Ansichten gehören von Anfang an dazu.
• Zu früh perfektionieren: Bevor die Struktur steht, lohnt sich keine Feinarbeit an Schatten und Verläufen.

So lernen Sie weiter

Nehmen Sie sich eine bestehende, einfache Website vor und bauen Sie die Startseite in Figma nach: erst als Wireframe, dann mit Farben und Schriften, schließlich mit Komponenten und einem klickbaren Menü. Dabei lernen Sie die Funktionen in genau der Reihenfolge, in der Sie sie später brauchen. In der Figma-Community finden Sie zudem frei verfügbare Vorlagen und UI-Kits, an denen sich gut ablesen lässt, wie erfahrene Gestalter Dateien aufbauen. Achten Sie dabei auf die jeweilige Lizenz, bevor Sie Elemente in eigenen Projekten verwenden.