Leitfaden für die Inspektion
Wenn du UI3, das neue Design von Figma, verwendest, stimmen einige Teile dieses Artikels möglicherweise nicht mit dem überein, was du heute im Produkt siehst. Wir danken dir für deine Geduld während wir Aktualisierungen vornehmen. Erfahre mehr über das umgestaltete Figma →
Das Untersuchen von Designs ermöglicht es Entwickler*innen oder anderen Beteiligten, die Struktur und Eigenschaften eines Designs zu verstehen, sodass sie es leichter in Code umsetzen können.
Wie du eine Designdatei untersuchst, hängt von deinem Abonnement, Lizenztyp und deinen Dateiberechtigungen ab. Verwende das untenstehende Tool, um zu sehen, wie du gängige Inspektionsaufgaben – Exportieren, Messen, Code generieren, Anmerkungen anzeigen und Plugins für die Entwicklung verwenden – basierend auf deinem persönlichen Zugriff auf die Datei, die du untersuchen möchtest, durchführen kannst.
Unabhängig von deinem Dateizugriff steht dir eine Inspektionsfunktion zur Verfügung.
Zuerst prüfst du, ob du in der Datei, die du untersuchst, Zugriff auf den Dev Mode hast, indem du oben in der Datei in den Dev Mode wechselst oder die Tastenkombination Umschalt D verwendest. Wenn du keinen Zugriff auf den Dev Mode hast, untersuchst du im Design-Modus. Um zu sehen, wie du untersuchen kannst, kannst du auswählen, ob du Schreibzugriff oder Lesezugriff hast.
Ich habe keinen Dev Mode und nur Lesezugriff.
Brauchst du Zugang zum Dev Mode? Wenn du das Starter-Abo nutzt, musst du ein Upgrade auf ein kostenpflichtiges Abonnement durchführen oder deine Datei in ein kostenpflichtiges Team verschieben. Wenn du ein kostenpflichtiges Abo hast, benötigst du eine Full- oder Dev-Lizenz.
Entfernungen messen
Du kannst Abstände zwischen Objekten messen, auch wenn diese in Frames, Gruppen oder Komponenten eingebettet sind.
- Wähle das erste Objekt auf der Arbeitsfläche aus.
- Halte die Zusatztaste gedrückt:
- Mac: ⌥ Wahltaste
- Windows: Alt
- Bewege den Mauszeiger über das zweite Objekt.
Figma zeigt eine rote Linie zwischen den beiden Objekten sowie horizontale und vertikale Maße an.
Tipp: Hast du Schwierigkeiten beim Messen? Sieh dir die Anleitung zum Messen der Entfernung zwischen Objekten an.
Code generieren
Du kannst automatisch generierte Codefragmente für CSS, iOS oder Android kopieren.
- Wähle ein Objekt auf der Arbeitsfläche aus.
- Klicke mit der rechten Maustaste auf das Objekt und wähle Kopieren/Einfügen als > Als Code kopieren.
- Wähle die Code-Option, die deinen Anforderungen entspricht.
Eigenschaften anzeigen
Die Registerkarte „Eigenschaften“ bietet dir eine Liste der Eigenschaften für Objekte auf der Arbeitsfläche. Dazu gehören Eigenschaften wie Layout, Farbe, Typografie, Textzeichenfolgen, Komponenteneigenschaften, Stile und Variablen. Um die Eigenschaften eines Objekts anzuzeigen:
- Wähle ein Objekt auf der Arbeitsfläche aus.
- Klicke in der rechten Seitenleiste auf die Registerkarte „Eigenschaften“.
Export
- Wähle die zu exportierenden Ebenen aus. Wenn du die gesamte Arbeitsfläche der aktuellen Seite exportieren möchtest, hebst du die Auswahl für alle Objekte auf der Arbeitsfläche auf.
- Klicke in der Registerkarte „Export“ auf das Plus-Symbol, um eine Exportkonfiguration hinzuzufügen. Du kannst einer Auswahl so viele Exportkonfigurationen hinzufügen, wie du brauchst.
- Konfiguriere die Exporteinstellungen. Mehr über Exportformate und Exporteinstellungen bei Figma →
- Klicke bei Bedarf auf Vorschau, um zu sehen, wie dein Asset aussehen wird. Wenn du mehrere Objekte ausgewählt hast, wird die Vorschau nicht angezeigt.
- Klicke auf Export.
Tipp: Möchtest du mehr über das Exportieren erfahren? Sieh dir den vollständigen Leitfaden zum Exportieren in Figma an.
Kommentare anzeigen oder hinzufügen
Kommentare helfen Designern und Entwicklern bei der Zusammenarbeit, indem sie die Aufmerksamkeit auf bestimmte Teile des Designs lenken. Du kannst kommentieren, um mehr Kontext dazu zu geben, wie Teile des Designs funktionieren sollen.
- Klicke in der Symbolleiste oder drücke die Taste C, um den Kommentarmodus aufzurufen. Dein Cursor wird zu einem .
- Wähle einen Ort aus, an dem du kommentieren möchtest:
- Klicke auf die Stelle auf der Arbeitsfläche, an der der Kommentar angeheftet werden soll.
- Oder klicke und ziehe den Cursor, um einen Bereich auszuwählen, den du kommentieren möchtest.
- Gib deine Nachricht in das Feld ein. Gib @ ein, um einen Kollegen oder eine Kollegin zu erwähnen.
- Klicke auf , um deine Nachricht zu senden.
Plugins verwenden
Um Plugins in einer Datei verwenden zu können, benötigst du Schreibzugriff.
Ich habe keinen Dev Mode, aber ich habe Schreibzugriff
Brauchst du Zugang zum Dev Mode? Wenn du das Starter-Abo nutzt, musst du ein Upgrade auf ein kostenpflichtiges Abonnement durchführen oder deine Datei in ein kostenpflichtiges Team verschieben. Wenn du ein kostenpflichtiges Abo hast, benötigst du eine Full- oder Dev-Lizenz.
Schreibzugriff auf ein Design kannst du Inspektionstools direkt im Design-Modus verwenden:
Entfernungen messen
Du kannst Abstände zwischen Objekten messen, auch wenn diese in Frames, Gruppen oder Komponenten eingebettet sind.
- Wähle das erste Objekt auf der Arbeitsfläche aus.
- Halte die Zusatztaste gedrückt:
- Mac: ⌥ Wahltaste
- Windows: Alt
- Bewege den Mauszeiger über das zweite Objekt.
Figma zeigt eine rote Linie zwischen den beiden Objekten sowie horizontale und vertikale Maße an.
Tipp: Hast du Schwierigkeiten beim Messen? Sieh dir die Anleitung zum Messen der Entfernung zwischen Objekten an.
Code generieren
Du kannst automatisch generierte Codefragmente für CSS, iOS oder Android kopieren.
- Wähle ein Objekt auf der Arbeitsfläche aus.
- Klicke mit der rechten Maustaste auf das Objekt und wähle Kopieren/Einfügen als > Als Code kopieren.
- Wähle die Code-Option, die deinen Anforderungen entspricht.
Eigenschaften anzeigen
Auf der Registerkarte „Design“ erhältst eine Liste der Eigenschaften für Objekte auf der Arbeitsfläche. Dies umfasst Eigenschaften wie Layout, Farbe, Typografie, Textzeichenfolgen, Komponenteneigenschaften, Stile und Variablen. Um die Eigenschaften eines Objekts anzuzeigen:
- Wähle ein Objekt auf der Arbeitsfläche aus.
- Scrolle in der Registerkarte „Design“ auf der rechten Seitenleiste zu dem Abschnitt mit den Eigenschaften, die du inspizieren möchtest.
Export
- Wähle die zu exportierenden Ebenen aus. Wenn du die gesamte Arbeitsfläche der aktuellen Seite exportieren möchtest, hebst du die Auswahl für alle Objekte auf der Arbeitsfläche auf.
- Klicke in der Registerkarte „Design“ auf das Plus-Symbol im Abschnitt „Export“, um eine Exportkonfiguration hinzuzufügen. Du kannst einer Auswahl so viele Exportkonfigurationen hinzufügen, wie du brauchst.
- Konfiguriere die Exporteinstellungen. Mehr über Exportformate und Exporteinstellungen bei Figma →
- Klicke bei Bedarf auf Vorschau, um zu sehen, wie dein Asset aussehen wird. Wenn du mehrere Objekte ausgewählt hast, wird die Vorschau nicht angezeigt.
- Klicke auf Export.
Tipp: Möchtest du mehr über das Exportieren erfahren? Sieh dir den vollständigen Leitfaden zum Exportieren in Figma an.
Kommentare anzeigen oder hinzufügen
Kommentare helfen Designern und Entwicklern bei der Zusammenarbeit, indem sie die Aufmerksamkeit auf bestimmte Teile des Designs lenken. Du kannst kommentieren, um mehr Kontext dazu zu geben, wie Teile des Designs funktionieren sollen.
- Klicke in der Symbolleiste oder drücke die Taste C, um den Kommentarmodus aufzurufen. Dein Cursor wird zu einem .
- Wähle einen Ort aus, an dem du kommentieren möchtest:
- Klicke auf die Stelle auf der Arbeitsfläche, an der der Kommentar angeheftet werden soll.
- Oder klicke und ziehe den Cursor, um einen Bereich auszuwählen, den du kommentieren möchtest.
- Gib deine Nachricht in das Feld ein. Gib @ ein, um einen Kollegen oder eine Kollegin zu erwähnen.
- Klicke auf , um deine Nachricht zu senden.
Plugins verwenden
Du kannst ein Plugin aus der Community oder direkt aus einer Datei in Figma oder FigJam ausführen.
- Klicke in der Symbolleiste auf Ressourcen.
- Wähle auf der Registerkarte „Plugins“ eines aus deinen zuletzt verwendeten oder gespeicherten Plugins aus oder suche in der Community nach einem Plugin.
- Klicke auf ein Plugin, um dessen Details anzuzeigen.
- Klicke auf „Ausführen“, um das Plugin im aktuellen Dokument auszuführen.
Ich habe Dev Mode
Um Designs zu untersuchen, wechsele in den Dev Mode, indem du den Dev Mode-Schalter mit der Tastenkombination Shift D aktivierst. Von dort aus kannst du die folgenden Inspektionstools verwenden:
Entfernungen messen
Du kannst Abstände zwischen Objekten messen, auch wenn diese in Frames, Gruppen oder Komponenten eingebettet sind. Wähle im Dev Mode eine beliebige über- oder untergeordnete Ebene auf der Arbeitsfläche aus. Wenn du mit der Maus über umgebende Ebenen fährst, zeigt Figma die Innenabstände oder Abstände zwischen den Objekten an. Du kannst auch den Abstand zwischen bestimmten Objekten messen:
- Wähle das erste Objekt auf der Arbeitsfläche aus.
- Halte die Zusatztaste gedrückt:
- Mac: ⌥ Wahltaste
- Windows: Alt
- Bewege den Mauszeiger über das zweite Objekt.
Figma zeigt eine rote Linie zwischen den beiden Objekten sowie horizontale und vertikale Maße an.
Code generieren
Klicke im Dev Mode auf ein beliebiges Objekt auf der Arbeitsfläche, um den Code-Abschnitt im Inspektionsfenster zu füllen. Je nach Auswahl wird eine typografische Vorschau oder ein Box-Modell angezeigt, gefolgt von automatisch generierten Codefragmenten für das Objekt.
Um dein Sprach- und Einheitenauswahl zu ändern oder ein Codegen-Plugin zu verwenden:
- Wähle oben rechts im Bereich Code eine Sprache oder ein Plugin aus dem Drop-down-Menü aus.
- Klicke bei Bedarf auf Einstellungen prüfen und wähle eine Einheit aus dem Drop-down-Menü aus.
So verwendest du Programmcodeschnipsel in Dev Mode→
Hinweis: Einige Funktionen des Dev Mode, wie etwa der Abschnitt Code, werden im Inspektionsfenster nicht angezeigt, wenn das Kopieren und Freigeben in der Datei deaktiviert sind.
Eigenschaften anzeigen
Im Dev Mode bietet dir die Registerkarte „Untersuchen“ eine Liste der Eigenschaften von Objekten auf der Arbeitsfläche. Dazu gehören Eigenschaften wie Layout, Farbe, Typografie, Textzeichenfolgen, Komponenteneigenschaften, Stile und Variablen. Um die Eigenschaften eines Objekts anzuzeigen:
- Wähle im Dev Mode ein Objekt auf der Arbeitsfläche aus.
- Scrolle auf der Registerkarte „Untersuchen“ in der rechten Seitenleiste zu dem Abschnitt mit den Eigenschaften, die du untersuchen möchtest.
Tipp: Wenn du eine Komponente oder eine Instanz untersuchst, erhältst du eine Komponentenvorschau, einen Link zur Hauptkomponente sowie alle Links zur relevanten Dokumentation und zu relevanten Entwickler-Ressourcen. Die Komponenten-Testumgebung wird im Inspektionsfenster angezeigt, wenn eine Komponenteninstanz ausgewählt ist. Nutze die Testumgebung, um mit den verschiedenen Eigenschaften der Komponenten zu experimentieren, ohne das aktuelle Design zu verändern.
Variablen erkunden
Der Dev Mode umfasst einige Möglichkeiten zum Arbeiten mit Variablen, während du ein Design untersuchst:
- Lass dir Details zu einer Variablen anzeigen, einschließlich Wert und Mode. Du kannst den Mode wechseln, und falls der Wert Aliase verwendet, die gesamte Alias-Kette bis zum Rohwert der Variablen verfolgen.
- Rufe vorgeschlagene Variablen für Rohwerte in einem Design ab, wenn die Werte mit einer oder mehreren deiner vorhandenen Variablen übereinstimmen.
- Greife auf die in der aktuellen Datei erstellten Variablen-Collections zu und sieh dir alle Variablen und Modi in einer Tabelle an.
Weitere Einzelheiten findest du unter Variablen im Dev Mode.
Assets exportieren oder herunterladen
Der Dev Mode kann automatisch Symbole erkennen und sie als herunterladbare Assets für Entwickler*innen bereitstellen. Du siehst diese Assets auf der Registerkarte „Untersuchen“ über den Exporteinstellungen. Bewege den Mauszeiger über ein beliebiges Element, wähle einen Dateityp aus und klicke auf das Download-Symbol.
So richtest du einen benutzerdefinierten Export ein:
- Wähle im Dev Mode die zu exportierenden Ebenen aus.
- Klicke auf der Registerkarte „Untersuchen“ auf das Plus-Symbol im Abschnitt „Export“, um eine Exportkonfiguration hinzuzufügen. Du kannst einer Auswahl so viele Exportkonfigurationen hinzufügen, wie du brauchst.
- Konfiguriere die Exporteinstellungen. Mehr über Exportformate und Exporteinstellungen bei Figma →
- Klicke bei Bedarf auf Vorschau, um zu sehen, wie dein Asset aussehen wird. Wenn du mehrere Objekte ausgewählt hast, wird die Vorschau nicht angezeigt.
- Klicke auf Export.
Anmerkungen anzeigen oder hinzufügen
Mit Anmerkungen können Designer wesentliche Details eines Designs direkt an Entwickler übermitteln. Dies umfasst das Hervorheben wichtiger Eigenschaften, das Visualisieren von Abständen und Größen mit Messungen oder das Teilen von Kontext durch Textnotizen.
Im Dev Mode erscheinen Anmerkungen auf der Arbeitsfläche als ein grüner Punkt. Klicke auf eine Anmerkung, um deren Inhalt anzuzeigen.
Hinweis: Um einer Datei Anmerkungen hinzuzufügen, benötigst du eine Full-Lizenz und Schreibzugriff.
So fügst du einem Design Anmerkungen hinzu:
- Klicke auf die Dev Mode-Schaltfläche rechts oben in der Toolbar, oder nutze die Tastenkombination Umschalttaste D.
- Klicke auf Anmerkungen hinzufügen in der Toolbar, oder nutze die Tastenkombination Umschalttaste T.
- Wähle die Ebene aus, bei der du eine Anmerkung hinzufügen möchtest.
- Schreibe eine Notiz in das Textfeld, oder klicke auf + Property (+Eigenschaft), um eine Eigenschaft aus der Liste auszuwählen. Du kannst sowohl einfachen Text als auch Eigenschaften in eine Anmerkung aufnehmen.
So fügst du einem Design ein Maß hinzu:
- Klicke auf Messen in der Toolbar oder nutze die Tastenkombination Umschalttaste M.
- Bewege den Mauszeiger über eine Ebene, um Optionen zu sehen, wo du deine Maße beginnen kannst.
- Klicke und ziehe vom Startpunkt zu der Ebene, bis zu der das Maß gehen soll.
- Klicke und ziehe das Maß so, dass es das Design nicht verdeckt.
Plugins verwenden
Das Plug-ins-Tab in Dev Mode zeigt deine zuletzt verwendeten Plug-ins sowie von der Figma Community empfohlene Plug-ins.
So nutzt du Plug-ins in Dateien →
Änderungen vergleichen
Wenn ein Frame oder eine Komponente seit deiner letzten Ansicht aktualisiert wurde, kannst du den Versionsverlauf jeweils vergleichen. Dies hilft dir, die neuesten Aktualisierungen zu verfolgen und den Produktionscode präzise zu halten.
Du kannst auch abgelöste Komponenten – oder Instanzen mit Designüberschreibungen – mit der Basiskomponente vergleichen.
- Wähle einen Rahmen der obersten Ebene oder eine Komponente.
- Klicke auf der Registerkarte „Untersuchen“ der rechten Seitenleiste auf Änderungen vergleichen.
Tipp: Halte die Umschalttaste gedrückt und klicke, um zwei Komponenten auf der Arbeitsfläche auszuwählen und sie miteinander zu vergleichen.