Dev Mode in Figma biedt je alles wat je nodig hebt om door ontwerpbestanden te navigeren en ontwerpen om te zetten in code. Met Dev Mode kunnen ontwerpers en ontwikkelaars op elkaar afgestemd blijven, zodat belangrijke details niet verloren gaan tijdens het overdrachtsproces.

Ontwikkelaars gebruiken Dev Mode om:

• Toegang te krijgen tot geavanceerde inspectiemogelijkheden en meer codegen-talen
• Ervoor te zorgen dat ze bouwen volgens de laatste specificaties door eenvoudig frameversies te vergelijken.
• Bekijk snel ontwerpen die 'ready for dev' zijn met statussen en aantekeningen
• Workflows te stroomlijnen met integraties voor ontwikkelaars, zoals JIRA, Storybook en GitHub
• Alle varianten in een componentenset te verkennen zonder het bestand te wijzigen
• Ontwerpen aan tickets, documentatie en codecomponenten te koppelen
• Zij aan zij ontwerpen te inspecteren en code te schrijven met de Figma-extensie voor VS Code.

Dev Mode inschakelen

Dev Mode is een ontwikkelaarsgerichte interface voor het inspecteren en navigeren van ontwerpen. Je kunt Dev Mode in elk Figma Design-bestand openen. Schakel als volgt tussen de Ontwerpmodus en Dev Mode:

1. Open een Figma Design-bestand.
2. Klik op de Dev Mode-schakelaar of gebruik de sneltoets ShiftD.

Navigeer

In Dev Mode biedt de linker zijbalk een gemakkelijke manier om te navigeren tussen ontwerpen die zijn gemarkeerd als Ready for Dev.

• A

  Bekijk welke hulpmiddelen 'ready for dev' zijn

  Het Dev Mode-pictogram geeft aan welke pagina's frames, componenten, exemplaren en secties bevatten die gemarkeerd zijn als Ready for Dev. Objecten op het canvas die als Ready for Dev zijn gemarkeerd, verschijnen onder Ready for Dev in het lagenpaneel binnen Dev Mode.

  Een hulpmiddel markeren als Ready for Dev:

  1. Selecteer in Dev Mode een frame, component, exemplaar of sectie.
  2. Klik op Markeren als Ready for Dev in de werkbalk.

  Als je een Full-, Dev- of View-werkplek hebt binnen een organisatie of enterprise, biedt Dev Mode een weergave van ontwerpen die zijn gemarkeerd als Ready for Dev. De weergave 'Ready for Dev' verschijnt alleen als een of meer ontwerpen in het bestand de Dev-status hebben.

• B

  Zie wanneer een frame voor het laatst is bewerkt

  Je kunt zien wanneer een frame voor het laatst is bewerkt onder de naam van het frame in het navigatiepaneel.

• C

  Navigeer door frames en lagen

  In Ontwerpmodus kan iedereen gerelateerde inhoud in secties groeperen en secties markeren als Ready for Dev. Dev Mode geeft prioriteit aan inhoud binnen een sectie. Alle inhoud buiten een sectie is nog steeds zichtbaar in de linker zijbalk, maar is standaard ingeklapt.

  Klik op een frame in de linker zijbalk om het op het canvas te centreren. Selecteer het frame op het canvas om de lagen te bekijken die erin genest zijn. Wanneer je een frame selecteert, verandert het navigatiepaneel in een lagenpaneel en worden alleen de lagen van het momenteel geselecteerde bovenste frame weergegeven.

  Navigeer door frames en lagen in Dev Mode ->

Inspecteren

Het inspectiepaneel toont ontwerpspecificaties en relevante componentinformatie die nodig zijn om een ontwerp te begrijpen en om te zetten in code.

• A

  Vergelijk ontwerpwijzigingen

  Als er wijzigingen zijn aangebracht sinds je een bestand voor het laatst hebt bekeken, verschijnt Wijzigingen vergelijken naast de laaginformatie in het inspectiepaneel. Klik op de link op het modale venster met de framegeschiedenis te openen, waar je de huidige versie kunt vergelijken met eerdere versies van het ontwerp.

  Je kunt ook een losgekoppelde component vergelijken met eerdere versies en met de hoofdcomponent waarmee deze gekoppeld is geweest. Je kunt de ontkoppelingsgeschiedenis wissen om te voorkomen dat je informatie over de oorspronkelijke hoofdcomponent ziet.

  Vergelijk wijzigingen in Dev Mode ->
• B

  Voeg externe links en hulpbronnen voor ontwikkelaars toe

  Zowel ontwerpers als ontwikkelaars kunnen links toevoegen naar externe hulpbronnen die kunnen helpen bij de implementatie van een component. Dit kan gaan om GitHub-, Jira- en Storybook-links, evenals VS Code-links die kunnen worden gebruikt met de Figma voor VS Code-extensie. Dev-hulpbronnen die aan componenten worden toegevoegd, worden doorgevoerd in alle exemplaren van de betreffende component.

  Hulpbronnen koppelen aan lagen in Dev Mode →

C

Bouw sneller met aanpasbare codefragmenten

• D

  Bekijk de namen en typen van lagen

  De naam van de geselecteerde laag wordt bovenaan in het inspectiepaneel weergegeven, samen met het laagtype (component, exemplaar, frame, tekst, enzovoort). Je kunt ook zien wanneer de laag voor het laatst is bijgewerkt.

• E

  Probeer componentvariaties uit in de testomgeving voor componenten

  Wanneer je een component of instantie selecteert, zie je een preview van de component, een link naar de hoofdcomponent, en links naar relevante documentatie en dev-hulpbronnen.

  De testomgeving voor componenten verschijnt in het inspectiepaneel wanneer er een componentexemplaar is geselecteerd. Gebruik de testomgeving om te experimenteren met de verschillende eigenschappen van de component zonder het daadwerkelijke ontwerp te wijzigen.

• F

  Bekijk toegepaste stijlen

  Bekijk stijlen en variabelen die op de geselecteerde laag zijn toegepast.

• G

  Mediabestanden downloaden

  Dev Mode kan automatisch pictogrammen detecteren en ze als downloadbare hulpmiddelen voor ontwikkelaars presenteren. Als je een individuele vectorlaag in een pictogram wilt inspecteren, kun je de automatische pictogramdetectie uitschakelen:

  1. Klik op Hoofdmenu in de werkbalk
  2. Beweeg de muis over Weergave in het keuzemenu
  3. Deselecteer Pictogrammen automatisch detecteren

  Met hulpmiddelen kun je ook GIF-afbeeldingen en MP4-videobestanden downloaden.

• H

  Expor

  Je kunt exportinstellingen toepassen op lagen om het bestandsformaat en andere exportinstellingen te bepalen. Figma ondersteunt de volgende exportformaten: PNG, JPG, SVG en PDF. Lees meer over exports in Figma →

Annoteren

Ontwerpers kunnen aantekeningen gebruiken om ontwerpen te voorzien van extra context, specificaties en afmetingen. Dit maakt het voor ontwikkelaars gemakkelijk om ervoor te zorgen dat ze bij de overdracht geen cruciale opmerkingen missen. Gebruik aantekeningen en metingen in Dev Mode om:

• Belangrijke eigenschappen naar voren te brengen zodat ontwikkelaars ze niet over het hoofd zien
• Ontwikkelaars te helpen snel afstanden en afmetingen te visualiseren
• Voeg extra context toe met tekstnotities die direct aan de ontwerpen zijn gekoppeld

Leer hoe je metingen kunt toevoegen en ontwerpen kunt annoteren in Dev Mode →

Overdracht aan ontwikkelaars beheren

Wanneer je secties, frames en componenten hebt die gemarkeerd zijn als 'Ready for Dev', kun je gebruikmaken van de weergaven 'Ready for Dev' en 'Focus' in Dev Mode om je overdrachtsproces voor ontwikkelaars te beheren:

• De weergave 'Ready for Dev' biedt een eenvoudige manier om alle ontwerpen in een bestand die zijn gemarkeerd als Ready for Dev te bekijken. Je kunt filteren en al je ontwerpen zien die gemarkeerd zijn als 'Ready for Dev'. Lees verder over de weergave 'Ready for Dev' en het overdrachtsproces →
  

• De focusweergave toont slechts één ontwerp dat ready for dev is tegelijk. Je kunt al je gebruikelijke Dev Mode-tools gebruiken, de lagen van het ontwerp verkennen en belangrijke informatie vinden, zoals een versiegeschiedenis met aantekeningen. Lees verder over de focusweergave →

Dev Mode-statussen en meldingen

Statussen en meldingen in Dev Mode helpen bij het beheren van de overdracht naar de ontwikkelaar. Statussen worden gebruikt om bij te houden wanneer secties, frames of componenten 'ready for dev' zijn. Meldingen zijn gebaseerd op statuswijzigingen, zodat ontwikkelaars kunnen reageren op de status van ontwerpen.

Statussen

Alle abonnementen die Dev Mode bieden, bevatten de status Ready for Dev. Je kunt de status Ready for Dev instellen op componenten, frames en secties, om aan te geven dat het ontwerp ready for dev is. Een extra status, Voltooid, is beschikbaar als je een Organisatie- of Enterprise-abonnement hebt.

Zie Dev Mode-statussen en -meldingen voor meer informatie, bijvoorbeeld over het gebruik van statussen.

Meldingen

Als je een bestand in Dev Mode hebt bekeken en een Full- of Dev-werkplek hebt, ontvang je telkens wanneer een ontwerp in dat bestand is gemarkeerd als 'Ready for Dev' een melding. Dit gaat ook om de eerste keer dat een ontwerp als 'Ready for Dev' wordt gemarkeerd, evenals wanneer de status 'Ready for Dev' wordt verwijderd en vervolgens opnieuw wordt ingesteld.

Zie Dev Mode-statussen en -meldingen voor meer informatie, waaronder het in- en uitschakelen van meldingen in Dev Mode.

Plug-ins voor de Dev Mode gebruiken

Plug-ins in de Dev Mode helpen je bij het automatiseren van taken en het verbinden van andere tools voor documentatie en communicatie. Dit biedt onder andere de volgende mogelijkheden:

• Blijf op schema met ontwikkelingstaken door synchronisatie met Jira in Figma, FigJam en Dev Mode
• Verbind je Figma Design-systeem en ontwerpsysteem in code met Storybook
• Koppel ontwerpen aan code, zodat ze altijd gesynchroniseerd blijven, door Github in Figma te integreren.
• Pas de code-uitvoer aan (voor Tailwind of React) of voor je eigen codecomponenten

Het tabblad Plugins in Dev Mode toont je recent gebruikte plug-ins en aanbevolen plug-ins van de Figma-Community.

Ontdek hoe je plug-ins in bestanden kunt gebruiken →

Bekijk het Dev Mode-testbestand om meer te weten te komen over de Dev Mode plug-ins.

Figma voor VS Code

Met Figma voor VS Code kun je ontwerpbestanden navigeren en inspecteren, samenwerken met ontwerpers, ontwerpwijzigingen bijhouden en de implementatie van ontwerpen versnellen – allemaal zonder je teksteditor te verlaten. Verbeter de productiviteit van ontwikkelaars door een einde te maken aan het wisselen van context en het drukke werk dat nodig is om ontwerpen om te zetten in code.

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

Lees verder over de extensie Figma voor VS Code →