Codeausschnitte werden im Inspektionspanel von Dev Mode angezeigt, wenn ein Objekt auf der Arbeitsfläche ausgewählt ist. Der Bereich Code bietet relevante Komponentendetails und generiert Code anhand der Auswahl und Spracheinstellungen unter „Inspect“ (Prüfen):

• Wenn Text ausgewählt ist, zeigt der Bereich Code eine typografische Vorschau an, gefolgt von Informationen zu Layout, Typografie und Inhalten.
• Bei allen anderen Auswahlmöglichkeiten wird ein Box-Modell angezeigt, mit Details zu Rand, Grenze und Objektabständen sowie Informationen zu Layout und Stil.

Spracheinstellungen festlegen

Du kannst deine bevorzugte Sprache und Einheit für Codeausschnitte unter Code settings (Codeeinstellungen) im Inspektionspanel festlegen. Die Sprach- und Einheitseinstellungen werden für alle generierten Codeausschnitte für auf der Arbeitsfläche ausgewählte Objekte übernommen.

1. Hebe die Auswahl für alle Objekte auf der Arbeitsfläche auf.
2. Wähle eine Option aus der Drop-down-Liste Language (Sprache):
   • CSS (Web)
   • SwiftUI oder UIKit (iOS)
   • Compose oder XML (Android).
3. Wähle aus der Drop-down-Liste Unit (Einheit) eine Einheit aus. Welche Einheiten verfügbar sind, hängt von der Sprachauswahl ab.

Einstellungen für Sprache und Einheit ändern

Sobald du ein Objekt ausgewählt hast, kannst du deine Auswahl für Sprache und Einheit im Bereich Code des Inspektionspanels ändern.

1. Wähle oben rechts im Bereich Code eine Sprache aus dem Drop-down-Menü aus.
2. Click Inspect settings and select a unit from the dropdown.

Einheitsskala festlegen

Mit Einheitsskalen kannst du Einheitsdimensionen in Relation zu einer bestimmten Größe festlegen. Beispielsweise kannst du eine Root-Schriftgröße für die CSS-REM-Einheiten festlegen oder einen Skalenfaktor bestimmen, um Dimensionen in iOS-Punkte zu skalieren.

So passt du die Einheitsskala für deine ausgewählte Sprache und Einheit an:

1. Wähle ein Objekt auf der Arbeitsfläche aus.
2. Klicke im Bereich Code des Inspektionspanels auf [inspect settings icon] Inspect settings (Einstellungen prüfen) neben dem Drop-down-Menü für die Sprache.
3. Wähle Set unit scale… (Einheitsskala festlegen) aus.
4. Je nach der Einheitseinstellung kannst du die Skala in der Ansicht Unit scale (Einheitsskala) eingeben oder auswählen.
5. Click .

Codeauszüge ansehen

Codeauszüge werden generiert, wenn du ein Objekt auf der Arbeitsfläche auswählst, während du dich in Dev Mode befindest. Der Bereich Code zeigt je nach Objekttyp und ausgewählter Sprache relevante Informationen an.

Während die meisten Objekte auf der Arbeitsfläche ähnliche Codeauszüge generieren, ist das bei der Textauswahl etwas anders. Der Bereich Code zeigt in diesem Fall eine typografische Ansicht anstelle eines Box-Modells, gefolgt von Codeauszügen der jeweiligen typografischen Informationen.

Eventuelle Variablen, die einem ausgewählten Objekt zugewiesen sind, werden ebenfalls im Codeauszug angezeigt. Mit der Codesyntax kannst du Variablen als Code darstellen, indem du gültige Variablennamen verwendest, um so ein nahtloses Handoff zu unterstützen.

Weitere Informationen zu Codesyntax und Variablen in Figma Design ->

Codeauszüge kopieren

Du kannst einen Codeauszug kopieren und an einen Texteditor übertragen. So kopierst du einen Codeauszug:

1. Wähle das Objekt aus, für das du einen Code generieren möchtest.
2. Suche im Bereich Code des Inspektionspanels nach dem Codeauszug, den du kopieren möchtest.
3. Bewege den Mauszeiger über den Codeauszug und klicke rechts oben auf Copy (Kopieren).

Code Connect

Code Connect ist ein Tool für Designsysteme und Entwicklungsteams, mit dem man Programmcode für Komponenten im Dev Mode einfügen kann. Beim Überprüfen einer Komponente mit verbundenen Codeauszügen wird Entwickler*innen Designsystemcode aus ihren Bibliotheken anstelle von automatisch generiertem Code angezeigt.

Code Connect basiert auf der Figma-API und ist vollständig anpassbar, um mehrere Designsysteme, Produkte und Sprachen zu unterstützen.

Schau dir den Code Connect-Hub an, um zu erfahren, wie du benutzerdefinierte Codeauszüge mit Komponenten synchronisierst →

Sobald Code Connect implementiert ist, zeigen deine Codeauszüge im Dev Mode verbunden und Auszüge aus der Bibliothek deiner Organisation an.