Designdateien entdecken
Dieser Leitfaden behandelt die Grundlagen der Arbeit mit Figma Designdateien. Du kannst jederzeit auf diesen Leitfaden zurückgreifen, wenn du deine Erinnerung auffrischen möchtest.
Der Einfachheit halber (und um den Text etwas kürzer zu halten 😉) bezeichnen wir diese in diesem Leitfaden als Designdateien.
Weitere Informationen über den Unterschied zwischen Designdateien und FigJam-Dateien findest du in unserem Leitfaden Was ist Figma.
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.
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.
Designdateien haben vier verschiedene Bereiche: Eine Toolbar, eine linke Seitenleiste, eine rechte Seitenleiste und die Arbeitsfläche. Wir haben das Layout vereinfacht, sodass du herausfinden kannst, was in jedem Bereich los ist.
Toolbar
Die Toolbar enthält eine Auswahl an verschiedenen Tools und Aktionen. Diese umfassen vier Gruppen: Tools, Aktionen, Zusammenarbeit und Anzeigeoptionen.
Tools
Probiere verschiedene Tools aus, um die Datei besser kennenzulernen, wähle Ebenen aus und verschiebe sie oder verändere ihre Größe.
Entdecke Tools, um Rahmen, Formen, Text und andere Ebenen ↓ zu erstellen. Sie sind die Bausteine für deine Designs.
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.
Aktionen
Greife auf Aktionen auf Dateiebene zu, wie etwa Bibliotheken und Versionsgeschichte.
Oder greife mit ausgewählten Ebenen auf Funktionen zum Kombinieren von Ebenen zu. So kannst du zum Beispiel Masken anwenden, Komponenten erstellen oder Formen bearbeiten.
Zusammenarbeit
Hier findest du Tools, um deine Designs zu teilen und in Echtzeit mit anderen zusammenzuarbeiten. Teile die Datei, schau dir an, wer sonst noch da ist, unterhalte dich über Audio und mehr.
Anzeigeoptionen
Lasse dir Prototypen anzeigen oder passe deine individuellen Zoom- und Anzeigeoptionen an. Die Änderungen, die du hier vornimmst, wirken sich nur auf deine Ansicht aus.
Linke Seitenleiste
Die linke Seitenleiste ermöglicht dir Zugriff auf Ebenen, Seiten und Assets. Lass dir eine Liste der Seiten in der Datei anzeigen, wähle eine Seite zur Ansicht aus und erkunde dann eine beliebige Ebene auf der Arbeitsfläche.
Verwende das Assets-Tab, um dir lokale Komponenten anzeigen zu lassen oder Komponenten aus Bibliotheken zu finden (erfordert Schreibzugriff).
Rechte Seitenleiste
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.
Lesezugriff
- Kommentar: Kommentare anzeigen und lesen
- Eigenschaften: Eigenschaften deiner Auswahl anzeigen lassen
- Export: Assets aus der Datei exportieren
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 bereit für die Weiterentwicklung 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: [Symbol Mausklick links] Halte die Leertaste gedrückt. Halte dann die Maustaste gedrückt, um dich in der Arbeitsfläche zu bewegen.
Trackpad: [Symbol für das Ziehen mit zwei Fingern] 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 die ⌘ Befehlstaste/Strg und die Leertaste 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.
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 in der Toolbar das [Hand-Tool] aus oder drücke H auf deiner Tastatur. Jetzt kannst du in der Datei nach Herzenslust Elemente anklicken, verschieben, vergrößern und verkleinern, ohne befürchten zu müssen, dass du aus Versehen etwas veränderst.
Kurz und gut
Kurze Zusammenfassung: Über die Toolbar erhältst du die Tools und Funktionen, die du brauchst, um Ebenen zu erstellen und zu kombinieren. Dann kannst du diese Ebenen auf der Arbeitsfläche anordnen, um deine Designs zu erstellen.
In der linken Seitenleiste kannst du deine Ebenen ausprobieren und organisieren. In der rechten Seitenleiste kannst du dir die Eigenschaften der Ebenen ansehen.
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
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-Sammlung. Zum Beispiel kannst du eine eigene Seite für Überprüfungen erstellen oder für Designs, die bereit für die Weiterentwicklung 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.
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 | Tastaturkürzel |
|
Rahmen |
F |
|
|
Gruppe |
⌘ Befehlstaste G |
|
|
Komponente |
⌥ Wahltaste ⌘ Steuertaste K oder Strg + Alt + K |
|
|
Instanz |
N/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 Rahmen 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 Voreinstellungen für häufig vorkommende Assets, Geräte und Bildschirmgrößen, zum Beispiel für das Design einer mobilen App oder eines Instagram-Posts. Voreinstellungen für Rahmen 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 ihre Dimensionen und ihre Position auf der Arbeitsfläche, sowie alle Informationen zum Stil, 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:
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Text Formen Bildern Auto-Layout Abschnitten GIFs
Kompatibel mit:
Komponenten Instanzen Auto-Layout
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Text Formen Bildern Auto-Layout Abschnitten GIFs
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Text Formen Bildern Auto-Layout Abschnitten GIFs
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Auto-Layout Abschnitten
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Text Formen Bildern Auto-Layout Abschnitten GIFs
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Text Formen Bildern Auto-Layout Abschnitten GIFs
Kompatibel mit:
Rahmen Gruppen Komponenten Instanzen Text Formen Bildern Auto-Layout Abschnitten GIFs
Du kannst die Eigenschaften nicht ändern?
Wenn du auf eine Ebene klickst, ihre Eigenschaften aber nicht ändern kannst, bedeutet das, dass du nur Lesezugriff hast. Du kannst den Tab Eigenschaften verwenden, um dir die Eigenschaften der Ebene anzeigen zu lassen, aber du kannst keine Änderungen vornehmen.
Wenn du dir die Datei im Rahmen des Übergabeprozesses ansiehst, ist der Dev Mode genau das Richtige für dich. Der Dev Mode ist eine Schnittstelle für Entwickler*innen zum Überprüfen und Navigieren von Design-Dateien. Leitfaden für den Dev Mode →
Berechtigungen in Designdateien
Deine Berechtigungen legen fest, welche Aktionen du tätigen kannst und ob du Dateien ändern kannst. An dieser Stelle werden wir das Berechtigungsmodell von Figma nicht tiefergehend erläutern. Ein Konzept solltest du aber verstehen, und zwar den Unterschied zwischen Personen mit Bearbeitungszugriff und Personen mit Lesezugriff.
- Personen mit Bearbeitungszugriff können eine Datei ändern oder bearbeiten. Dies umfasst alle Änderungen wie das Bewegen von Ebenen, das Aktualisieren von Eigenschaften oder das Verwalten der Datei selbst.
- Personen mit Lesezugriff können Seiten und Prototypen erkunden, aber sie können keine Änderungen vornehmen. Sie können jedoch ihren Beitrag an Dateien leisten, indem sie Feedback geben.
Aktionen erkunden, die Personen mit Lesezugriff zur Verfügung stehen
- Designdateien öffnen und ansehen
- Abstände zwischen Ebenen in Designdateien messen
- Ebenen in der linken Seitenleiste oder der Arbeitsfläche auswählen
- Mit dem Inspektionspanel die Eigenschaften der Ebene ansehen
- An Audioanrufen teilnehmen (mit Beschriftung)
- Kommentare hinzufügen, beantworten oder erledigen
- Versionsgeschichte einer Datei ansehen, dann Duplizieren oder Freigeben von Links zu bestimmten Versionen
- Prototypen und Präsentationen ansehen und damit interagieren
- Vorhandene Prototypen-Flows und -Verbindungen ansehen
- Rahmen, Komponenten und Ebenen kopieren oder exportieren
Einsicht in die eigenen Berechtigungen
Der schnellste Weg, dir anzeigen zu lassen, ob du eine Datei bearbeiten kannst, ist die Toolbar. Wenn du die ganze Toolbar mit allen Erstellungs-Tools und -Aktionen sehen kannst, verfügst du über Bearbeitungszugriff auf die Datei.
Wenn dir neben dem Dateinamen Nur Lesezugriff angezeigt wird oder du nur wenige Tools sehen kannst , verfügst du nur über Lesezugriff auf die Datei.
Du benötigst Bearbeitungszugriff?
Du kannst in der Toolbar Zugriff auf eine Datei beantragen. Klicke auf die Schaltfläche Bearbeitungszugriff beantragen neben dem Dateinamen.
Wenn dir diese Option nicht angezeigt wird, wurde dein Zugriff durch einen Team- oder Unternehmensadmin eingeschränkt. Wenn du über das Professional-Abo verfügst, wende dich an deinen Team-Admin. Wenn du über das Organization- oder Enterprise-Abo verfügst, beantrage ein Editor-Upgrade.
Startklar?
Diese Einsteigerprojekte sind optimal dafür geeignet, um deine ersten Erfahrungen zu machen: