In diesem Handbuch behandeln wir die Grundlagen der Arbeit mit Design-Dateien in Figma Design.

Wenn du neu bei Figma Design bist, empfehlen wir dir, unseren Figma Design für Anfänger-Kurs zu besuchen. In diesem Kurs behandeln wir alles, von der Navigation durch Designdateien, der Arbeit mit Ebenen, dem Anwenden von Auto-Layout auf Frames, dem Erstellen von Komponenten bis hin zum Hinzufügen von Prototyp-Erstellungs-Verbindungen zu Designs. Am Ende wirst du eine anpassbare Portfolio-Website komplett von Grund auf erstellt haben. Erfahre mehr über den Figma-Design-Kurs für Anfänger*innen.

Möchtest du mehr über die Unterschiede zwischen den Produkten von Figma erfahren? Schau dir unseren Leitfaden Was ist Figma an.

Was sind Designdateien?

Designdateien stellen dir die Tools zur Verfügung, die du benötigst, um deine Designs zu erstellen, zu teilen und zu testen. Designdateien sind bei Designer*innen, Produktmanager*innen, Texter*innen und Entwickler*innen besonders beliebt. Sie können aber von allen Personen genutzt werden, die visuell gestalten oder kommunizieren wollen.

Erstelle Designdateien, um spezifische Probleme anzugehen, oder um den gesamten Designprozess zu verwalten. Du kannst deine Ideen selbst skizzieren oder sie mit anderen teilen, um gemeinsam kreativ zu sein und Feedback zu erhalten.

Figma-Dateien sind immer in Echtzeit verfügbar und sind stets aktuell, sodass mehrere Personen gleichzeitig an derselben Datei arbeiten können. Mit einer Live-Datei sind alle auf dem gleichen Stand, ohne Dokumente speichern, herunterladen oder hin- und herschicken zu müssen.

Jede Datei verfügt über eine eigene Versionsgeschichte, mit der du die Entwicklung deiner Designs nachverfolgen kannst. Hier kannst du Einblicke in frühere Iterationen gewinnen oder neue Versionen erstellen, um Meilensteine festzuhalten.

Designdateien im Datei-Browser

Du erkennst Figma-Designdateien im Datei-Browser am Symbol auf der Dateikarte.

Ein Beispiel für eine Design-Datei mit dem umkreisten Design-Datei-Icon.

Finde dich zurecht

Wenn du neu bei Figma bist, ist es völlig normal, dass du dich beim ersten Öffnen einer Datei etwas verloren fühlst. Wir nehmen dich mit auf eine Tour, damit du dich orientieren und die Zusammenarbeit mit deinem Team beginnen kannst.

Abstrakte Figma-Benutzeroberfläche mit Seitenleisten und einer unteren Symbolleiste; die zentrale Arbeitsfläche ist größtenteils leer.

Design-Dateien haben vier unterschiedliche Bereiche: eine Symbolleiste unten, eine linke Seitenleiste, eine rechte Seitenleiste und die Arbeitsfläche.

Figma Design-Werkzeugleiste mit verschiedenen Werkzeugen vor einem hellvioletten Hintergrund.

Die Symbolleiste ist dein zentraler Knotenpunkt für die Interaktion mit der Arbeitsfläche und das Hinzufügen von Objekten zur Arbeitsfläche. Es enthält all deine Werkzeuge zum Auswählen von Objekten, zum Bewegen auf der Arbeitsfläche und zum Erstellen von Rahmen, Formen, Text und anderen Ebenen ↓. Dies sind die Bausteine für deine Designs.

Wenn du bereit bist, tiefer einzutauchen, kannst du jedes der Tools in der Symbolleiste erkunden →

Linke Seitenleiste, die Figma-Design-Datei-Optionen, Seitennavigation und Asset-Tools vor einem lila Hintergrund anzeigt.

Über die linke Seitenleiste hast du Zugriff auf Ebenen, Seiten und Assets und kannst dort Aktionen für deine Dateien ausführen.

Verwende den Assets-Tab, um lokale Komponenten anzuzeigen oder Komponenten aus Kits oder Bibliotheken zu finden (erfordert Schreibzugriff).
Zugriff auf Aktionen auf Dateiebene, wie Verschieben, Veröffentlichen einer Bibliothek, Erstellen eines Zweigs oder Anzeigen des Versionsverlaufs.
Greife über das Menü auf mehr Funktionen, Aktionen und Einstellungen zu, oder ändere deine Einstellungen zum Beispiel für den Dark Mode oder das Scrollverhalten.

Die linke Seitenleiste erkunden →

In der rechten Seitenleiste erhältst zu Zugriff auf mehr Informationen zu deinen Designs. Wenn du nichts ausgewählt hast, kannst du dir hier lokale Ressourcen wie Farb- oder Textstile anzeigen lassen.

Wenn du eine Ebene ausgewählt hast, kannst du die Eigenschaften deiner aktuellen Auswahl erkunden. Deine Berechtigungen legen fest, was du in der Seitenleiste sehen kannst und welche Aktionen du ausführen kannst.

Die rechte Seitenleiste ist auch der Ort, an dem du Werkzeuge findest, um deine Designs zu teilen und in Echtzeit zusammenzuarbeiten. Zum Beispiel können Sie die Datei teilen, sehen, wer sonst noch hier ist, über Audio sprechen und mehr.

Wenn du es benötigst, kannst du auch deine persönlichen Zoom- und Ansichtsoptionen anpassen. Die Änderungen, die du hier vornimmst, gelten nur für deine Ansicht.

Seitenansicht mit Vergleich der Registerkarten Kommentar und Eigenschaften, Kommentare links und Designeigenschaften rechts zeigend.

Lesezugriff

Kommentar: Kommentare anzeigen und lesen
Eigenschaften: Eigenschaften deiner Auswahl anzeigen lassen

Eine Gegenüberstellung der rechten Seitenleiste, wobei ein Beispiel angezeigt wird, wenn der Design-Tab ausgewählt ist, und ein anderes, wenn der Prototyp-Tab ausgewählt ist. Die zugehörigen Einstellungen werden unterhalb des ausgewählten Tabs angezeigt.

Bearbeitungszugriff

Design: Designeigenschaften von Ebenen ansehen und bearbeiten
Prototyp: Prototyp-Interaktionen, -Flows und -Einstellungen anzeigen lassen und bearbeiten

Die rechte Seitenleiste erkunden →

Designs prüfen mit Dev Mode

Siehst du dir die Datei im Rahmen des Übergabeprozesses an? Dev Mode ist eine Schnittstelle für Entwickler*innen zum Prüfen und Navigieren von Designdateien.

Mit Dev Mode kannst du Designs erkennen, die Ready for dev sind, und hast Zugang zu den erforderlichen Informationen für die Umwandlung von Designs in Code. Leitfaden zum Dev Mode →

Arbeitsfläche

In der Arbeitsfläche ordnest du Ebenen an, um deine Designs zu erstellen. Hier gibt es jede Menge Platz, um deine Ideen auszuprobieren und zu iterieren.

Bewegen in der Datei

Bewege dich in der Datei und sieh dir an, was sich außerdem auf der Arbeitsfläche befindet.

Maus: Halte die Leertaste gedrückt. Halte dann die Maustaste gedrückt, um dich in der Arbeitsfläche zu bewegen.

Trackpad: Streiche mit zwei Fingern in eine beliebige Richtung, um die Arbeitsfläche zu bewegen. Figma verwendet die Standardeinstellungen deines Computers für die Scrollrichtung.

Vergrößern und verkleinern

Vergrößere die Ansicht, um dir ein Detail näher anzusehen, oder verkleinere sie für einen besseren Gesamtüberblick. Der aktuelle Vergrößerungsgrad wird dir in der oberen rechten Bildschirmecke angezeigt.

Maus: Halte ⌘ Befehlstaste/Strg gedrückt und scrolle nach unten zum Vergrößern und nach oben zum Verkleinern.

Trackpad: Bewege zwei Finger aufeinander zu, um zu verkleinern, oder bewege zwei Finger voneinander weg, um zu vergrößern.

Ein animiertes Bild, das ein Beispiel für das Zusammenziehen, Schwenken und Zoomen auf der Arbeitsfläche zeigt.

Ausprobieren ohne Stress

Wenn du zum ersten Mal an einer Datei mitarbeitest oder sie erkundest, kann die Interaktion mit Elementen auf der Arbeitsfläche etwas verwirrend sein. Viele Menschen haben Angst, dass sie aus Versehen etwas bewegen, ändern oder löschen.

Viele Möglichkeiten bedeuten nicht zwangsläufig viel Verantwortung. Wähle das Handwerkzeug in der Symbolleiste aus oder drücke H auf der Tastatur. Jetzt kannst du in einer Datei klicken, ziehen und zoomen, ohne unbeabsichtigte Änderungen befürchten zu müssen.

Kurz und gut

Kurze Zusammenfassung! Die Symbolleiste bietet dir die Tools und Funktionen, die du zum Erstellen und Kombinieren von Ebenen benötigst. Du kannst diese Ebenen dann auf der Arbeitsfläche anordnen, um deine Designs zu erstellen.

In der linken Seitenleiste kannst du deine Datei erkunden und organisieren. In der rechten Seitenleiste kannst du die Ebeneneigenschaften anzeigen.

Lass uns zwei der Hauptkonzepte etwas näher betrachten: Seiten und Ebenen.

Seiten

Seiten helfen dir dabei, deine Designdateien zu organisieren. Jede Seite ist eine eigene Arbeitsfläche, die dir noch mehr Platz gibt, um deine Ideen in die Tat umzusetzen und auszuprobieren. Seiten werden oft für Folgendes verwendet:

Designs über Meilenstein oder Status verwalten
Komponenten organisieren
Ein Notizbuch mit Ideen führen
Ältere Designs archivieren

Figma-Dateibrowser, der Seiten organisiert nach Meilensteinen wie Übersicht, Benutzerforschung und Komponenten in einer linken Seitenleiste zeigt.

Um die Seite einer Datei zu durchsuchen, klicke auf den aktuellen Seitennamen in der linken Seitenleiste. Du kannst auch tippen, um eine neue Seite zu erstellen. Seiten in der Seitenleiste anzeigen →

Seiten eignen sich hervorragend für das Teilen einer bestimmten Design-Collection. Zum Beispiel kannst du eine eigene Seite für Überprüfungen erstellen oder für Designs, die Ready for dev sind.

Um eine Seite zu teilen, klicke mit der rechten Maustaste auf den Namen der Seite und klicke auf Link auf Seite kopieren. Wer diesen Link öffnet, landet auf der richtigen Seite.

Ebenen

Designs werden in der Regel aus einer Kombination aus Formen, Text und anderen Elementen erstellt.

Wenn du Objekte zur Arbeitsfläche hinzufügst, behandelt Figma jedes Objekt als separate Ebene. Separate Ebenen ermöglichen dir, die Eigenschaften jeder Ebene einzeln zu ändern oder zu bearbeiten.

Dies gilt zum Beispiel für dieses Design für einen Social Media-Post, der einen Namen, ein Profilfoto, ein Bild und eine Beschriftung enthält.

Social-Media-Beitragsdesign, das einen Hund mit Donuts zeigt, einschließlich Profilname, Bild und Bildunterschrift auf einer geschichteten Figma-Arbeitsfläche.

Du musst kein Geometrie-Profi sein, um Figma zu verwenden. Aber es ist gut zu wissen, dass wir auf der Arbeitsfläche mit drei Dimensionen arbeiten.

Neben der X-Achse (horizontal) und der Y-Achse (vertikal), die uns die Koordinaten der Ebenen auf der Arbeitsfläche liefern, gibt es noch eine dritte Dimension, den Z-Index. Dieser verrät uns die Tiefe der Ebenen oder die Reihenfolge, in der sie erscheinen.

Ebenen im Ebenen-Tab ansehen

Ebenen können sich auf, hinter, neben oder in anderen Ebenen befinden. Um zu sehen, wie die Ebenen angeordnet sind, sieh dir das Ebenen-Tab in der rechten Seitenleiste an.

Arten von Ebenen

Jede Ebene verfügt über einen Namen und ein Symbol für die Art der Ebene. Vielleicht ist dir schon aufgefallen, dass manche dieser Symbole in der Toolbar zu sehen sind. Du kannst dieses Tool aus der Toolbar auswählen oder das Tastaturkürzel verwenden, um mehr Ebenen dieses Typs zu erstellen.

Ebenen-Symbol	Ebenen-Name	Shortcut
	Rahmen	`F`
	Gruppe	`⌘ Befehlstaste` `G`
	Komponente	`⌥ Wahltaste` `⌘ Steuertaste` `K` oder `Strg` + `Alt` + `K`
	Instanz	k.A.
	Text	`T`
	Form	`R`
	Bild	`⇧ Umschalttaste` `⌘ Befehlstaste` `k` oder `Umschalttaste` `Strg` `k`
	Auto-Layout	`Umschalttaste` `A`
	Abschnitt	`Umschalttaste` `S`
	GIF oder Video	`⇧ Umschalttaste` `⌘ Befehlstaste` `k` oder `Umschalttaste` `Strg` `k`

Reihenfolge und Hierarchie der Ebenen

Die Reihenfolge, in der Ebenen im Ebenen-Tab sichtbar sind, ist ebenfalls wichtig. Die Reihenfolge der Ebenen legt fest, wie Ebenen sich in der Arbeitsfläche überlagern.

Dieses Menü verfügt über ein Rechteck, das als Hintergrund fungiert. Da es sich unterhalb der anderen Ebenen im Ebenen-Tab befindet, ist es in der Arbeitsfläche auch oberhalb dieser Ebenen zu sehen. Wenn es sich im Ebenen-Tab über den anderen Ebenen befinden würde, wären der Text und die Symbol-Ebenen überhaupt nicht sichtbar.

Ebenen als Container

Wie bereits erwähnt, können sich Ebenen auch in anderen Ebenen befinden. Ob eine Ebene andere Ebenen beinhaltet, erkennt man daran, dass im Ebenen-Tab daneben ein Pfeil zu sehen ist. Klicke auf den Pfeil, um dir die Ebenen innerhalb dieses Containers anzusehen.

Beziehungen zwischen Ebenen

Wir verwenden die Ausdrücke über- und untergeordnet, um die Beziehungen zwischen Containern und den darin enthaltenen Ebenen zu beschreiben.

Übergeordnete Ebenen beinhalten andere Ebenen wie Rahmen, Komponenten und Gruppen.
Untergeordnete Ebenen befinden sich in einer übergeordneten Ebene. Es kann sich um einzelne Ebenen wie eine Form, um Text, oder um Container handeln, die selbst über untergeordnete Ebenen verfügen.

Übergeordnete, untergeordnete und gleichgestellte Beziehungen →

Mit Containern arbeiten

Es gibt verschiedene Arten von Ebenen, die als Container fungieren: Gruppen, Rahmen und Abschnitte. Sie mögen zwar ähnlich erscheinen, verfügen aber alle über eigene Vorteile.

Gruppen

Gruppen sind sehr gut geeignet, um Ebenen zu einem einzigen Element zusammenzufassen. Sie vereinfachen das Ebenen-Tab und stellen dir ein einzelnes Objekt zur Verfügung, mit den du in der Arbeitsfläche arbeiten kannst. Beispiel: Du möchtest, dass eine Sammlung von Formen zusammenbleibt.

Gruppen sind Sammlungen von Ebenen und keine individuellen Elemente. Sie verfügen also nicht über eigene Dimensionen oder Eigenschaften. Wenn du Änderungen an einer Gruppe vornimmst, werden diese Änderungen auf jede Ebene in der Gruppen angewandt.

Rahmen

Rahmen sind eine weitere Möglichkeit, Ebenen in Figma zu kombinieren. Rahmen können als Gerüst für eine bestimmte Geräte oder Bildschirmgröße dienen, wie eine einzelne Seite in einem App-Design. Sie können auch als Container für Ebenen dienen, die individuelle Elemente bilden, wie die Ebenen in einer Navigationsleiste. Du kannst Rahmen sogar innerhalb von anderen Rahmen einbetten.

Anders als Gruppen können Frames eigene Dimensionen und Eigenschaften haben, wie Füllungen, abgerundete Ecken und Schattierungen. Sie verfügen auch über Eigenschaften wie Auto-Layout, Einschränkungen und Layoutgitter, mit denen die Ebenen kontrolliert oder beeinflusst werden können, die darin eingebettet sind.

Voreinstellungen für Rahmen

Figma bietet Frame-Voreinstellungen für gängige Assets, Geräte und Bildschirmgrößen. Egal, ob du eine mobile App oder einen Instagram-Beitrag gestaltest. Frame-Voreinstellungen erkunden →

Abschnitte

Das Tool Abschnitt ermöglicht es, einen bestimmten Bereich auf der Arbeitsfläche zu bezeichnen und zu beschriften. Abschnitte können auch verwendet werden, um miteinander in Verbindung stehende Konzepte und Ideen zu gruppieren oder Designs zu organisieren.

Abschnitte helfen dabei, den Fokus zu setzen, den Kontext bereitzustellen und Mitarbeitende oder Kolleg*innen durch Prozesse zu führen. Sie sind optimal für Aktivitäten wie Überprüfungen oder zum Teilen von Designs für Übergaben geeignet.

In unserer Best-Practice-Anleitung findest du mehr Informationen darüber, wann Gruppen und Rahmen zu verwenden sind.

Eigenschaften von Ebenen erkunden

Wenn du den Mauszeiger über eine Ebene oder ein Objekt auf der Arbeitsfläche bewegst, erscheint ein Rahmen um das gesamte Element. Klicke auf eine Ebene, um sie auszuwählen und dir mehr Informationen über ihre Eigenschaften anzeigen zu lassen.

In der linken Seitenleiste siehst du, wie die Ebene benannt ist und wie sie organisiert ist. In der rechten Seitenleiste siehst du die Eigenschaften der Ebene.

Die Eigenschaften einer Ebene umfassen grundlegende Informationen über die Ebene, wie etwa ihre Abmessungen und Position auf der Arbeitsfläche. Ebenso wie alle Gestaltungselemente, wie Farbe, Texteigenschaften oder Effekte wie Schatten.

Welche Eigenschaften du sehen kannst, hängt vom Typ der Ebene ab, die du ausgewählt hast. Wenn eine Ebene einen Stil verwendet, dann sind nur der Name des Stils und das Symbol auf der rechten Seitenleiste sichtbar.

Kompatibel mit:

Rahmen Gruppen Komponenten Instanzen Auto-Layout Abschnitten GIFs