Figma Workflow

Figma → Aksel-kode

Bruk denne skillen når et valgt Figma-design skal oversettes til kode eller en implementeringsbrief for Nav-frontend med @navikt/ds-react. En Figma-lenke alene velger ikke denne flyten. Utforsking, sammenligning eller redigering av selve designet hører til /design-prototype, også når Figma-filen finnes fra før.

Når den valgte agenten har en design-only-grense, som grillmester:designer, skal skillen bare hente designkontekst, kontrollere Aksel-mappingen og levere en konkret implementeringsbrief. Ikke skriv eller endre produktkode i den sesjonen. Brukeren må starte en separat Barista- eller Grillmester-flyt for steg 5–6.

Lesing av Figma-kontekst er standardflyten. Hvis Figma-verktøy ikke er tilgjengelig, fall tilbake til brief, skjermbilder og eksisterende kode og merk begrensningen. Oppretting, redigering eller publisering i Figma, Code Connect eller andre eksterne systemer krever eksplisitt mandat for mål og handling. Gjenbruk mandat brukeren allerede har gitt; vis en konkret preview og spør når mandat eller et vesentlig valg mangler. Ikke opprett branch eller commit, og ikke push eller opprett pull request automatisk.

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.

Dette steget krever en engineering-agent med implementasjonsmandat. I en design-only-sesjon leveres i stedet filscope, komponentmapping, akseptansekriterier og visuell verifikasjonsplan som handoff.

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