Fra design i Figma til live website i Framer
Overgangen fra et færdigt design i Figma til et live website kan føles som et hop over en kløft. Det, der ser skarpt ud i en prototype, ender nogle gange med at blive “næsten rigtigt” i build, fordi spacing, typografi, komponenter og responsivitet ikke oversættes én til én.
Når workflowet sidder, bliver Figma og Framer et stærkt makkerpar: Figma som stedet, hvor I tænker, tester og systematiserer, og Framer som stedet, hvor I bygger, finjusterer og går live uden at miste tempo eller kvalitet.
Hvorfor Figma og Framer passer godt sammen
Det gode workflow handler ikke om at vælge ét værktøj, men om at give hvert værktøj en tydelig rolle. Figma er oplagt til struktur, designlogik og beslutninger tidligt. Framer er oplagt til at få det ud at leve i browseren, med rigtige breakpoints, interaktioner og publicering.
Når man fordeler ansvaret rigtigt, bliver processen mere forudsigelig, og man undgår den klassiske “handoff-friktion”, hvor ting forsvinder i oversættelsen.
Figma: Flows, wireframes, komponenter, variants, designprincipper og retning
Framer: Produktion, responsiv opsætning, CMS, microinteraktioner, performance og deployment
Start rigtigt i Figma, så importen bliver let
Import fra Figma til Framer fungerer bedst, når Figma-filen er bygget med en vis disciplin. Ikke fordi alt skal være stramt og “korrekt”, men fordi et klart system giver færre overraskelser, når elementer bliver til byggesten i Framer.
Tænk især i gentagelser: Hvilke sektioner går igen på tværs af sider? Hvilke spacing-mønstre bruger I? Og hvilke UI-elementer skal kunne skifte tilstand (normal, hover, disabled) uden at I tegner dem igen og igen?
En enkel måde at gøre det på er at låse et par grundregler fast tidligt, så hele teamet designer med samme “lineal”. Mange arbejder med faste spacing-skalaer og guider pr. breakpoint, så afstande mellem sektioner og komponenter bliver konsistente fra start.
Faste spacing-trin (fx 8, 16, 24, 40, 64)
Typografiskala med få størrelser og klare linjehøjder
Komponenter til knapper, cards, inputfelter og navigation
Navngivning, der giver mening i build (Hero, Features, CTA, Footer)
Overførsel: fra Figma frames til Framer canvas
Selve overførslen kan gøres på flere måder, men den mest direkte er Framer’s officielle Figma-plugin (“Figma to HTML with Framer”) kombineret med copy/paste. I praksis vælger du relevante frames eller lag i Figma og indsætter dem i Framer, hvor lagstruktur og størrelser typisk bevares pænt.
Det er en stor tidsbesparelse, men importen er sjældent “tryk på en knap og alt er færdigt”. Se importen som en genvej til layout og visuelle elementer, ikke som en garanti for responsiv logik, interaktioner og genbrugelige komponenter.
Hvad plejer at overføre godt?
Tekstlag, simple vektorer, billeder og grundlayout. Det giver et solidt udgangspunkt, så du ikke starter med et tomt canvas.
Hvad kræver næsten altid efterarbejde?
Responsiv opsætning (stacks, constraints), states (hover/active), komponentisering og CMS-binding. Hvis du importerer et helt site “som ét stort design”, ender du ofte med meget manuelt arbejde bagefter. Importér hellere sektioner og byggesten, som du alligevel vil gøre genbrugelige.
Byg et lille designsystem i Framer før du bygger alle sider
Et praktisk greb er at bygge et minimalt designsystem i Framer tidligt. Ikke et stort bibliotek med alt, men de ting der sætter retning: typografi, farver, knapper, spacing og de mest brugte sektioner.
Det er også her, mange får den største forretningsmæssige effekt: Når ændringer i fx knapstil, farver eller radius kan slås igennem på hele sitet via tokens og komponenter, bliver iterationer billigere. Det giver plads til flere forbedringer og mindre vedligehold.
Hos Studio Echo ser man ofte, at kombinationen af et klart fundament i Figma og et letvægts-designsystem i Framer giver et markant hurtigere build, især på corporate sites, kampagnesider og nye produkter, hvor tempo og læring betyder meget.
Område | Figma (beslutning og retning) | Framer (produktion og drift) |
|---|---|---|
Designprincipper | Typografi, farver, spacing-skala, grids | Tokens og globale styles, så ændringer kan skaleres |
Komponenter | UI-komponenter og variants, klare regler | Reelle komponenter til site, states og genbrug på tværs |
Sidestruktur | Informationsarkitektur, sidetyper, flow | Implementering af navigation, layout og responsivitet |
Indhold | Copy-udkast, billedretning, hierarki | CMS collections, content editing, publicering |
Kvalitet | Feedback på prototype og hierarki | Browser-test, performance, accessibility og SEO-setup |
Responsivitet og microinteraktioner: her vinder Framer
En typisk udfordring ved handoff er, at responsiv adfærd bliver “gættet” ud fra statiske artboards. Framer gør det lettere at arbejde direkte med layout, der faktisk skal fungere på tværs af skærme.
I stedet for at du designer tre skærme og håber på det bedste, kan du bygge komponenter, der tilpasser sig med stacks, constraints og breakpoints. Det gør især en forskel på sektioner med cards, logo-rækker, navigation og CTA-blokke, hvor små ændringer i copy ellers kan vælte layoutet.
Microinteraktioner er en anden styrke. I Framer kan du arbejde med hover-states, scroll-effekter og enkle animationer, uden at det bliver et separat udviklingsspor. Det betyder, at “det, brugeren mærker”, kan blive en integreret del af designet, ikke en eftertanke.
Samarbejde uden klassisk handoff
Når Figma og Framer bruges sammen, ændrer rollefordelingen sig ofte en smule. Design bliver ikke kun et dokument, der afleveres, men et system, der bliver til et produkt i samme flow.
Figma er stadig et stærkt samarbejdsværktøj tidligt: kommentarer, prototyper og hurtige afklaringer med stakeholders. Men Framer kan tage samarbejdet videre, fordi ændringer kan ses i en live preview, og indhold kan redigeres tættere på virkeligheden.
For mange teams betyder det, at marketing eller indholdsansvarlige kan få mere kontrol over daglige rettelser, mens design og udvikling fokuserer på struktur, kvalitet og de ting, der rykker på konvertering og klarhed.
Typiske faldgruber og hvordan du undgår dem
Selv med et godt workflow kan der opstå problemer. De fleste handler ikke om værktøjerne, men om manglende systematik eller for sen kvalitetssikring.
Når du kender de typiske faldgruber, kan du bygge en lille proces, der fanger dem tidligt, mens det stadig er billigt at rette.
Uens komponenter: Standardisér knapper, cards og formularer før du bygger 10 sider
Import som “fladt design”: Komponentisér de vigtigste sektioner i Framer med det samme
Manglende redirects: Lav en URL-liste og planlæg 301, så SEO og gamle links ikke knækker
Glemt tracking: Tjek analytics, events og pixel-setup før go-live, ikke efter
SEO-detaljer: Sikr titles, meta descriptions, headings og alt-tekster i produktionen
QA for sent: Test på mobil, tablet og desktop løbende, især navigation og formularflows
QA, staging og go-live uden stress
En praktisk go-live handler om at gøre det let at teste og let at rulle tilbage. Framer har versionering og publicering, som gør det realistisk at arbejde i mindre “releases” i stedet for én stor, risikabel lancering.
En god rytme er at have faste checkpoints: preview internt, test med udvalgte stakeholders, og en kort runde hvor I tjekker de vigtigste flows. Det lyder banalt, men det er her mange sites taber unødigt: kontaktformularer der ikke virker, mobilmenuer der overlapper, eller billeder der er uploadet i forkert format.
Hvis der er tale om en migrering fra et eksisterende site, bliver det ekstra vigtigt at have styr på URL’er, redirects og Search Console. Ikke som et stort projekt i sig selv, men som en enkel liste, I krydser af.
Hvordan måler man, om workflowet virker?
Effektivitet er mere end “hurtigt”. Et stærkt Figma til Framer workflow kan måles på både tempo og kvalitet.
Tempo kan være tid til første version, tid mellem iterationer og hvor ofte I kan udgive forbedringer uden at alt går i stå. Kvalitet kan være færre fejl efter lancering, bedre performance og mere ensartet UI, fordi komponenter og tokens holder linjen.
Mange teams oplever, at første version af et corporate site kan nås på få uger med Framer, hvor en klassisk opsætning ofte tager væsentligt længere. Den store forskel i praksis er ikke kun byggetiden, men at feedback og ændringer kan ske tættere på det færdige resultat, så der er færre runder med “det var ikke sådan vi mente”.
Hvis du vil gøre det målbart, så vælg 3-4 indikatorer, I faktisk kan følge måned for måned: release-frekvens, top-issues fra QA, page speed og en eller to konverteringsmålinger (fx demo-booking eller signups). Når workflowet spiller, bliver det nemmere at prioritere forbedringer, fordi I kan bygge og udgive uden at starte forfra hver gang.
Få hjælp til at gøre din overgang fra Figma til Framer endnu mere effektiv. Kontakt os for sparring, tips eller et uforpligtende møde om jeres næste projekt.
