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 tilgjengeliggjort i Figma Community.
Kom i gang med komponenter
Dersom bibliotekene ikke ligger i Figma-organisasjonen din allerede, kan du hente filene fra Figma Community:
Etter at du har åpnet dem må du
- Plassere filene der du vil ha dem i din Figma-organisasjon
- Publisere filene
- Aktivere de to fellesbibliotekene i filene du jobber i
Skal du bruke designsystemet med egne farger og branding? Se guiden for å sette opp designsystemet med eget tema.
Ta i bruk komponentene
For å aktivere bibliotekene:
- Trykk på bok-symbolet under "Assets"
- Aktiver "Core UI Kit" og "Felles ikonbibliotek"
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.
Bruk designsystemet med egne profilfarger
Komponentene støtter ulike brand og modes. For å sette opp egne profiler se guiden "Designsystemet med eget tema"
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, størrelse, avstand eller skygge.
Sizing-variabler
Størrelser (sizing) er det du setter under en "Section", "Frame" eller "Group" i Figma. Der kan du definere bredde (W) og høyde (H).
Spacing-variabler
Avstander er det du setter under "Auto Layout" i Figma. Der kan du definere avstand over, under, ved siden av, eller mellom.
Fargevariabler
Fargevariabler er navngitt etter hva de er tiltenkt å brukes til: background, surface, border og text.
- Er du ute etter en
border-farge kan det være effektiv å søke på "border" for å se alle tilgjengelige farger. - Er du ute etter en
fill-farge på et element kan det være effektiv å søke på "surface" for å se alle tilgjengelige farger. - Er du ute etter en farge for tekst eller ikon kan det være effektiv å søke på "text" for å se alle tilgjengelige farger.
Les mer om farge-tokens og hva de brukes til.
Typografi-stiler
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 vekting.
Du kan også bruke typografi-stilene, men da vil du ikke få mulighet til å slå på avstand under:
Når du bruker Typografi-komponentene, har du mulighet til å aktivere avstand under teksten:
Les mer om typografi.