| 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
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
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 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="..."> |
<div style={{ display: "flex", flexDirection: "column", gap: "24px", padding: "32px" }}>
<div style={{ display: "flex", gap: "12px" }}>
<button>Avbryt</button>
<button>Lagre</button>
</div>
</div>
<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.
<div style={{ backgroundColor: "#E6F0FF", border: "1px solid #0067C5" }}>
<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
