Horizen
JohanneJohanne·
Dev · Workflow|10. januar 2026

Fra Figma til kode: Vores workflow

Fra Figma til kode: Vores workflow

At gå fra et smukt Figma-design til en produktionsklar hjemmeside er en kunst i sig selv. Hos Horizen har vi finpudset vores workflow over mange projekter — og resultatet er en proces der er hurtig, forudsigelig og leverer pixel-perfekte resultater.

Vores tech stack

Vi har valgt en moderne stack der prioriterer developer experience og slutbrugerens performance lige højt:

Next.jsReactTypeScriptTailwind CSSFramer MotionVercelFigmaGitHub

Processen, trin for trin

🎨

Design i Figma

Alt starter i Figma. Vi designer med Auto Layout, komponent-varianter og Design Tokens — så designet er struktureret fra dag ét og klar til at blive oversat til kode.

📐

Design Review & Handoff

Før en eneste linje kode skrives, gennemgår vi designet sammen. Vi sikrer at spacing, typografi og farver er konsistente og mappes direkte til Tailwind utility-klasser.

Komponent-udvikling

Vi bygger atomare komponenter først — knapper, inputs, badges. Derefter sammensætter vi dem til komplekse sektioner. Hver komponent er isoleret, testbar og genbrugelig.

🔄

Iteration & Feedback

Med preview-deploys på Vercel kan kunden se fremskridtet i realtid. Feedback integreres løbende — ikke som en eftertanke i slutningen af projektet.

🚀

Launch & Optimering

Vi launcher ikke bare og går videre. Performance-audit, SEO-check og tilgængeligheds-test er standard. Først når alt er grønt, er vi tilfredse.

“God kode er usynlig — den bare virker. Det er det vi stræber efter i hvert eneste projekt.”

— Johanne, Web Developer hos Horizen

Resultatet

Med denne workflow leverer vi typisk en komplet hjemmeside på 3-5 uger — fra første design-møde til lancering. Og fordi alt er bygget med moderne teknologier, er vedligeholdelse og videreudvikling både hurtigere og billigere.

Mere fra Horizen