Oppsett (designer)

Komme i gang med Tokens

Hva er Tokens

Design tokens er en kilde til en felles sannhet for navngivning og lagring av designbeslutninger.

Vi lagrer valgene vi tar og gir de navn med mening som gjør at det blir enklere for de ulike fagdisiplinene å samarbeide.

Se oversikt over tokens

Hvor finner jeg Tokens

Design tokens blir laget og strukturert i en plugin til Figma som heter Tokens Studio. De distribueres videre til Figma som Variabler og Stiler.

Hvordan legger jeg til Tokens i mitt prosjekt?

For å legge til Tokens må du i ditt prosjekt gå til library og finne frem Design Tokens 2.0 biblioteket og trykke legge til. Da vil du få alle verdier tilgjengelig i Figma som variabler og stiler.

Hvordan legger jeg til nye Tokens

Nye tokens legges til i Tokens Studio og må synkroniseres til variabler og stiler for å bli tilgjengelig i Figma interface. Her er det viktig at endringene gjøres med et overblikk på alle produkter og tjenester som bruker tokens. Er det endringer kun for ett produkt anbefales det at dette gjøres produktspesifikt og ikke i tokens.

Komme i gang med komponeneter

Hva er komponenter

Komponenter er de gjenbrukbare byggeklossene i designsystemet vårt. Hver komponent utfyller et eller flere spesifikke behov. De er bygget for å passe sammen og skape et enhetlig uttrykk og gjennomgående brukeropplevelse i våre produkter og tjenester.

Hvor finner jeg komponenter

For å legge til komponentene i ditt prosjekt gå til library og finn frem Components 2.0. Da vil du få alle globale komponenter tilgjengelig i ditt prosjekts bibliotek.

Hvordan bruker jeg komponenter?

For å ta i bruk en komponent drar du den enkelt og greit ut av biblioteket og inn i prosjektet ditt. Gjør nødvendige justeringer på utvalgte props. Hvis din løsning krever modifisering så kan dette gjøres ved å endre tokens brukt i komponenten. Men merk at dette vil gi ekstra jobb for utvikling.

Hvordan produserer jeg nye komponenter?

Nye komponenter skal designes ut i Figmaprosjektet Components 2.0.

Så langt det lar seg gjøre skal disse settes opp som auto layouts med spacing, padding og avstander hentet fra tokens.

Props skal navngis slik at de gir mening og at bruker av komponenten intuitivt forstår hva det er og hvordan det skal brukes.

Unngå for mange varianter av en komponent – for eksempel button, button with icon osv er overflødig. Her kan icons settes opp som en boolean og være et tilvalg for en komponent som kun heter button.

NB! Hvis en komponent kun dekker et spesifikt behov i ett prosjekt skal denne lages lokalt i prosjektet.