Dev Mode
Gebouwd voor ontwikkelaars, biedt Dev Mode de mogelijkheid om projecten eenvoudig te inspecteren en om te zetten in code, zonder het ontwerpbestand te wijzigen. Dev Mode is inbegrepen bij de Full- en Dev-werkplekken binnen alle betaalde abonnementen.
Vertrouwd door teams bij
Genereer betere code met behulp van Figma-context
Zet Figma-ontwerpen om in nauwkeurige code met de Figma MCP-server. De server brengt Figma-context rechtstreeks naar agent-gebaseerde coderingstools, zoals VS Code, Cursor, Windsurf en Claude, voor een efficiëntere workflow.
Vind de informatie die je nodig hebt om snel te beginnen met bouwen.
Met functies die zijn ontworpen om code-inspectie te vereenvoudigen en te markeren wat 'ready for dev' is, wordt je workflow soepeler dan ooit.
Vergelijk ontwerpwijzigingen
Bekijk wanneer een frame of component voor het laatst is bewerkt, of open de versiegeschiedenis om ontwerpwijzigingen naast elkaar te leggen.
Duik in de ontwerpspecificaties
Inspecteer eigenschappen van componenten zoals kleurcodes en tokenwaarden, controleer de spatiëring en kopieer en plak de code om je ontwikkelproces te versnellen.
Wijzig de weergave voor meer duidelijkheid
Klik in de weergave 'Ready for Dev' om ontwerpen te zien die zijn gemarkeerd als 'Ready for Dev'. Je kunt ook specifieke componenten aanklikken om ze te isoleren in de Focusweergave.
Bouw met de VS Code-extensie
Werk in een omgeving die je al kent en waar je van houdt met de VS Code-extensie, minder schermwisselingen en meer coderen.
Dev Mode van Figma maakt de samenwerking tussen ontwikkelaars en ontwerpers soepeler, waardoor de wrijving tussen de twee wordt verminderd. En daar houden we van.
Sandra Schaus
Lead UX-expert, Business Development Services, Volkswagen Group Services
Verbind je ontwerpsysteem en codebase voor consistente builds
Dev Mode geeft je de mogelijkheid om consistente, herbruikbare ontwerpen te maken en deze naadloos te verbinden met je codebase via Code Connect.
Verbind je codebase met Code Connect
Met Code Connect kun je onmiddellijk kant-en-klare snippets genereren door je codebase te verbinden met je bestaande ontwerpsysteem in Figma.
Bekijk alle componentopties
In de testomgeving voor componenten kun je alle mogelijke variaties van componenten bekijken, de werking testen en je krijgt zelfs de code om ze te implementeren. Je hoeft alleen maar de beste optie te kiezen.
Toegang krijgen tot systeembrede ontwerpvariabelen
Zorg voor merkconsistentie en bespaar tijd door bestaande variabelen of tokenwaarden te gebruiken met bijbehorende codesyntaxis in Figma. Dit maakt het eenvoudig om alles consistent te houden in al je applicaties.
Wat we zo waarderen aan de tool Code Connect is dat het 't aantal contextwisselingen voor ontwikkelaars aanzienlijk vermindert.
Gilson Hoffmeister
Design Systems Strategist, HP
Optimaliseer de communicatie met ontwerppartners
Functies zoals statusupdates, opmerkingen en aantekeningen zorgen ervoor dat je tijdens het bouwen op één lijn blijft met ontwerpers.
Verminder herhalend werk met betere communicatie
Ontvang meldingen over ontwerpwijzigingen in realtime, zodat je werk nooit gebaseerd is op verouderde informatie. De Ready for Dev-weergave geeft je een duidelijk overzicht van wat klaar is voor ontwikkeling, wat is aangepast en wat is afgerond.
Code met context
Scan door aantekeningen en opmerkingen van designers om een duidelijk beeld te krijgen van wat je moet bouwen.
Controleer je afmetingen
Ontwerpers kunnen afmetingen toevoegen om je te helpen snel afstanden en afmetingen te visualiseren, zodat er niets verloren gaat bij de overgang van ontwerp naar code.
Ontdek meer hulpmiddelen voor design en ontwikkeling
Alles wat je moet weten over Dev Mode
We hebben Dev Mode gebouwd om productontwikkeling efficiënter te maken, van idee tot code. Kom meer te weten over onze productfilosofie en wat de toekomst biedt.
5 dingen die ontwerpers moeten weten voor een vlotte overdracht
Overdracht is een proces, geen moment. Hoe stroomlijn je de overdracht wanneer er een constante stroom is van WIP-ontwerpen, communicatie en samenwerking? Designer Advocate Lauren Andres deelt haar tips.
Ontdek plug-ins voor ontwikkelaars van de community
Ontdek duizenden plug-ins die zijn gemaakt door de Figma-community en die de manier waarop je in Figma werkt, kunnen uitbreiden.