Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Kom i gang med kodepakkene
    • Kom i gang med Figma
    • Samarbeid og bidrag
    • Versjonering i Figma
    • Design tokens
    • Farger
    • Brekkpunkter
    • Typografi
    • Endringslogg
    • Migrering
    • CSS import
    • Kommandolinje
    • Stylelint
    • Tailwind
    • OverridableComponent
Grunnleggende / Introduksjon

Kom i gang med Figma

Oppdatert 7. september 2023Stabil

    I NAV bruker vi Figma når vi skisser og designer produkter. Vi har satt opp bibliotek med komponenter og stiler som gjør det enkelt å komme i gang.

    Bibliotekene

    Aksel har samlet alle bibliotekene du kan bruke i mappen UI Kits. Alle i NAV har lesetilgang til disse filene. Det betyr at du ikke kan redigere direkte, men du kan klikke deg rundt og legge igjen kommentarer. Det liker vi 😁

    De viktigste og mest brukte bibliotekene er

    • Core UI kit - Stilene og komponenter
    • Core Icons - Ikoner

    Vi utforsker nye ting i biblioteket Alpha UI kit. Disse komponentene er eksperimentelle og finnes ikke i kode.

    Bruke bibliotekene

    For å få tilgang til stiler og komponenter må du sjekke om bibliotekene er skrudd på i Figma-fila du jobber med. Det gjør du fra vestrepanelet ditt. Under taben Assets og knappen Libraries. Da får dopp en modal hvor du kan aktivere forskjellige bibliotek.

    Slå på bibliotek i Figma

    Når du har slått på biblioteket du kan du bruke stilene og komponentene fra det. Komponentene finner du i toppmenyen når du klikker på Resources (eller bruker tastatursnarveien SHIFT + I).

    Legge til komponenter i skissen din

    Stilene fra biblioteket kan du bruke i høyrepanelet ditt når du har valgt et element. Stilene som er tilgjengelig i Figma er tekststiler, farger og skygger.

    Legg til styling på elementer fra høyrepanelet

    Så enkelt er det!

    Plugins

    Det er ingen føring for plugins i Figma per dags dato. Vi antar likevel at plugins som lagrer innhold utenfor EU ikke er OK. Så, bruk hue.

    Figma support og oppdatering

    Vi har noen Slack-kanaler du kan bokmerke

    • #support-figma - Brukes til teknisk support
    • #figma-tips - Brukes til Figma-nerding. Spør, les og/eller del tips du vet om
    • #designsystemet-figma - Endringer i bibliotekene varsles her

    Føringer for design

    Et designpoliti finner du ikke her 😇. Aksel samler/dokumenterer komponenter og mønster som blir brukt i NAV. Men vi vet 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
    • #brukerdialoger
    • #strukturert_innhold
    • #design-innbyggere
    • #aksel-designsystemet
    • #design
    • #frontend

    Utforske sammen

    De gode løsningene kommer gjennom samarbeid. Vi har satt opp en mappe i Figma som heter Samarbeid hvor vi kan jobbe sammen på tvers av produktteam. 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.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack