Från Figma till Next.js: så blir designen en snabb sajt

• Mobil- och desktopvy för varje sidtyp.
• Färger och typsnitt som variabler eller stilar — inte inmatade för hand i varje ruta.
• Komponenter för knappar, kort, formulär och navigering.
• Tillstånd: hover, fokus, fel, tomt läge och laddning.
• Riktiga texter, eller åtminstone realistisk längd.

Från design tokens till CSS

Färger, avstånd, typsnitt och radier blir tokens — namngivna värden som hela sajten använder. Ändrar ni en färg ändras den överallt. Den här sajten är byggd så: ett designsystem med tokens för färg, typografi och avstånd, och en kontroll före varje bygge som stoppar hårdkodade värden.

Komponenter, inte sidor

Vi bygger delarna först — knapp, kort, sektion — och sätter sedan ihop sidorna av dem. Det gör att nya sidor går snabbt och ser likadana ut, och att en ändring i designen bara behöver göras på ett ställe.

Pixel-perfekt eller responsivt?

Designen ritas för några skärmbredder, men besökarna har alla bredder däremellan. Målet är att sajten ser ut som designen på de ritade bredderna och beter sig rimligt överallt annars. Det är där frontend-utvecklarens bedömning behövs.

Prestanda från start

• Bilder exporteras i rätt storlek och moderna format som WebP.
• Typsnitt laddas lokalt och begränsas till de vikter som används.
• Animationer används sparsamt och påverkar inte layouten.
• Sidorna renderas i förväg så att de syns direkt och kan indexeras av Google.