Figma → Aksel-kode

Bruk denne skillen når du har en Figma-lenke eller Figma-referanse og skal implementere designet i Nav-frontend med @navikt/ds-react. Skillen forutsetter at Figma MCP-verktøy er tilgjengelig.

Aksel-dokumentasjon

Hent komponent-API, tokens og props fra live dokumentasjon:

https://aksel.nav.no/llm.md

Mapping-tabellene nedenfor er en hurtigreferanse. Ved tvil — hent fra kilden.

Arbeidsflyt

1. Hent designkontekst

Hent struktur, hierarki og visuell intensjon fra Figma-noden via MCP-verktøyene.

2. Hent variabler

Finn spacing-, farge- og typografivariabler som er brukt i designet.

3. Sjekk Code Connect

Sjekk om Figma-noder allerede er koblet til @navikt/ds-react-komponenter. Når en mapping finnes — bruk den direkte.

4. Mapp til Aksel

Oversett Figma-strukturen til Aksel-komponenter og tokens (se mapping-tabellene nedenfor). Verifiser komponent-API mot aksel.nav.no/llm.md. Se også aksel-design-skillen.

5. Implementer

Bygg med Aksel-primitives. Aldri generisk HTML for elementer Aksel dekker.

6. Visuell verifisering

Sammenlign resultatet med Figma-originalen. Sjekk spacing, farger, typografi og responsiv oppførsel.

Figma → Aksel mapping

Layout: Auto Layout → Layout-primitives

// ❌ Feil — rå HTML med inline styles fra Figma
<div style={{ display: "flex", flexDirection: "column", gap: "24px", padding: "32px" }}>
  <div style={{ display: "flex", gap: "12px" }}>
    <button>Avbryt</button>
    <button>Lagre</button>
  </div>
</div>

// ✅ Riktig — Aksel-primitives med tokens
<Box padding="space-32">
  <VStack gap="space-24">
    <HStack gap="space-12" justify="end">
      <Button variant="secondary">Avbryt</Button>
      <Button>Lagre</Button>
    </HStack>
  </VStack>
</Box>

Spacing: Figma-variabler → space-* tokens

I v8 er token-navnet pikselbasert: spacing/24 i Figma → space-24. Fullstendig skala i aksel-design-skillens tokens.md.

Farger: Figma-variabler → Aksel semantiske farger

Figma bruker Navs felles fargebibliotek med semantiske variabelnavn. Mapp til Aksel:

Bruk data-color for fargeoverrides i spesielle kontekster. Aldri hardkod hex-verdier.

// ❌ Feil — hardkodet farge fra Figma
<div style={{ backgroundColor: "#E6F0FF", border: "1px solid #0067C5" }}>

// ✅ Riktig — Aksel semantisk farge
<Box background="accent-soft" borderColor="accent" borderWidth="1">

Komponenter

For komponentmapping, hent fra aksel.nav.no/llm.md og sjekk Code Connect-mapping først. Bruk data-color="danger" i stedet for variant danger på Button. Alert er deprecated — bruk LocalAlert, GlobalAlert, InlineMessage eller InfoCard.

Code Connect

Code Connect kobler Figma-noder direkte til @navikt/ds-react-komponenter. Når MCP-verktøyene returnerer en Code Connect-mapping for en node, bruker du den eksakte komponenten som er spesifisert.

Sjekk alltid om mappingen allerede finnes før du oppretter en ny. For oppsett og publisering, se Figma Code Connect-docs.

Responsiv mapping

Figma viser ofte kun én breakpoint. Sjekk om det finnes flere frames for mobil/desktop. Mapp til responsive props (columns={{ xs: 1, md: 3 }}, gap={{ xs: "space-16", md: "space-24" }}, padding={{ xs: "space-16", md: "space-32" }}). Se aksel-design-skillens patterns.md for fullstendige eksempler.

Boundaries

✅ Alltid

• Mapp Figma-variabler til Aksel-tokens — aldri hardkod pikselverdier eller hex-farger
• Bruk Aksel-komponenter når Figma-elementet har en @navikt/ds-react-ekvivalent
• Sjekk Code Connect-mapping før manuell komponent-matching
• Bruk aksel-design-skillen for å verifisere komponent-API og props

⚠️ Spør først

• Designelementer uten tydelig Aksel-ekvivalent — avklar med designer/team
• Avvik mellom Figma-design og eksisterende UI-mønstre i repoet
• Nye spacing-verdier som ikke finnes i space-*-skalaen

🚫 Aldri

• Bygg rå HTML/CSS for elementer Aksel dekker
• Hardkod farger, spacing eller typografi fra Figma-inspektøren
• Ignorer responsive behov fordi Figma kun viser én breakpoint
• Opprett egne design-tokens som dupliserer Aksels eksisterende tokens