Die schnellste Antwort auf die Frage, wie man Figma verwendet, ist nicht, die Theorie zu lesen, sondern sofort mit dem Gestalten zu beginnen. Figma ist ein Werkzeug, das im Browser läuft, einen kostenlosen Einsteigerplan bietet und sich zum De-facto-Standard der Branche entwickelt hat – sowohl für Interface-Design als auch für Prototyping. In diesem Artikel gehen wir davon aus, dass du es noch nie geöffnet hast: Wir lernen die Oberfläche kennen, erstellen dein erstes Frame, gestalten mit den Grundwerkzeugen eine einfache mobile Karte und machen deine Datei teilbar. Das Ziel: Am Ende hast du ein Design, das du wirklich selbst gebaut hast.
Figma öffnen und die erste Datei erstellen
Um mit Figma zu starten, rufst du einfach figma.com im Browser auf und legst ein kostenloses Konto an. Bei Bedarf kannst du auch die Desktop-App herunterladen; beide nutzen denselben Kern, also gibt es keinen Unterschied. Sobald du dich anmeldest, begrüßt dich ein Dateimanager (Files). Wenn du mit der Schaltfläche oben rechts eine neue design file erstellst, öffnet sich eine leere, unendliche Fläche. In der Sprache von Figma heißt diese Fläche Canvas, und sie ist tatsächlich unbegrenzt: Du kannst so viele Designs nebeneinander platzieren, wie du möchtest.
Eine wichtige Angewohnheit für Einsteiger: Benenne deine Datei sofort. Klicke oben links auf den Titel und tippe zum Beispiel "Mein erstes Design". Figma speichert jede Änderung automatisch, du musst also nicht nach Strg/Cmd + S suchen.
Die Oberfläche kennenlernen: drei Hauptbereiche
Auch wenn die Oberfläche von Figma auf den ersten Blick überladen wirkt, besteht sie eigentlich aus drei logischen Bereichen:
- Linkes Panel (Layers / Assets): Hier wird die Baumstruktur jeder Ebene deines Designs aufgelistet. Je größer ein Design wird, desto mehr wird dies zu deiner Landkarte.
- Mittlerer Bereich (Canvas): Der eigentliche Arbeitsbereich, in dem du zeichnest. Mit dem Mausrad zoomst du hinein und heraus, und durch Gedrückthalten der
Leertasteverschiebst du die Ansicht. - Rechtes Panel (Design): Hier stellst du jede Eigenschaft des ausgewählten Objekts ein – Größe, Position, Farbe, Rahmen, Schatten. Wenn nichts ausgewählt ist, zeigt dieses Panel die Seiteneinstellungen.
Die Werkzeugleiste oben enthält die Werkzeuge, die du am häufigsten brauchst. Jedes hat ein Tastenkürzel, und diese zu lernen vervielfacht deine Geschwindigkeit: V zum Verschieben, F für ein Frame, R für ein Rechteck, T für Text.
Was ist ein Frame, und warum ist es die Grundlage von allem?
In Figma bildet das Frame die Grundlage eines Designs. Stell dir ein Frame als "Container-Box" vor: ein Telefonbildschirm, eine Webseite oder eine Visitenkarte. Alles, was du hineinlegst, gehört zu diesem Frame und bewegt sich mit. Es ist das Gegenstück zum "Artboard"-Konzept in einem klassischen Designprogramm.
Wenn du F drückst, erscheinen im rechten Panel vorgefertigte Größen: iPhone, Android, Desktop, Tablet und mehr. Für unser erstes Design wählen wir eine iPhone 14 & 15 Pro-Größe (393 × 852). Auf dem Canvas erscheint ein Telefonbildschirm. Unsere Arbeitsfläche ist nun bereit.
Dein erstes Design mit den Grundwerkzeugen bauen
Gestalten wir nun eine einfache "Profilkarte" innerhalb dieses Telefonbildschirms. Gehen wir Schritt für Schritt vor:
- Hintergrund: Wähle das Frame aus und stelle die Fill-Farbe im rechten Panel auf einen hellgrauen Ton (etwa
#F4F4F5). - Karte zeichnen: Zeichne mit
Rein Rechteck. Um die Ecken abzurunden, setzt du den Wert Corner radius im rechten Panel auf16und wählst Weiß als Füllfarbe. Wenn du magst, füge über den Bereich Effects einen dezentenDrop shadowhinzu. - Avatar hinzufügen: Zeichne erneut mit
Rein kleines Quadrat und mache daraus einen Kreis, indem du den Corner radius auf die Hälfte der Größe setzt (für ein Quadrat von 40×40 nimmst du 20). - Text hinzufügen: Drücke
T, klicke über die Karte und tippe einen Namen. Stelle Schriftart, Größe und Schriftstärke über den Bereich Text im rechten Panel ein. Füge darunter einen kleineren, grauen Untertitel hinzu.
Bei der Ausrichtung kommt meine Lieblingsfunktion von Figma ins Spiel: Wenn du zwei Objekte auswählst, erscheinen zwischen ihnen rote Hilfslinien und Abstandsmaße. Wenn du ein Objekt näher an ein anderes heranziehst, "rastet" es automatisch ein, sobald die Mittelpunkte übereinstimmen. Du kannst mehrere Objekte auswählen und sie mit den Ausrichtungsschaltflächen im rechten Panel zentrieren oder mit gleichmäßigem Abstand verteilen.
Kurze Tipps zu Farbe, Typografie und Layout
Für ein gutes erstes Design konzentrierst du dich besser auf Konsistenz als auf Effekthascherei:
- Wenige Farben verwenden: Eine neutrale (Grautöne), eine Hauptfarbe und eine Akzentfarbe reichen für die meisten Interfaces.
- Konsistente Abstände: Arbeite mit Vielfachen von 8 (8, 16, 24, 32 Pixel). Dieses "8-Punkt-Raster" lässt dein Layout sofort professioneller wirken.
- Eine einzige Schriftart: Verwende anfangs verschiedene Schriftstärken einer Familie wie Inter; vier verschiedene Schriften auf dem Bildschirm schaffen Chaos.
Um ein Element zu duplizieren, beschleunigen Strg/Cmd + D oder das Gedrückthalten von Alt beim Ziehen deine Arbeit enorm. Wenn dir ein Fehler unterläuft, ist Strg/Cmd + Z immer für dich da.
Das Design teilen und in der Vorschau ansehen
Wenn dein Design fertig ist, kannst du zwei Dinge tun. Erstens es in voller Größe wie auf einem echten Bildschirm betrachten – mit der Schaltfläche Present (Wiedergabe) oben rechts. Zweitens mit der Schaltfläche Share einen Link erstellen und ihn an einen Freund oder Kunden senden. Genau hier liegt die Stärke von Figma: Die Person, mit der du teilst, kann das Design im Browser sehen, ohne etwas zu installieren, und – wenn du es erlaubst – sogar Kommentare hinterlassen.
Wenn du ein Bild exportieren möchtest, wählst du das Objekt aus und lädst es über den Bereich Export ganz unten im rechten Panel als PNG, JPG oder SVG herunter. Fürs Web eignen sich meist PNG oder SVG; für den Druck erledigt ein PNG in hoher Auflösung die Aufgabe.
Häufig gestellte Fragen
Ist Figma kostenlos?
Ja, Figma bietet einen großzügigen kostenlosen Plan für die individuelle Nutzung. Damit kannst du unbegrenzt persönliche Dateien erstellen und eine begrenzte Anzahl geteilter Projekte führen. Zum Einstieg und Lernen reicht der kostenlose Plan völlig aus; Funktionen wie Teams und unbegrenzter Versionsverlauf kommen mit den kostenpflichtigen Plänen.
Ich habe keine Designerfahrung – kann ich es trotzdem lernen?
Auf jeden Fall. Die Lernkurve von Figma ist sanft, und du brauchst weder Programmier- noch Zeichenkenntnisse, um das Werkzeug zu nutzen. Wenn du mit einer kleinen Karte wie in diesem Artikel beginnst und jede Woche einen neuen Bildschirm gestaltest, kannst du innerhalb weniger Wochen problemlos einfache Interfaces bauen.
Sollte ich Figma statt Photoshop verwenden?
Für Interface-Design (UI/UX), Prototyping und Teamzusammenarbeit ist Figma deutlich praktischer, weil es im Browser läuft und Echtzeit-Teilen bietet. Photoshop hingegen ist stark in der Fotomanipulation und der Rasterbearbeitung. Der Zweck ist also ein anderer: Wenn du ein digitales Produkt gestaltest, ist Figma die richtige Wahl.
Bereit, dein erstes Design zu bauen? Wenn du die Oberfläche, das Logo oder einen kompletten Produktbildschirm einer Marke professionell aufsetzen möchtest, lass uns deine Idee gemeinsam zum Leben erwecken. Nimm Kontakt mit mir auf und erzähl mir von deinem Projekt.