I Figma finner du komponenter og stiler fra designsystemet som du kan bruke i designet ditt. Designet har også tilhørende design tokens som er i bruk i react-komponentene.
Biblioteket er foreløpig ikke tilgjengeliggjort i Figma Community, da vi er i en veldig tidlig fase av arbeidet. Ønsker du å være med å utvikle dette i fellesskap - ta kontakt så kan vi se på mulige samarbeidsformer.
Har du tilgang til Figma-kontoen "Digdir" kan du bruke stilene og komponentene allerede nå. Har du ikke @digdir e-postadresse, må du ha fått en invitasjon.
Kom i gang med komponenter
Sjekk at du har aktivert de 3 fellesbibliotekene:
- Trykk på bok-symbolet under "Assets"
- Aktiver "Felles komponenter", "Felles tokens", "Felles ikonbibliotek"
NB. Dersom du ikke har @digdir e-postadresse, vil bibliotekene ikke vise med mindre du har fått tilsendt en invitasjon.
Når du har slått på bibliotekene skal du kunne se komponentene ved å klikke på "Assets" og søke på det du trenger. Du kan også bruke tastatursnarveien SHIFT + I. Nå er det bare å dra komponentene inn i dine egne filer!
Vil du være med å lage nye komponenter? Se hvordan du kan bidra.
Varianter
Alle komponenter kommer med ulike varianter og egenskaper. I Button-komponenten kan du for eksempel aktivere ulike vektinger, states, størrelser og du kan også slå på og av ikoner.
Kom i gang med stiler og variabler
Stiler og variabler skal være tilgjengelige i høyremargen når du for eksempel trenger å velge en farge, skygge eller font.
Bruk egen fargepalett på komponentene
Alle tokens er i sync med Figma variabler og styles. For å få dine egne brand-farger kan du aktivere ditt brand i høyremargen. Du kan også aktivere det kun på en bestemt frame:
Kompakte grensesnitt
For admingrensesnitt eller ekspertverktøy kan compact-mode benyttes. Tekststørrelser og komponenter vil da bli mindre og passe bede inn i mer kompakte grensesnitt. NB: Font-size er ikke støttet i Figma variabler enda.
Typografi på små og store skjermer
For all tekst bør du bruke de ferdige utformede typografi-komponentene som er tilgjengelig i Figma og kode. Da sikrer vi at vi har et konsistent uttrykk, riktig bruk avstander, størrelser og font-weight. Typografi-komponenter kan justere seg etter størrelsen på rammen du jobber i. Det vil si at skal du designe for mobil kan du aktivere "viewport 320" i Tokens Studio. Du trenger ikke tenke på noe mer. Størrelse og avstand på overskrifter og brødtekst er nå blitt mindre. 🙌
Les mer om typografi.
Typografi er foreløpig ikke støttet som variabler i Figma, inntil videre må du derfor ha installert pluginen Tokens Studio for Figma for å kunne aktivere riktig viewport. Du trenger en Github-bruker for dette.
- Installer Figma Tokens-plugin
- Generer et nytt "Personal Access Token" (PAT) i GitHub Developer Settings med omfanget "repo"
- Kopier PAT-en (du kan bare se den én gang)
- I Figma Tokens-plugin-modulen, under
Sync > GitHub, legg til ny legitimasjon:- Navn:
Felles Tokens - Personal Access Token:
*** din PAT ***(som du fikk fra Github) - Repository:
digdir/designsystem - Standard gren: "hoved".
- Filbane:
design-tokens
- Navn:
