Figma

Figma er et digitalt designværktøj til blandt andet brugerflader, websites, apps, prototyper og designsystemer. Det bruges i browseren og via desktop-apps og er bygget omkring, at flere personer kan arbejde i og kommentere den samme designfil. Figma er ikke et CMS og heller ikke en page builder, der automatisk bliver til en færdig hjemmeside. Det er først og fremmest et sted, hvor designet kan udvikles, afprøves og beskrives, før eller mens det bliver omsat til kode.

På en webopgave kan Figma ligge mellem det tidlige wireframe og den færdige løsning. Et wireframe viser typisk struktur og prioritering uden at låse alle visuelle valg. I Figma kan det udvikles videre til et mere detaljeret design med farver, typografi, billeder, knapper og konkrete skærmstørrelser. Når udtrykket er tæt på det færdige resultat, fungerer filen som et digitalt mockup og som reference for udvikleren.

En vigtig forskel fra almindelige tegneprogrammer er, at Figma er bygget til grænseflader og systematik. Et design kan bestå af frames, komponenter, instanser, styles og variable værdier i stedet for hundredvis af løsrevne objekter. En knap behøver eksempelvis ikke tegnes på ny på hver side. Den kan oprettes som en komponent, og de enkelte kopier kan være instanser, der fortsat hænger sammen med hovedkomponenten.

Figma beskriver komponenter som genbrugelige designelementer. En hovedkomponent definerer grundlaget, mens instanser kan bruges rundt omkring i designet og modtage ændringer fra hovedkomponenten. Det er en central tanke i et designsystem: ens elementer skal ikke bare ligne hinanden ved et tilfælde, men være styret af fælles regler.

Auto layout er en anden vigtig funktion. Den hjælper med at styre retning, afstand, justering og hvordan indhold vokser eller krymper i en frame. Det gør det lettere at designe komponenter, der kan håndtere forskellige tekstlængder og skærmstørrelser. Auto layout er dog ikke det samme som færdig responsiv kode. Designeren kan beskrive en fleksibel adfærd, men udvikleren skal stadig implementere den korrekt i browseren.

Figma har også variables, som kan gemme genbrugelige værdier som farver, tal, tekst og boolean-værdier. De kan bruges til eksempelvis design tokens, spacing eller forskellige modes. Det gør det muligt at arbejde mere systematisk med lyse og mørke temaer, brands eller andre kontekster uden at kopiere hele designet.

Det er derfor mest nyttigt at se Figma som fælles arbejdsrum mellem design, kunde og udvikling. Her kan man blive enige om hierarki, visuel retning og genbrugelige mønstre, før de dyre ændringer ligger spredt ud over et færdigt website.

Start ikke med at tegne 30 undersider. Begynd med de vigtigste skærme og de elementer, der går igen. På en virksomhedshjemmeside vil det ofte være header, navigation, knapper, formularfelter, cards, CTA-sektioner og en standard for typografi og afstande. Når de grundlæggende dele sidder rigtigt, bliver resten hurtigere og mere konsistent.

En praktisk arbejdsgang kan være:

1. Lav først struktur og indholdsprioritering i wireframes.
2. Fastlæg farver, fonte, spacing og andre fælles værdier.
3. Byg gentagne UI-elementer som komponenter i stedet for kopier.
4. Brug auto layout, hvor elementer skal kunne vokse, krympe eller ændre retning.
5. Lav de vigtigste skærmstørrelser og afklar, hvad der faktisk ændrer sig på mobil.
6. Brug prototyper til at demonstrere centrale flows, ikke til at simulere hver eneste detalje.
7. Marker de relevante designs klar til udvikling og gennemgå dem sammen med udvikleren.

Det er især komponenterne, der skiller en ryddelig fil fra en bunke skærmbilleder. Hvis seks forskellige sider bruger samme knap, bør knappen som udgangspunkt have samme grundstruktur. Figma kan stadig give mulighed for tekstændringer, ikonskift eller forskellige varianter, men det bør være tydeligt, hvad der er en kontrolleret variation, og hvad der bare er en tilfældig lokal ændring.

Variables kan bruges til fælles værdier, men de skal ikke indføres for kompleksitetens skyld. En mindre hjemmeside har ikke nødvendigvis brug for et enterprise-lignende token-system. Til gengæld kan det være fornuftigt at samle primære farver, tekstfarver, afstande og andre værdier, som bruges mange steder. Hvis farven ændres senere, er det langt lettere at ændre en fælles værdi end at finde 70 manuelle fills.

Ved design af en ny hjemmeside bør Figma-filen også indeholde realistisk indhold. En hero med overskriften “Lorem ipsum” fortæller meget lidt om, hvordan layoutet reagerer på virksomhedens rigtige budskab. Brug de faktiske eller realistiske overskrifter, menupunkter og CTA'er så tidligt som muligt. Det afslører hurtigt, om designet kun fungerer med korte engelske eksempeltekster.

Prototyping er nyttigt, når et flow er vigtigt at forstå. En menu kan åbnes, en formular kan gå gennem flere trin, eller en mobilnavigation kan demonstreres. Men prototypen skal bruges til at afklare adfærd. Den behøver ikke være et skuespil, hvor hvert link på hele hjemmesiden er simuleret, hvis udvikleren alligevel skal bygge strukturen bagefter.

Figma har en særlig Dev Mode til overlevering og inspektion. Den gør det lettere for udviklere at navigere i design, se mål, egenskaber og assets og finde de dele, der er markeret som klar til udvikling. Det ændrer ikke på behovet for dialog. En afstand på 24 pixels fortæller ikke nødvendigvis, hvorfor afstanden er 24, eller hvad der skal ske, når indholdet bliver dobbelt så langt.

På større projekter bør filen organiseres med tydelige navne og sider. “Frame 1837 copy 4 final-final” hjælper ingen. Navngiv sektioner og komponenter efter funktion, så en anden person kan forstå filen. Det er samme princip, som gælder i et godt UI: struktur skal være genkendelig, ikke kun kendt af den person, der lavede den.

Hvis design og udvikling skal hænge tæt sammen, kan et webbureau bruge Figma til at få kundens godkendelse af retningen, inden alt er kodet. Det gør ændringer billigere. Det er hurtigere at flytte en sektion i designfasen end at ombygge komponenter, templates og responsive regler efter lancering.

Forestil dig en rådgivningsvirksomhed, der skal have ny hjemmeside. Den gamle side har 40 undersider, men de fleste bruger i praksis de samme seks typer indholdssektioner. Hvis designeren tegner alle 40 sider manuelt fra bunden, vil små forskelle hurtigt snige sig ind: forskellige hjørner på knapper, forskellige afstande og flere næsten ens korttyper.

I stedet bygges først en lille komponentbank i Figma. Der laves standarder for knapper, formularfelter, medarbejdercards, cases og CTA'er. En oversigtsside og to typiske indholdssider bygges med de samme komponenter. Kunden kan nu se et realistisk design, mens udvikleren samtidig kan vurdere, om komponenterne giver mening i den kommende WordPress-løsning.

Virksomheden opdager under gennemgangen, at CTA'en “Kontakt os” ikke er præcis nok på de faglige sider. I stedet laves en variant, hvor overskriften og knapteksten kan ændres, mens spacing, typografi og grundform er fælles. Det er en reel variation. Det er bedre end at kopiere hele sektionen 20 gange.

På mobil viser auto layout, at en kort overskrift fungerer fint, men en længere dansk overskrift presser knappen ned på tre linjer. Problemet bliver opdaget i designet, før der er skrevet CSS. Løsningen bliver ikke bare mindre tekst. Typografien, kortets bredde og knapstrukturen justeres, så systemet også kan håndtere realistisk indhold.

Et tænkt regneeksempel: Hvis seks genbrugelige komponenter findes på 25 skærme, er der 150 forekomster. En ændring i hovedkomponenten kan opdatere instanserne, mens 150 løse kopier kræver langt mere kontrol. Det betyder ikke, at alle ændringer altid skal være globale, men det viser, hvorfor systematik bliver vigtig, når projektet vokser.

Før udviklingen starter, gennemgås hovedskærmene sammen. De relevante frames markeres som klar til udvikling, og udvikleren kan bruge Dev Mode som reference. Samtidig aftales de steder, hvor designet ikke kan beskrives fuldt ud med en statisk frame, eksempelvis sticky header, hover, validering og dynamiske data.

Det giver også et bedre grundlag for UX. Designet bliver ikke kun vurderet på, om det ser flot ud i 1440 pixels. Det bliver vurderet på flow, læsbarhed, handlinger og hvad brugeren skal kunne gøre. Vi beskriver samme fokus i guiden om at skabe en brugervenlig hjemmeside, der fører til flere henvendelser.

Den mest almindelige faldgrube er at tro, at præcision i designfilen automatisk giver præcision i browseren. Figma arbejder i et kontrolleret lærred. En hjemmeside skal håndtere browsere, forskellige skriftrenderinger, dynamisk indhold, formularfejl, brugerens zoom og skærme, der ikke svarer til designerens frames. Designet skal derfor beskrive principper, ikke kun koordinater.

En anden fejl er at bygge komponenter uden en plan. Hvis alt bliver gjort til en komponent, og hver komponent har 20 varianter, kan filen blive vanskeligere at arbejde i end et almindeligt layout. Genbrug dér, hvor der faktisk er et fælles mønster. Lad lokale elementer være lokale, når de kun findes ét sted.

Pas også på med at bruge prototyper som godkendelse af funktionalitet. En klikbar prototype kan få noget til at se færdigt ud, selv om der endnu ikke er taget stilling til datakilder, søgning, formularbehandling, tilgængelighed eller performance. Den viser oplevelsen, ikke hele den tekniske løsning.

En fjerde faldgrube er at designe med tilfældige placeholder-data. En perfekt produktcard med “Produktnavn” kan falde fra hinanden, når det rigtige produkt hedder “Ekstra kraftig industristøvsuger til våd- og tørstøvsugning”. Test tidligt med lange ord, manglende billeder og de kanttilfælde, som den færdige løsning faktisk får.

Endelig kan en Figma-fil blive en blindgyde, hvis kunden ikke har adgang eller ejerskab. Aftal, hvor filerne ligger, hvem der ejer teamet, og hvordan de deles. Designgrundlaget bør kunne overdrages lige så ordentligt som den færdige hjemmeside.

Figma udvikles løbende, og konkrete menupunkter og funktioner kan ændre placering. Principperne er mere holdbare end brugerfladen: komponenter skaber genbrug, auto layout beskriver fleksibel placering, variables samler værdier, og Dev Mode hjælper med overlevering til udvikling.

Figma kan eksportere grafiske assets, men eksport bør ikke ske ukritisk. Et ikon kan eksempelvis eksporteres som SVG, mens et foto normalt hører hjemme i et rasterformat. Det rigtige format afhænger af indholdet og hvordan det skal bruges på websitet.

Hvis et design senere ændres i WordPress, bør Figma-filen ikke nødvendigvis være et museum, der altid opdateres pixel for pixel. Aftal hvad der er source of truth. På et aktivt produkt kan designsystem og kode leve tæt sammen. På en mindre virksomhedshjemmeside kan Figma primært være projektets designgrundlag og dokumentation.

Den største værdi kommer, når designet bliver brugt til at træffe beslutninger tidligt. En professionel designproces handler ikke om at få flest mulige frames, men om at få de vigtige spørgsmål frem, mens de stadig er billige at ændre.