Hva Figmas Dev Mode betyr for utviklere

Som utvikler som samarbeider med designere om produktutvikling, vil du møte ulike utfordringer som kan hindre effektivt teamarbeid. Mange av disse problemene oppstår fra begrenset involvering i designprosessen eller ufullstendige designelementer.

Figma har introdusert Figma Dev Mode for å løse disse problemene, med sikte på å støtte sømløst design-utviklingssamarbeid.

Hvordan vil dette påvirke arbeidsflyten din som utvikler? Dykk inn i Figma Dev Mode, utforsk funksjonene og oppdag beste praksis for bruk.

Hva er Figma Dev Mode?

Figma, det populære grensesnittdesignverktøyet, er populær blant team som bygger prototyper eller lager nettsidemodeller. Dens Dev Mode, som selskapet annonserte på Config 2023, har som mål å tjene som et arbeidsområde for utviklere etter at skaperne innså hvor vanskelig det var for dem å samhandle med Figma-lerretet.

Dev Mode ligner på inspeksjonsverktøyet i Chrome, men det formidler en designers hensikt på et mer kjent språk.

Figmas utviklermodus tilbyr en rekke funksjoner, inkludert inspeksjon, kodebiter, plugins, designsystemer, seksjonsstatus og muligheten til å sammenligne endringer. Disse funksjonene skal bidra til å forbedre kommunikasjonen, strømlinjeforme prosesser og opprettholde en konsistent design-til-utvikling arbeidsflyt.

For øyeblikket er Dev Mode i beta, så du trenger Figma beta desktop-appen for å få tilgang til den.

Sømløs kommunikasjon med utviklermodus

Når du får tilgang til designfiler, kan innholdet se ut som et multivers av paneler, fylt med designterminologier som kan være vanskelige å forstå, og du vet kanskje ikke engang hvor du skal begynne. Med bare å trykke på en knapp materialiserer du deg til et rom som føles mer kjent for deg.

Navigasjonspanelet er mindre trangt med rullegardinmenyer som inneholder flere rammer og lag som utvides for å vise frem forskjellige seksjoner. Denne nye versjonen er mye mer organisert.

En annen flott funksjon du kanskje legger merke til er tidsstemplet som indikerer siste redigering. Du kan se redigeringsdetaljene ved å merke av alternativet for sammenligning av endringer i Inspiser-panelet. Det betyr at du kan se og holde styr på endringer som er gjort, i likhet med versjonshistorikk, et konsept som passer for vokabularet ditt.

Inspiser-panelet presenterer informasjon som er relevant for deg ved å bruke språket du forstår: kode. Du kan inspisere elementer og legg til plugins som passer bedre til arbeidet ditt. Dev Mode tilbyr ulike interaksjonsfunksjoner, slik at du kan dele ideene og forslagene dine på forskjellige punkter. Disse funksjonene inkluderer markørchat, kommentarblokkering, lydchat og en deleknapp.

Disse funksjonene aktiverer samtidig design-utviklingssamarbeid, ettersom tilbakemelding skjer i sanntid innenfor samme miljø. Som et resultat forbedrer det produktiviteten og akselererer arbeidsflyten din.

Effektiv aktivautvinning

Det er ikke uvanlig at designere tilbyr ufullstendige designelementer, noe som kan være frustrerende. Utviklere verdsetter ressurser og komponenttilgjengelighet for å sikre byggeeffektivitet. Med Dev Mode er aktivautvinning så enkelt som noen få klikk.

Hver gang du velger en ramme, viser inspeksjonspanelet en liste over ressursene som brukes. Det gjør dem også lett tilgjengelige for nedlasting i fire forskjellige formater.

Dette verktøyet lar deg få tilgang til eiendeler uten å måtte gå frem og tilbake med designteamet. Dette bidrar til å unngå feil eller forvirring, hjelper deg å spare tid og lar deg fokusere på andre oppgaver.

Forenklede overleveringsprosesser

Dev Mode er den beste pakken for å håndtere overleveringer. Den kombinerer alt du trenger på ett enkelt sted som du kan skreddersy til arbeidsflyten din. Utviklermodus hjelper til med å fremskynde overleveringsprosessen ved å aktivere:

• Design og utvikling i ett miljø
• Samarbeid i sanntid
• Inspeksjon og kodebiter
• Design systemintegrasjon
• Seksjonsstatusetiketter (f.eks. «Klar for utvikling»)

Beste fremgangsmåter og tips for bruk av utviklermodus

Du kan bruke Figmas Dev Mode som en del av arbeidsflyten din, men hvordan kan du få mest mulig ut av det? Prøv disse forslagene.

• Bruk utviklerressurser og plugins for å skreddersy opplevelsen din; koble sammen verktøyene du allerede bruker i Dev Mode for å strømlinjeforme arbeidsflyten. Fra GitHub til rammeverk i stabelen din, det er varianter å velge mellom.
• Bruk funksjonene for inspeksjon og kodebiter for å få tilgang til mål, spesifikasjoner, stiler og aktiva for designelementer. Du kan også generere kode i forskjellige biblioteker ved å bruke plugins.
• Hold styr på designendringer for å sikre at du ikke går glipp av noe. De Sammenlign endringer funksjonen fungerer som et versjonshistorikkverktøy - sørg for å sjekke den regelmessig.
• Dra nytte av alle samarbeidsfunksjonene for kommunikasjon, og nå ut til designere ved å bruke kommentarer, markørchatter og mer.
• Du kan også inspisere elementer i VS Code med den nye Figma VS Code-utvidelsen. Den lar deg også gjøre mer – inkludert filnavigering, endringssporing, designersamarbeid og designimplementeringsakselerasjon – uten å forlate VS-koden.
• Hold deg oppdatert på nyere funksjoner, se hvordan de kan tjene deg best, og oppgrader ved enhver sjanse.

Omfavn utviklermodus for å strømlinjeforme arbeidsflyten din

Figma Dev Mode skal gjøre arbeidsflyten din mer effektiv, og muliggjøre bedre samarbeid mellom designer og utvikler med nødvendige funksjoner.

Det er flere deler til Figma-økosystemet, og appens popularitet betyr at den er et verdifullt verktøy du kan ta med deg fra jobb til jobb.