Voordat je begint

Wie kan deze functie gebruiken?

Beschikbaar op alle betaalde abonnementen

Vereist een Volledige of Dev-werkplek 

De extensie Figma voor VS-code biedt ontwikkelaars een gemakkelijkemanier om ontwerpen direct vanuit VS-code te openen en te inspecteren. Je kunt ontwerpbestanden navigeren en inspecteren, samenwerken met ontwerpers, wijzigingen bijhouden en de implementatie van ontwerpen versnellen, allemaal zonder je ontwikkelomgeving te verlaten.

Gebruik de extensie Figma voor VS-code om:

• Bekijk en reageer in realtime op reacties en activiteiten
• Krijg codesuggesties op basis van ontwerpen.
• Codebestanden koppelen aan ontwerpcomponenten

Open Figma Designs in VS-code

Er zijn een paar manieren om een ontwerpbestand te openen via de VS Code-extensie:

Vanuit Dev Mode

1. Stel CSS in als je voorkeurstaal in de code -instellingen of de code -sectie van het inspectiepaneel.
2. Klik op een frame op het hoogste niveau.
3. Klik in het inspectie paneel op Opties naast de laagnaam.
4. Selecteer Openen in VS-code.

Vanuit VS-code

1. Open VS Code.
2. Klik op Figma in de activiteitenbalk, of zoek Figma voor VS-code in je lijst met extensies.
3. Klik in de primaire zijbalk onder Bestanden op het ontwerp dat je wilt openen.

Inspecteer Figma Designs in VS-code

Verken een ontwerpbestand in VS-code

Figma voor VS-code breidt de functionaliteit van de inspectiefuncties van Dev Mode uit en brengt ontwerpbestanden direct naar je teksteditor. Wanneer je een ontwerpbestand selecteert in VS-code, zie je frames in het bestand gegroepeerd op sectie, status (bijv. klaar voor ontwikkeling) en pagina. Als een frame geen bovenliggende sectie of toegewezen status heeft, zijn deze niet zichtbaar.

Een frame inspecteren

Kies uit een rooster van frames en bekijk ze afzonderlijk met de focusweergave. Zoek naar frames en filter de resultaten om snel te vinden wat je zoekt.

Bekijk welke ontwerpen klaar zijn voor ontwikkeling

Klik op lagen in de werkbalk om de secties te bekijken die gemarkeerd zijn als "Klaar voor ontwikkeling".

Codefragmenten bekijken

Bekijk codefragmenten en relevante informatie zoals modi en stijlen in het tabblad Code.

Kies je voorkeurstaal en -eenheid voor codefragmenten rechtsboven in de inspectie-werkbalk.

Toegang tot Dev-hulpbronnen

Toegang tot relevante ontwikkelingslinks in het tabblad Dev-hulpbronnen. Klik op Dev-hulpbronnen toevoegen om een link naar een codebestand of dev-hulpbron toe te voegen.

Als een link een overeenkomstige implementatie heeft in je huidige codebase, opent het bestand in VS-code in plaats van in de browser.

Dev-hulpbronnen koppelen aan lagen in Dev Mode →

Componenteigenschappen bekijken

Als je een component hebt geselecteerd, kun je de eigenschappen ervan bekijken in het tabblad Component .

Hulpmiddelen exporteren

Download en exporteer hulpmiddelen voor een geselecteerde laag in het tabblad Hulpmiddelen.

Lees verder over het exporteren van selecties uit Figma →

Codesuggesties voor automatisch aanvullen

De extensie Figma voor VS-code biedt automatisch aanvulsuggesties op basis van de geselecteerde laag. Dit is handig als je componenten bouwt die nog niet in je codebase zijn geïmplementeerd.

Commentaarmeldingen bekijken

Je kunt commentaarmeldingen in realtime bekijken onder Meldingen in de primaire zijbalk. Klik op een melding om het ontwerp te bekijken en er een reactie aan toe te voegen via VS-code.

Handleiding voor reacties in Figma →

Plug-ins uitvoeren in VS-code

Maak gebruik van tools van derden en aangepaste code zonder je code-editor te verlaten.  Bekijk onze documentatie om te leren hoe je je privé-plug-in kunt laten werken in VS-code →

Log uit van Figma voor VS Code

1. Druk in VS-code op Shift Command P om opdrachten weer te geven en uit te voeren.
2. Selecteer Figma: uitloggen in de lijst met opties in de zoekbalk.