Vad Figmas Dev Mode betyder för utvecklare

Som utvecklare som samarbetar med designers om produktutveckling kommer du att möta olika utmaningar som kan hindra effektivt lagarbete. Många av dessa problem uppstår på grund av begränsat engagemang i designprocessen eller ofullständiga designtillgångar.

Figma har introducerat Figma Dev Mode för att ta itu med dessa problem, i syfte att stödja sömlöst design-utvecklingssamarbete.

Hur kommer detta att påverka ditt arbetsflöde som utvecklare? Fördjupa dig i Figma Dev Mode, utforska dess funktioner och upptäck bästa praxis för dess användning.

Vad är Figma Dev Mode?

Figma, det populära gränssnittsdesignverktyget, är populärt bland team som bygger prototyper eller skapar webbplatsmockups. Dess Dev Mode, som företaget tillkännagav vid Config 2023, syftar till att fungera som en arbetsyta för utvecklare efter att skaparna insett hur svårt det var för dem att interagera med Figma-duken.

Dev Mode liknar inspekteringsverktyget i Chrome men det förmedlar en designers avsikt på ett mer bekant språk.

Figmas utvecklingsläge erbjuder en rad funktioner, inklusive inspektera, kodavsnitt, plugins, designsystem, sektionsstatus och möjligheten att jämföra ändringar. Dessa funktioner bör hjälpa till att förbättra kommunikationen, effektivisera processer och upprätthålla ett konsekvent design-till-utveckling-arbetsflöde.

För närvarande är Dev Mode i beta, så du behöver Figma beta-skrivbordsappen för att komma åt den.

Sömlös kommunikation med utvecklarläge

När du kommer åt designfiler kan innehållet se ut som en multiversum av paneler, fyllda med designterminologier som kan vara svåra att förstå, och du kanske inte ens vet var du ska börja. Med bara en knapptryckning materialiseras du till ett utrymme som känns mer bekant för dig.

Navigationspanelen är mindre trång med rullgardinsmenyer som innehåller flera ramar och lager som expanderar för att visa upp olika sektioner. Den här nya versionen är mycket mer organiserad.

En annan bra funktion som du kanske märker är tidsstämpeln som indikerar den senaste redigeringen. Du kan se redigeringsdetaljerna genom att markera alternativet för jämför ändringar på panelen Inspektera. Det betyder att du kan se och hålla reda på ändringar som gjorts, liknande versionshistorik, ett koncept som passar ditt ordförråd.

Panelen Inspektera presenterar information som är relevant för dig på språket du förstår: kod. Du kan inspektera element och lägg till plugins som är bättre lämpade för ditt arbete. Dev Mode erbjuder olika interaktionsfunktioner, så att du kan dela dina idéer och förslag på olika punkter. Dessa funktioner inkluderar markörchatt, kommentarblockering, ljudchatt och en delningsknapp.

Dessa funktioner möjliggör samtidiga design-utvecklingssamarbete, eftersom återkoppling sker i realtid inom samma miljö. Som ett resultat förbättrar det produktiviteten och accelererar ditt arbetsflöde.

Effektiv tillgångsutvinning

Det är inte ovanligt att designers tillhandahåller ofullständiga designtillgångar, vilket kan vara frustrerande. Utvecklare värdesätter resurser och komponenttillgänglighet för att säkerställa byggeffektivitet. Med Dev Mode är tillgångsutvinning så enkelt som ett par klick.

När du väljer en ram visar inspektionspanelen en lista över de tillgångar som används. Det gör dem också lätt tillgängliga för nedladdning i fyra olika format.

Detta verktyg låter dig komma åt tillgångar utan att behöva gå fram och tillbaka med designteamet. Detta hjälper till att undvika fel eller förvirring, hjälper dig att spara tid och låter dig fokusera på andra uppgifter.

Förenklade överlämningsprocesser

Dev Mode är det bästa paketet för att hantera handoffs. Den kombinerar allt du behöver på en enda plats som du kan skräddarsy efter ditt arbetsflöde. Dev Mode hjälper till att påskynda handoff-processen genom att aktivera:

• Design och utveckling i en miljö
• Samarbete i realtid
• Inspektion och kodsnuttar
• Designa systemintegration
• Sektionsstatusetiketter (t.ex. "Redo for dev")

Bästa metoder och tips för att använda utvecklingsläget

Du kan använda Figmas Dev Mode som en del av ditt arbetsflöde, men hur kan du få ut det mesta av det? Prova dessa förslag.

• Använd Dev-resurser och plugins för att skräddarsy din upplevelse; länka de verktyg du redan använder i Dev Mode för att effektivisera ditt arbetsflöde. Från GitHub till ramverk i din stack, det finns varianter att välja mellan.
• Använd funktionerna inspektera och kodavsnitt för att komma åt mått, specifikationer, stilar och tillgångar för designelement. Du kan också generera kod i olika bibliotek genom att använda plugins.
• Håll koll på designförändringar för att säkerställa att du inte går miste om någonting. De Jämför förändringar funktionen fungerar som ett versionshistorikverktyg – se till att kontrollera det regelbundet.
• Dra nytta av alla samarbetsfunktioner för kommunikation och nå ut till designers med hjälp av kommentarer, markörchatt och mer.
• Du kan också inspektera element i VS Code med den nya Figma VS Code-tillägget. Det låter dig också göra mer – inklusive filnavigering, ändringsspårning, designersamarbete och acceleration av designimplementering – utan att lämna VS Code.
• Håll dig uppdaterad om nyare funktioner, se hur de kan tjäna dig på bästa sätt och förbättra din kompetens vid varje chans.

Omfamna utvecklingsläget för att effektivisera ditt arbetsflöde

Figma Dev Mode bör göra ditt arbetsflöde mer effektivt, vilket möjliggör bättre samarbete mellan designer och utvecklare med nödvändiga funktioner.

Det finns fler delar till Figma-ekosystemet, och appens popularitet betyder att det är ett värdefullt verktyg du kan ta med dig från jobb till jobb.