En praktisk guide till Figmas Dev Mode

Är du frontend-utvecklare eller visuell designer som vill optimera ditt arbetsflöde med Figmas nya Dev Mode? I denna guide går en av våra designers, Mikael Cederbom, igenom funktionerna och delar med sig av tips som är speciellt anpassade för att maximera din produktivitet och göra samarbetet mellan designers och utvecklare smidigare. Oavsett om du är nyfiken på hur Dev Mode fungerar, eller om du vill dyka djupare in i dess specifika funktioner, täcker den här artikeln allt du behöver veta.

Vad är Dev Mode?

Dev Mode, som lanserades i beta under sommaren 2023, är en arbetsyta i Figma som är utformad för att förenkla överlämningsprocessen mellan designers och utvecklare. Det syftar till att ge utvecklare enkel tillgång till de specifikationer de behöver för att implementera designer, såsom mått, kodsnuttar och export av tillgångar. Genom att använda sig av välbekanta verktyg förbättrar Dev Mode upplevelsen av att inspektera element, visa lager och komma åt designinformation, vilket gör det enklare än någonsin att översätta design till kod.

Byta till Dev Mode

Det finns flera sätt att växla till Dev Mode i Figma, vilket gör det lätt att komma åt när du är redo att dyka ner i utvecklingsdetaljer:

Växla i redigeringsfältet: Det enklaste sättet är att klicka på Dev Mode-växeln i Figmas gränssnitt.
Kortkommando: Använd Shift+D för att snabbt växla till Dev Mode.
Sök med Command: Tryck på Command+P (Mac) eller Ctrl+P (Windows) och sök efter ”dev” för att aktivera läget.

Dessa snabba metoder gör det enkelt att navigera mellan design- och utvecklingsmiljöer, så att du kan justera ditt arbetsflöde beroende på projektets fas.

Förbättrad rendering av kod

En av de mest värdefulla funktionerna i Dev Mode är dess förmåga att effektivisera design-till-kod-processen. Det gör det möjligt för utvecklare att inspektera frames och komponenter och tillhandahåller föreslagna kodsnuttar baserat på föredragna programmeringsspråk som CSS, ShiftUI eller XML. Utvecklare kan också anpassa enheterna för dimensioner — och enkelt växla mellan px, rem eller andra enheter — vilket säkerställer att kodutmatningen matchar projektkraven.

Hur du byter kodspråk eller enhet:

Gå in i Dev Mode utan att välja någon frame eller element
I den högra panelen, navigera till avsnittet Code Settings
Använd rullgardinsmenyn för att ändra kodspråk eller enhet

Denna funktion hjälper till att minska manuellt arbete för utvecklare och ser till att koden är mer i linje med deras kodningsstandarder direkt från designen.

Redo för utveckling: Effektivisera överlämning

Att veta när en design är redo för utveckling är avgörande för att undvika onödiga fram-och-tillbaka mellan designers och utvecklare. Dev Mode förenklar detta med en ny taggningsfunktion som gör det möjligt för designers att markera sektioner eller komponenter som ”Ready for Dev”. Denna visuella signal indikerar att ett designelement är slutgiltigt och redo för implementering.

Hur man markerar en design som ‘Ready for Dev’:

Skapa en sektion: Använd Shift + S för att skapa en ny sektion
Markera som redo: Klicka på ikonen ”Mark as ready for dev” bredvid sektionsnamnet.
Frame-nivå: Kom ihåg att för att markera individuella frames måste du vara i Dev Mode.

Denna funktion hjälper till att hålla projektstatusen tydlig och säkerställer att utvecklare bara arbetar med färdigställda designer.

Jämför ändringar: Spåra designuppdateringar

Under iterativa designprocesser kan det bli komplext att hålla reda på ändringar, särskilt över långa sprintar. Dev Mode innehåller en funktion liknande Zeplins Compare Changes, som gör det möjligt för utvecklare och designers att granska vad som har ändrats mellan versioner.

Hur man använder Compare Changes:

Välj en frame du vill jämföra.
I den högra panelen, klicka på Compare Changes
Använd historikpanelen till vänster för att välja datum för jämförelse
Granska ändringarna under ”layers” för att se vilka element som redigerats, lagts till eller tagits bort.

Denna funktion säkerställer transparens och gör det enklare att identifiera uppdateringar, vilket gör överlämning smidigare och minimerar misskommunikation.

Ladda ner källbilder

En vanlig utmaning vid designöverföringar är att få tag på de ursprungliga källbilderna. Istället för att exportera hela frames, som kan innehålla oönskade element, låter Dev Mode dig enkelt ladda ner de specifika bildtillgångar som används i designen.

Två sätt att ladda ner källbilden:

Ladda ner från länken: Välj ramen med bilden och använd länken i den högra panelen.
Ladda ner från Assets: Använd avsnittet Assets för snabb export.

Denna funktion säkerställer att utvecklare får bilder med rätt upplösning och storlek, vilket effektiviserar processen att integrera tillgångar i kodbasen.

Component Playground: Experimentera utan att förstöra designen

Component Playground är ett utmärkt sätt att utforska de olika tillstånden av en komponent utan att påverka huvuddelen av designen. Det är särskilt användbart när man arbetar med variabla lägen eller interaktiva tillstånd definierade av designern.

Hur man öppnar Playground Modal:

Välj en komponent (antingen en instans eller huvudkomponenten).
I den högra panelen, klicka på Open in Playground

Playground låter dig utforska variationer av en komponent, vilket gör det lättare att förstå hur den ska bete sig i olika sammanhang utan att riskera att ändra originaldesignen.

Visa mig grid: Designa med responsivitet i åtanke

För responsiv webdesign är grids avgörande. Designers kan tillämpa grid-layouts på frames, men Dev Mode gör det enkelt för utvecklare att växla grid-synlighet för att förstå hur element är strukturerade.

Hur man visar och döljer grid:

Tryck Shift + G för att växla grid-synlighet.

Denna snabba åtkomst hjälper utvecklare att visualisera hur en design anpassar sig till olika skärmstorlekar och säkerställer att layouten överensstämmer med den avsedda designen.

Figma VS Code Extension: Integrera design med kod

Figma VS Code-tillägget tar med Dev Mode-funktionalitet direkt in i din kodredigerare. Det låter dig ta emot kommentarer, länka designer till din kodbas och hålla dig uppdaterad om designändringar utan att lämna din kodmiljö.

Installera:

Hitta Figma för VS Code på Visual Studio Marketplace.

Denna integration minskar behovet av att växla mellan appar, vilket gör det enklare att hålla design och utveckling i synk.

Jira Plugin: Hantera designfrågor effektivt

För team som använder Jira är Figmas Jira-plugin en game-changer. Det gör det möjligt att skapa, importera och länka ärenden direkt till sidor eller lager i Figma, vilket ger enkel åtkomst till relevant designkontext.

Hur man får Jira-pluginen:

Gå till fliken Plugins i den högra panelen.
Sök efter ”Jira” eller använd Browse in Community-alternativet.
Installera och konfigurera med ditt konto.

Detta hjälper till att minska kontextväxling, vilket säkerställer att designfeedback och uppgifter är centraliserade inom ditt projektledningsflöde.

Kostnadsöverväganden för Dev Mode

Från och med 2024 har Figmas Dev Mode introducerat licenskostnader. Medan många funktioner fortfarande är gratis, kräver avancerade funktioner som att spåra designändringar, anpassa kodutmatning och synkronisera filer med kodbaser en betald licens.

Licenskostnader:

$25 per plats och månad för Organisationsplanen
$35 per plats och månad för Enterprise-planen.

När du bestämmer om du ska investera i en Dev Mode-licens, överväg ditt teams behov och potentialen för förbättrad effektivitet i design-till-utvecklingsprocessen.

Vad designers kan göra för att förbättra arbetsflödet

Samarbete är nyckeln till att utnyttja Dev Mode effektivt. Såhär kan designers bidra:

1. Markera sektioner som är redo för utveckling

2. Lägg till beskrivningar och dokumentera komponentvariationer

3. Använd grid-layouts för att vägleda responsiva designer.

Dessa steg säkerställer att utvecklingsprocessen är smidig och minimerar fram-och-tillbaka vid överlämning.

Sammanfattning: Utnyttja kraften i Dev Mode

Figmas Dev Mode erbjuder en färdig lösning för att förbättra designöverföringsprocessen. Dess funktioner stöder både designers och utvecklare i att skapa ett sömlöst arbetsflöde. När vi går in i 2024 är det värt att utvärdera kostnaden för dessa funktioner mot det värde de tillför. Med rätt inställning och nära samarbete kan Dev Mode förändra hur du förvandlar design till verklighet.

Utforska idag:

Välj ditt kodspråk
Ladda ner och exportera assets
Jämför ändringar i Playground
Integrera med verktyg som VS Code, Jira, Storybook och GitHub

Genom att utnyttja dessa verktyg kan du få ut det mesta av Figmas Dev Mode och bygga bättre digitala produkter. Håll utkik efter fler praktiska guider i Knowledge Hub!