Bevor du anfängst

Wer diese Funktion nutzen kann

In allen kostenpflichtigen Abos verfügbar

Erfordert eine unbeschränkte Design-Lizenz oder eine Dev Mode-Lizenz

Die Erweiterung Figma for VS Code bietet Entwickler*innen eine einfache Möglichkeit, Designs direkt aus VS Code abzurufen und zu prüfen. Du kannst Designdateien durchsuchen und prüfen, mit Designer*innen zusammenarbeiten, Änderungen nachverfolgen und die Designimplementierung beschleunigen – ohne dein gewohntes Designumfeld zu verlassen.

Das kannst du mit der Erweiterung Figma for VS Code:

• Kommentare und Aktivität in Echtzeit sehen und darauf reagieren
• Auf Designs basierende Programmcode-Empfehlungen erhalten
• Code-Dateien mit Design-Komponenten verbinden

Figma-Designs in VS Code öffnen

Es gibt mehrere Möglichkeiten, eine Designdatei über die VS Code-Erweiterung zu öffnen:

Über den Dev Mode

1. Wähle in den Code-Einstellungen oder dem Abschnitt Code des Inspektionspanels CSS als bevorzugte Sprache aus.
2. Klick auf einen Frame der obersten Ebene.
3. Klicke im Inspektionspanel neben dem Namen der Ebene auf Optionen.
4. Wähle In VS Code öffnen.

Aus VS Code

1. Öffne VS Code
2. Klicke in der Aktivitätsleiste auf Figma oder wähle Figma for VS Code aus deiner Liste von Erweiterungen.
3. Klicke in der primären Seitenleiste unter Dateien auf das Design, das du öffnen möchtest.

Figma-Designs in VS Code überprüfen

Designdatei in VS Code anzeigen

Figma for VS Code erweitert die Inspektionsfunktionen des Dev Mode und bringt Designdateien direkt in deinen Texteditor. Wenn du eine Designdatei in VS Code auswählst, siehst du die Frames der Datei nach Abschnitt, Status (z. B. entwicklungsfertig) und Seite gruppiert. Hat ein Frame keinen übergeordneten Abschnitt oder zugewiesenen Status, werden diese nicht angezeigt.

Frame überprüfen

Wähle aus einem Raster von Frames aus und sieh die jeweiligen Frames in der Fokusansicht. Suche nach Frames und filtere Ergebnisse, um schnell das Richtige zu finden.

Entwicklungsfertige Designs bestimmen

Klicke auf die Ebenen in der Toolbar, um die Abschnitte zu sehen, die als entwicklungsfertig gekennzeichnet sind.

Codeschnipsel anzeigen

Codeschnipsel und relevante Informationen wie Modi und Stile findest du im Tab Code.

Wähle oben rechts in der Inspektions-Toolbar deine bevorzugte Sprache und Einheit für Codeschnipsel.

Auf Entwicklungsressourcen zugreifen

Über den Tab Entwicklungsressourcen kannst du auf hilfreiche Entwicklungslinks zugreifen. Klicke auf Entwicklungsressourcen hinzufügen, um eine Codedatei oder Entwicklungsressource zu verlinken.

Wenn es in deiner aktuellen Codebasis eine passende Implementierung für einen Link gibt, wird die Datei in VS Code statt deinem Browser geöffnet.

Entwicklungsressourcen mit Ebenen im Dev Mode verlinken→

Komponenteneigenschaften anzeigen

Wenn du eine Komponente auswählst, kannst du ihre Eigenschaften im Tab Komponenteanzeigen.

Objekte exportieren

Objekte für eine ausgewählte Ebene kannst du im Tab Objekte herunterladen und exportieren.

Erfahre mehr über die Exportauswahl von Figma→

Automatische Vervollständigung mit Codevorschlägen

Die Erweiterung Figma for VS Code bietet abhängig von der ausgewählten Ebene automatische Vervollständigungsvorschläge an. Das ist hilfreich, wenn du Komponenten erstellst, die keine bestehende Implementierung in deine Codebasis haben.

Kommentarhinweise anzeigen

Du kannst Kommentarbenachrichtigungen in Echtzeit unter Benachrichtigungen in der primären Sidebar anzeigen. Klicke auf einen Hinweis, um ihn anzuzeigen und dem Design über VS Code einen Kommentar hinzuzufügen.

Kommentarratgeber in Figma→

Plug-ins in VS Code ausführen

Nutze Tools von Drittanbietern und individuell angepassten Code, ohne deinen Codeeditor zu verlassen.  In unseren Dokumenten erfährst du, wie du dein privates Plug-in in VS Code nutzen kannst →

Von Figma for VS Code abmelden

1. Drücke in VS Code, Shift Command P zum Anzeigen und Ausführen von Befehlen.
2. Wähle Figma: Abmelden aus der Liste der Optionen in der Suchleiste.