Kom i gang som designer i NAV
Oppdatert 16. aug. 2022Designsystemet
I NAV bruker vi Figma når vi designer og skisserer løsninger. Der finner du byggeklossene fra designsystemet du kan bruke i designet ditt.
For å finne designsystemet søker du på "designsystemet" og klikker på fanen som heter "Teams".
Filene fra designsystemet under prosjektet Bibliotek.
Alle NAV-brukere i Figma har lesetilgang til disse filene. Det betyr at du ikke kan redigere direkte, men du kan klikke deg rundt og legge igjen kommentarer.
Bibliotekene
Vi har organisert designsystemet i 3 deler for å gi designere fart og flyt. Vi skiller mellom generiske byggeklosser med bredt bruksområde og spesifikke byggeklosser.
- Core – Generiske byggeklosser som passer til alle produkter.
- Nav.no – Byggeklosser for nav.no som er tilpasset innhold og kontekst.
- Interne flater – Byggeklosser for interne flater som er tilpasset innhold og kontekst.
Når vi setter sammen de 3 delene med UI kit og UI pattern får vi denne matrisen:
Core | nav.no | Interne flater | |
|---|---|---|---|
UI kit | NAVs styling og basiskomponenter. Forvaltes av designsystemet. | Styling og komponenter tilpasset nav.no. Forvaltes av designsystemet og team personbruker. | Styling og komponenter tilpasset interne flater. Forvaltes av designsystemet. |
UI pattern | Designmønstre/maler og eksempler på hvordan man kan bruke komponentene. Forvaltes av designsystemet. | Designmønstre/maler brukt på nav.no. Forvaltes av designsystemet og team personbruker. | Designmønstre/maler brukt på interne flater. Forvaltes av designsystemet. |
Bibliotekene du finner i Figma:
Bruke byggeklosser fra bibliotekene
Før du starter må du sjekke at du har slått på bibliotekene du vil bruke byggeklosser fra. Disse finner du i venstrepanelet Assets > Team library > [slå på bibliotek]
Når du har slått på biblioteker vises byggeklossene som er tilgjengelig i venstrepanelet under Assets. Du bruker byggeklosser ved å dra-og-slippe de på arbeidsområdet.
Om du vet hva du skal bruke er det raskere å hente byggeklosser med tastatursnarveien SHIFT + I . Du får opp en liste hvor du kan søke etter byggeklossen du trenger på tvers av alle bibliotekene du har slått på.
Så enkelt er det!
Føringer for design
Et designpoliti finner du ikke her 😇. Designsystemet samler/dokumenterer designmønster og maler som blir brukt i NAV. Vi vil også tipse om flere grupper som aktivt hjelper hverandre med design innenfor ulike områder. Bli med i Slack-kanalene og delta på samlinger.
Slack-kanaler:
- design-interneflater
- forum-for-innloggede-tjenester
- søknadsdialoger
- strukturert_innhold
- design-innbyggere
- designsystem
- design
- frontend
Utforske sammen
De gode løsningene kommer gjennom samarbeid. Vi har satt opp lab-filer hvor vi kan jobbe sammen på tvers av produktteam (Interne flater - DS lab og Eksterne flater - DS lab). Alle med NAV-bruker i Figma kan redigere disse filene. Det er ingen føringer til hvordan vi skal jobbe i dem. Se på dem som sandkasser hvor vi kan utforske og tenke høyt sammen.