Skal du ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger og preferanser? Det er flere måter å gjøre det på. Det første du må ta stilling til er om du vil bruke komponentene med eller uten kobling mellom Figma og kode.

Du bør uansett passe på at det er samme Design Tokens som brukes i både Figma og kode, slik at designere og utviklere arbeider etter de samme reglene. Det sikrer at ting ser likt ut i Figma og i de faktiske løsningene. Om du gjør det manuelt eller med en kobling må du vurdere.

Alternativ 1: Uten kobling mellom Figma og kode
Alternativ 2: Med kobling mellom Figma og kode

Hvilket alternativ du går for avhenger av dine behov og rammer. Å sette opp en kobling krever en pro-lisens av pluginen Tokens Studio. Vi håper vi kan gjøre dette enklere med pluginen vår etter hvert.

Vi guider deg gjennom begge alternativene her.

Alternativ 1: Uten direkte kobling

Dette alternativet krever ikke Token Studio. Med dette alternativet kjører dere samme kodesnutt fra temabyggeren i Designsystemets Figma plugin og i terminalen for å generere Design Tokens til bygg i kode. Det vil ikke være en direkte kobling, men variablene/tokens vil genereres med samme metode, og du vil dermed få like verdier i kode og Figma.

Slik går du frem:

1. Gå til Temabyggeren og generer fargeskalaen ut i fra dine profilfarger.
2. Hent komponentbiblioteket fra Figma Community (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
3. Installer designsystemets plugin for Figma.
4. Gå tilbake til Temabyggeren og klikk "Ta i bruk tema". Kopier kodesnutten og lim den inn i pluginen du installerte i steg 3. (For å generere Design Tokens for kode må utvikler kjøre samme kodesnutt i en terminal.)
5. Velg "Oppdater variabler". Nå skal du se alle komponentene med dine egne profilfarger i Figma. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.

Alternativ 2: Med kobling

En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra pluginen "Tokens Studio". Du må en pro-lisens av pluginen "Tokens Studio" for å få til denne koblingen. Du må også ha et sted å lagre filene, f.eks i et Git repo.

Slik går du frem for å få det til:

1. Gå til Temabyggeren og generer fargeskalaen ut i fra dine profilfarger.

2. Hent komponentbiblioteket fra Figma Community (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.

3. Installer pluginen Tokens Studio for Figma. Tokens Studio sørger for kobling mellom Figma og kode, ved hjelp av Design Tokens (i json-filer).

4. Bruk ditt eksisterende Git repo, eller opprett et nytt. F.eks med Github.

5. Gå tilbake til Temabyggeren og klikk "Ta i bruk tema". Kopier kodesnutten og kjør den i en terminal i ditt Git repo. Sjekk inn og push filene.

6. Nå setter du opp Figma-pluginen "Tokens Studio", som du installerte i steg 3.

   • Følg Tokens Studio sin guide "Sync your Design Tokens with code" for å sette opp ditt Git repo.
   • Husk å sette "Token storage location" til design-tokens (eller det du har valgt å kalle mappen din med Design Tokens).

7. Under "Tokens" i Tokens Studio skal du nå se alle fargene du generte med Temabyggeren i steg 1.

8. I Tokens Studio velg Styles & variables og Export styles & variables to Figma og følg stegene for å få fargene dine tilgjengelige som variabler i Figma.

9. Nå skal du se alle komponentene med dine egne profilfarger i Figma. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.

10. Ferdig! PS. Dersom du skal gjøre endringer på tokens i Tokens Studio kan du pushe endringene til repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst.