Fra Figma til hjemmeside: sådan bliver designet til kode uden at miste detaljerne

Designeren har leveret 40 flotte skærme i Figma, og alle er begejstrede. Så stiller udvikleren de første spørgsmål: Hvordan ser menuen ud på mobil? Hvad sker der, når en overskrift er tre linjer lang? Hvordan ser en fejl i kontaktformularen ud? Hvilken af de fire næsten ens blå farver er den rigtige? To uger går med mails frem og tilbage, og budgettet skrider. Det er en almindelig historie, og årsagen er som regel en mangelfuld overlevering. Denne guide handler om at få designet sikkert over i kode.

Hvordan bliver et Figma-design til en hjemmeside?

Den vigtigste idé er, at en hjemmeside bygges af komponenter: en knap, et kort, en sektion med billede og tekst, en sidefod. Hver komponent bygges én gang i kode og genbruges overalt. Når Figma-filen er organiseret på samme måde, kan udvikleren oversætte den næsten direkte. Når hver skærm er tegnet for sig, skal udvikleren selv finde mønstrene og gætte, hvilke forskelle der er bevidste. Det er den største enkeltfaktor for, hvor lang tid det tager at bygge.

Hvad skal designeren levere til udvikleren?

• Alle sidetyper på mindst to bredder: mobil (ca. 375 px) og computer (ca. 1440 px), gerne også tablet.
• En komponentside med alle knapper, felter, kort og sektioner og deres varianter.
• Tilstande: hover, fokus, aktiv, deaktiveret, indlæser, fejl og tom.
• Farver, typografi og afstande som Figma-variabler med tydelige navne.
• Rigtige tekster eller realistiske længder, inklusive den længste overskrift og det korteste kort.
• Menu og navigation på mobil: åben, lukket og med undermenuer.
• Formularer med labels, hjælpetekster, fejlbeskeder og bekræftelse.
• Ikoner som SVG, billeder i høj opløsning og skrifttyper med licens til web.
• Noter om animationer og overgange: hvad bevæger sig, hvor hurtigt og hvornår.
• En prototype af de vigtigste flows, så udvikleren kan se rækkefølgen.

Det, der oftest mangler, og hvad det koster

Hvad er design tokens, og hvorfor betyder de noget?

Design tokens er de mindste designbeslutninger gemt som navngivne værdier: en farve, en skriftstørrelse, en afstand, en hjørneradius. I stedet for at skrive en farvekode 200 steder i koden bruger både Figma og koden det samme navn, fx "color.primary". Ændres den primære farve, ændres den ét sted, og hele sitet følger med. I Figma laves tokens som variabler, og de kan eksporteres til kode. Der findes også et fælles filformat, som en W3C-fællesskabsgruppe har udarbejdet, så værktøjer kan udveksle tokens. Tokens er også det, der gør mørk tilstand og flere brands mulige uden at bygge alt to gange.

Tokens er fundamentet i et designsystem. Har I kun brug for en enkelt hjemmeside, kan en lille samling tokens og en komponentside være nok. Skal flere produkter, apps og teams dele design, er det tid til et egentligt designsystem. Forskellen forklarer vi i designsystem vs styleguide.

Hvordan gør man en Figma-fil klar til udvikling?

1. Brug auto layout overalt, så elementer opfører sig som i en browser, når indholdet ændrer sig.
2. Byg alt, der går igen, som komponenter med varianter, fx knap i tre størrelser og fire tilstande.
3. Opret variabler for farver, typografi og afstande, og brug dem konsekvent.
4. Navngiv lag og komponenter med ord, en udvikler kan genbruge i koden.
5. Lav en side med "klar til udvikling" og hold arbejdsskitser på en anden side.
6. Tilføj noter direkte i filen om adfærd, der ikke kan ses: animation, validering, hvad der er klikbart.
7. Hold et kort overleveringsmøde, hvor designeren går filen igennem, og udvikleren stiller spørgsmål.

Kan AI-værktøjer lave Figma om til kode?

AI har gjort vejen fra design til kode markant kortere. Figma har selv lanceret værktøjer, der kan lave prototyper og kode ud fra designs, og der findes plugins og AI-kodeassistenter, der kan læse en Figma-fil og generere React-komponenter. Udviklere, der arbejder med Figmas Dev Mode og AI-assistenter i editoren, kan bygge en første version af en sektion på minutter. Det ændrer, hvor tiden bruges: mindre på at skrive layout-kode, mere på struktur, indhold, tilgængelighed, hastighed og de ting, designet ikke viser.

Har I allerede en side eller en app genereret med AI, og vil I vide, om den kan bruges i drift, så har vi skrevet en guide til fra AI-prototype til produktion, med de typiske huller og hvordan de lukkes.

Hvilke fejl gør vejen fra Figma til kode dyr?

• Designet godkendes, før der er tænkt på mobil.
• Hver side er tegnet for sig uden fælles komponenter.
• Udvikleren involveres først, når designet er "færdigt".
• Der er ingen aftale om designtjek, så små afvigelser hober sig op.
• Designet ændres løbende i den samme fil, mens der bygges, uden at nogen siger til.
• Skrifttyper uden weblicens eller billeder uden rettigheder.
• Ingen beslutning om CMS: hvad skal redaktører selv kunne ændre?

Hvad koster det at få bygget en hjemmeside ud fra et Figma-design?

Et regneeksempel: en rådgivningsvirksomhed med 20 medarbejdere har fået et design af en freelancer med otte sidetyper, en blog og en kontaktformular, på dansk og engelsk. Filen har komponenter og variabler, men mangler mobilmenu og fejltilstande. Udvikleren bruger en halv dag på at gennemgå filen og afklare hullerne med designeren og estimerer derefter 70–90 timer inklusive CMS og designtjek. Havde filen ikke haft komponenter, ville estimatet være tættere på 120 timer. Hos os passer en side som denne typisk i en af vores webpakker til fast pris, og hvis vi selv designer, forsvinder overleveringen helt.

Hvilken teknologi skal Figma-designet bygges i?

Valget afhænger af, hvad sitet skal kunne, og hvem der skal vedligeholde det. Et komponentbaseret framework som Next.js med React matcher Figmas komponenttankegang direkte og giver høj hastighed og fuld kontrol. WordPress er udbredt og har mange plugins, men et præcist design kræver typisk et specialbygget tema. Webflow er visuelt og godt til marketingteams, der selv vil bygge sider. Vi har sammenlignet dem i Next.js vs WordPress og Webflow vs WordPress. Uanset valget skal designet fungere på alle skærmstørrelser, og det gennemgår vi i responsivt webdesign.

Hvordan arbejder vi fra Figma til færdig hjemmeside hos Ceptiv?

Vi har design og udvikling under samme tag, så de fleste af vores projekter har slet ingen klassisk overlevering. Designeren og udvikleren arbejder i den samme Figma-fil fra første dag, tokens går direkte ind i koden, og designtjekket sker løbende. Har I et design fra en anden, gennemgår vi filen, før vi giver en pris, så I ved, hvad der mangler. Vi bygger fra bunden i Next.js og TypeScript, og I ejer både kode og data. Læs mere om vores webudvikling, eller send os jeres Figma-link og få en fast pris inden for 24 timer.