Figma til Webflow: sådan oversættes et design til en bygget side
Et Figma-design er en tegning. En Webflow-side er en bygget løsning med klasser, breakpoints, indhold og regler for, hvad der sker, når teksten er længere end i designet. Jeg designer i Figma og bygger i Webflow, så overgangen ikke er en overdragelse mellem to personer, men to dele af samme arbejde.
Fortæl om dit design · Se priser og tilvalg
- Fra
- Figma (design og komponenter)
- Til
- Webflow (klasser, CMS, breakpoints)
- Plugin
- Kan bruges, men afgør ikke kvaliteten
- Kontrol
- 320, 390 og 768 px
Hvad i Figma bliver til hvad i Webflow?
| I Figma | I Webflow | Det kræver |
|---|---|---|
| Frame med auto layout | Div med flexbox eller grid | At designet bruger auto layout konsekvent; fast placering omsættes ikke af sig selv |
| Tekst- og farvestile | Klasser og stilarter | Et navngivningssystem, så klasserne kan genbruges |
| Variabler | Variabler | Navngivne variabler; bruges pluginet, overføres de én samling og én tilstand ad gangen |
| Komponenter | Komponenter | At de bygges som komponenter, ikke kun indsættes som almindelige elementer |
| Frames til telefon og tablet | Breakpoints | En plan for, hvad der skifter, hvad der skjules, og hvor tekst brydes |
| Prototypeovergange | Interaktioner | En beslutning om, hvad der skal animeres, og om det respekterer reduceret bevægelse |
| Eksempeltekst og -billeder | CMS-felter og aktiver | Rigtigt indhold, billeder i den rette størrelse og alt-tekst |
Tabellen er forenklet. Hvert projekt har undtagelser, som afklares i designet, før der bygges.
Kan et plugin gøre det for mig?
Webflow tilbyder et officielt Figma-plugin med faner til lag, variabler og stilarter. Webflows hjælpecenter beskriver, at lag skal bruge auto layout for at kunne synkroniseres, at en komponent kun bliver en rigtig Webflow-komponent, hvis lagene synkroniseres (indsættes de direkte, bliver de almindelige elementer), og at variabler overføres én samling og én tilstand ad gangen.
Det kan spare tid, men det gør ikke siden god. Et plugin kender ikke dine indholdsregler, dine breakpoints eller hvordan en overskrift skal opføre sig, når den er tre linjer lang. Derfor vurderer jeg pr. projekt, om pluginet hjælper, og kontrollerer resultatet manuelt. Ellers bygger jeg sektionerne direkte, så klasser og komponenter følger et navngivningssystem, vi aftaler i projektet.
- Auto layout i designet gør oversættelsen meget enklere
- Komponenter kontrolleres, ikke antages
- Variabler og stilarter navngives, før de overføres
- Alt, der er importeret, gennemgås manuelt
Fra Figma-fil til live Webflow-side
Gennemgå designet
Jeg tjekker, om designet har auto layout, et konsekvent system for farver og tekst, og om der er designet for mobil og tablet. Mangler det, aftaler vi, om jeg færdiggør det.
Planlæg systemet
Farver, tekststørrelser og afstande defineres som variabler og klasser, så ændringer senere kan ske ét sted.
Byg sektioner og komponenter
Gentagne dele som navigation, kort og knapper bygges som komponenter. Sektioner bygges med flexbox og grid, ikke fast placering.
Indhold og CMS
Rigtige tekster og billeder erstatter eksemplerne. Indhold, der gentages, flyttes til CMS.
Test og justering
Jeg tester ved 320, 390 og 768 px og på bredere skærme, med længere tekster end i designet og med reduceret bevægelse slået til.
Overdragelse og træning
Du får en kort træning i at redigere indhold, og jeg dokumenterer, hvor klasser og komponenter findes.
Fire ting, der oftest går skævt, når et design bygges
Teksten er længere end i designet
Danske ord er lange. Et design med tre ord pr. knap kan knække, når teksten er «Konverteringsoptimering». Designet skal prøves med rigtigt indhold.
Mobilen tegnes til sidst
Hvis kun skrivebordsversionen er tegnet, tegnes mobilen i browseren. Det koster mere end at designe den først.
Billeder uden størrelse
Et billede på 2.500 px i et 400 px bredt felt gør siden langsom. Billeder skal have den rigtige størrelse, før de bygges ind.
Animation uden plan
Prototypens overgange omsættes ikke af sig selv. Vi beslutter, hvad der er nødvendigt, og hvordan det opfører sig for dem, der har slået bevægelse fra.
Hvad koster det at bygge et Figma-design i Webflow?
Grundprisen omfatter design og udvikling. Har du allerede et færdigt design, kan prisen blive lavere; kræver designet avancerede effekter, bliver den højere.
1–3 sider
fra 3.495 kr. ekskl. moms
Fx en enkel virksomheds- eller landingsside med forside, ydelser og kontakt.
4–8 sider
fra 9.495 kr. ekskl. moms
En fuld virksomhedsside med flere ydelser, om-side og kontakt.
9–15 sider
fra 17.495 kr. ekskl. moms
Større hjemmesider med mange ydelser, flere målgrupper eller indhold.
Justeringer efter dit design
- Eksisterende visuel identitet: fradrag på 500 kr., 850 kr. eller 1.350 kr. ekskl. moms efter sidetal
- Avanceret design og animationer: tillæg på 3.500 kr., 6.000 kr. eller 9.000 kr. ekskl. moms
- CMS og blog: 2.500 kr. ekskl. moms
Alle priser er vejledende fra-priser ekskl. moms (25 %) og ikke et bindende tilbud. Du får en fast pris, tidsplan og plan, før vi aftaler et projekt.
Spørgsmål om Figma til Webflow
Kan du bygge et design, en anden har lavet i Figma?
Ja, efter en gennemgang. Er designet uden auto layout eller uden mobilversioner, aftaler vi, om det skal færdiggøres først. Det afklares, før der gives en fast pris.
Bliver siden præcis som designet?
På de skærmbredder, der er designet, ja. Mellem dem findes der flere tilfælde, og dem aftaler vi regler for. Indhold, der er længere end eksemplerne, kan ændre linjebrud.
Kan jeg få ændringer i designet, efter at det er bygget?
Ja, men det er billigst at rette i designet, før det bygges. Ændringer efter byggeriet er en ny opgave, hvis de ændrer strukturen.
Skal jeg selv eje Figma-filen?
Det aftales i tilbuddet. Hvis jeg har designet, kan du få filen overdraget; en eventuel licens til Figma betales af den, der bruger programmet.
Hvad koster at bygge et Figma-design i Webflow?
Hjemmesider starter fra 3.495 kr. ekskl. moms for op til tre sider, fra 9.495 kr. for 4–8 sider og fra 17.495 kr. for 9–15 sider. Har du allerede en visuel identitet, giver det et fradrag; avancerede effekter giver et tillæg. Du kan selv prøve det af i prisberegneren, og du får altid en fast pris, før vi går i gang.
Design, Webflow og pris
- Webflow CMS – Hvordan indhold, der gentages, bliver redigerbart.
- Webflow-animationer – Når et prototypeforløb skal blive til animation – og hvordan det gøres ansvarligt.
- Webdesigner i Hellerup – Samarbejdet, når design og udvikling er hos samme person.
- Case: Tand i Søborg – Et bygget Webflow-projekt med fokus på struktur.
- Prisberegner – Beregn et vejledende estimat, med eller uden eksisterende identitet.
Har du et design, der skal bygges?
Send Figma-linket eller en beskrivelse. Jeg tjekker, hvor det er klar til bygning, og hvad der skal afklares først.
Direkte til mig: +45 20 71 02 89 · ow@oscarwinther.dk