Figma’s Dev Mode har til formål at hjælpe udviklere med at konvertere design til kode, som kan bruges i digitale løsninger. Ved at aktivere Dev Mode i Figma’s design filer, kan man nemmere finde detaljer, der er relevante for opbygningen af Frontenden. Værktøjet minder om en browser inspector for designfiler, hvor udviklere kan klikke sig rundt på forskellige elementer i et design og få målforhold og styling outputtet som eksempelvis CSS og XML kode.
Men hvor god er den kode som Figma outputter? Kan værktøjet være med til at optimere vores arbejdsgange og gøre det hurtigere at kode designs? Det kigger vi nærmere på i denne artikel.
Hvad kan Figma Dev Mode?
Som forklaret ovenfor, er Figma Dev Mode et værktøj til udviklere, som gør det nemmere at finde relevante informationer om elementerne i et design og konvertere designet til kode, der kan indsættes direkte i kildekoden.
Koden som Figma outputter er blevet langt bedre end den var tidligere, men selvom Figma gør det muligt at kopiere al kode med et enkelt klik, er det ikke anbefalelsesværdigt indsætte det i sin kodefil, uden en grundig gennemgang.
Der er nogle gentagne problematikker ved koden fra Figma Dev Mode, som desværre vil resultere i en kildekode, der er mindre pålidelig og vil indeholde kode af lav kvalitet. Det er som udgangspunkt den kode, der bliver outputtet under “Layout”, som du bør være mest kritisk over for. Det lader til, at Figma er meget glade for Flexbox og de mener tydeligvis, at det skal bruges alle steder - også steder, hvor det ikke giver mening. Derudover definerer Figma en width og en height i stort set alle elementer, hvilket har en negativ effekt for et responsivt website.
Tilgengæld kan koden under “Style” og “Typography” være rigtig god at have. Her outputter Figma bl.a. farver, fonte og størrelser samt andre style-properties, der kan implementeres med det samme. Derudover angiver outputtet både border-radius og box-shadow, så man ikke selv skal gætte sig til, hvor runde hjørnerne er på et element, eller hvor meget skygge elementet skal have. Den hjælper dig også til at vælge de rigtige transform-properties og værdier på elementer, der har anderledes dimensioner eller placeringer.
Udover at skrive kode, har Dev Mode andre fordelagtige features som bl.a. muligheden for konvertere alle måleenheder fra px til rem, og muligheden for at downloade alle assets fra et design i det fortrukne filformat.
Nedenfor har vi udvalgt nogle af de fedeste features fra Dev Mode, som gør Figma Dev Mode til et værdifuldt værktøj for udviklere, og som vil være med til at lette vores interne arbejdsgange her hos Peytz.
Variabler:
Som frontend udvikler hos Peytz, vil man som regel kode styling i SCSS. Vi plejer som regel at oprette en fil med globale variabler, der bruges adskillige gange i designet. Filen indeholder alt fra typografier og spacing til farver og breakpoints. Det er smart, fordi det betyder, at vi kun skal justere ét sted, hvis der skulle komme en ændring til en af variablerne. Det kan eksempelvis være ændringer i designets farvepalette eller en ny font, der skal implementeres.
Tidligere skulle en udvikler gennemgå hele designet og finde de forskellige variabler, der skulle oprettes i filen. Når en udvikler så skulle kode et element med f.eks. en baggrundsfarve angivet med HEX-kode, skulle udvikleren finde den variabel, der outputter den angivne HEX-kode og anvende den variabel i stedet for at skrive HEX-koden direkte på elementet. Denne proces har Figma nu gjort hurtigere. Nu kan designerne oprette variabler direkte i deres designfiler, så koden Dev Mode outputter ligner den kode, vi selv ville skrive. Hvis udviklerne opretter deres variabler med samme variabel-navne som designerne, kan udviklerne nemmere copy/paste kodeforslagene fra Figma direkte ind i kodefilerne.
Sammenlign ændringer:
I Dev Mode kan man sammenligne sider og komponenters ændringer med tidligere versioner. Det kan være rigtig værdifuldt, når man arbejder med redesign-projekter.
Når vi arbejder med redesigns modtager udviklerne ofte en designfil, og så er det op til udvikleren at sammenligne den nuværende løsning med det nye design, og derefter implementere ændringerne. Der kan nemt ske fejl i den process, eller ændringer kan blive overset. Heldigvis kan Dev Mode nu hjælpe med at sammenligne to versioner og udpege alle ændringer, der er lavet.
Udforsk komponenter og deres varianter:
Vi udvikler ofte design-systemer baseret på atomic design som bl.a. handler om at udvikle genanvendelige komponenter. Det betyder, at når en udvikler ser et komponent i et design, f.eks en knap til en forside, er det nødvendigt for udvikleren at vide så meget som muligt om den knap, inden den bliver kodet. Det kan nemlig være, at den knap også skal bruges på andre sider eller i elementer, hvor den har en anden form, farve eller med/uden et ikon. Sådan nogle ting er godt at vide på forhånd, når man udvikler koden, så man ikke risikerer at skulle omskrive den senere hen, for at få den tilpasset til en anden variant.
Når en designer udvikler et komponent med forskellige variabler, kan udviklere bruge Dev Modes “Component Playground” til at se de forskellige variabler, og teste hvordan et komponente skal agere ud fra forskellige scenarier. Hvis vi bruger knappen som eksempel igen, kan jeg man via Playground se, hvordan knappen skal se ud med hover effekt, hvor ikonet skal placeres i forhold til teksten, hvilke forskellige størrelses-varianter komponentet skal bruges i, og man kan teste hvordan knappen skal håndtere en meget lang tekst eller det modsatte. På den måde får man en masse informationer om komponentet på én gang.
Figma for VS Code:
Den største WOW faktor er nok Figmas nye extension til Visual Studio Code: Figma for VS Code. Den gør det muligt at åbne figma-filer i Dev Mode direkte fra code editoren. Det betyder, at man via editor nu kan have kode-fil og design-fil åben på samme tid og lige ved siden af hinanden. Dermed kan komponenter undersøges i designfilen helt uden at skulle forlade VS Code. Og hvad der er endnu mere WOW er, at VS Code kan autoudfylde kodeforslag fra Figma direkte i SCSS filen, så man med få taster kan skrive flere linjer kode.
Det er slut med at copy/paste kode fra Figma. Nu behøver jeg blot at skrive for-bogstaverne på propertys og klikke enter når min editor kommer med Figmas forslag.
Konklusion:
Overordnet set er vi ret er imponeret over Figma Dev Mode, som indtil videre kun findes i Beta udgave. Den kommer med flere smarte features, der kan gøre udvikling nemmere, og som helt sikkert vil være med til at mindske den tid, som udviklere og designere bruger på at tale frem og tilbage. Som udvikler behøver man ikke længere bede designerne om at dele assets, eller vente på at en kollega kan konvertere filer til det format, der skal anvendes - alt det håndterer Figma. Det er heller ikke længere nødvendigt at gætte sig til størrelsesforhold, effekter og komponentvarianter. Alt det som designeren allerede har taget stilling til, bliver af Figma oversat til kodesprog.
Det skal dog nævnes, at det kræver en struktureret Figma designfil at få det fulde udbytte af Dev Mode. Designerne skal udvikle et struktureret design og bruge tid på at definere alle detaljer. Og det bør derfor vurderes fra projekt til projekt, om den tid det tager designerne at lave en detaljeret og struktureret Figma fil opsætning, kan betale sig i sidste ende.
Selvom vi er imponeret, er der dog ingen risiko for at Figma overtager jobbet som frontend udvikler. Figma outputter noget fin kode man kan lade sig inspirere af, men skal du have en kvalitetssikret kode, er det ikke alle forslag fra Dev Mode, du bør implementere. Jo mere kompliceret design, jo sværere er det for Figma at outputte brugbar kode.
Det næste vi skal kigge ind i, er det plugin man kan få til Figma der hedder Figma to Code. Med dette plugin konverterer Figma komponenter til HTML, Tailwind eller React(JSX) kode.
Selvom koden blot kan bruges som inspiration, er det altid rart at have et udgangspunkt eller få en idé til, hvordan designet kan implementeres.
Publiceret 11. august 2023