grillmester-figma-workflow

name	grillmester-figma-workflow
description	Design-til-kode-arbeidsflyt — Figma-lenker, Code Connect og mapping fra design til Aksel-komponenter, tokens og responsiv layout. Brukes via `grillmester-figma-workflow` når oppgaven har Figma-lenke eller design-to-code.

Figma → Aksel-kode

OpenCode v1: Backticked grillmester-* names below are skill IDs, not slash commands. Load them with the native skill tool. Slash commands are direct user entry points only.

Bruk denne skillen når du har en Figma-lenke eller Figma-referanse og skal implementere designet i Nav-frontend med @navikt/ds-react.

Når den valgte agenten har en design-only-grense, som 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 alltid en konkret preview og eksplisitt godkjenning. 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å grillmester-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

Figma Auto Layout	Aksel-komponent
Vertikal, gap	<VStack gap="space-*">
Horisontal, gap	<HStack gap="space-*">
Horisontal, wrap	<HStack gap="space-*" wrap>
Grid med kolonner	<HGrid columns={...} gap="space-*">
Container med padding	<Box padding="space-*">
Container med border + bakgrunn	<Box background="..." borderColor="..." borderWidth="1" borderRadius="...">

// ❌ 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

Figma-verdi (px)	Aksel-token
0	space-0
4	space-4
8	space-8
12	space-12
16	space-16
20	space-20
24	space-24
32	space-32
40	space-40
48	space-48
64	space-64

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

Farger: Figma-variabler → Aksel semantiske farger

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

Figma-variabel (eksempel)	Aksel background / borderColor / CSS
surface/default	background="default"
surface/subtle	background="neutral-soft"
surface/action	background="accent-soft"
surface/success	background="success-soft"
surface/warning	background="warning-soft"
surface/danger	background="danger-soft"
border/default	borderColor="neutral-subtle"
border/strong	borderColor="neutral"
text/default	Automatisk via Aksel-typografi
text/subtle	<BodyShort textColor="subtle">

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 grillmester-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 grillmester-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