Gå til dokumentasjon for v0.63

Hopp til hovedinnhold

Bruk designsystemet med eget tema

7. juni 2024

Skal du ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger? 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.

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

Hvilket alternativ du går for avhenger av dine behov og rammer.

Fordelen med å ha en kobling, gjennom tokens, er at de sørger for at designere og utviklere arbeider etter de samme reglene, og at ting ser likt ut i Figma og i de faktiske løsningene. En annen fordel er at du vil kunne generere et tema som vil fungere ut av boksen med designsystemet sine komponentbibliotek i kode.

Ulempen er at det krever en del mer første gang du skal sette det opp, ettersom du er avhengig av pluginen Tokens Studio og en Github-bruker. Har du en Gihub-bruker skal det la seg gjennomføre på 3 minutter, som du kan se i videoen under. Vi håper vi kan gjøre dette enklere med en egen plugin etter hvert.

Vi guider deg gjennom begge alternativene her.

Alternativ 1: Med kobling

En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra json-filen og holder dem i sync via pluginen "Tokens studio". Du må ha en Github-bruker selv eller en Github-venn som kan hjelpe deg.

I videoen under kan du se hele prosessen for å få satt opp designsystemet med eget tema.

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

  1. Er du designer kan det være lurt å snakke med en utvikler, slik at dere har en felles forståelse av hvordan tokens kobler sammen Figma og kode. For å kunne legge til egne tokens i dagens oppsett må du lage en kopi av dette repoet: design-tokens. Velg "Use this template" og "Create a new repository".

  2. Gå til next.theme.designsystemet.no. Legg inn dine farger og velg Kopier > Light theme. Les mer om fargesystemet her.

  3. Gå til repoet du lagde i steg 1. Lim inn koden du kopierte i steg 2 her: DittRepo/design-tokens/primitives/colors/light/theme.json.

  4. Hent komponentbiblioteket fra Figma Community

  5. Nå kan du sette opp Tokens Studio til å peke på repoet. Slik gjør du det:

    • Installer Figma Tokens - En plugin for Figma som gjør at du kan bruke json-filen til å generere variabler for Figma. De fleste designere skal slippe å forholde seg til denne pluginen, men en person i organisasjonen bør ha ansvar for å holde tokens i sync med variablene som eksisterer i figma.

    • I Github:

      • gå til GitHub Developer Settings
      • trykk "Generate new token" (Classic).
      • Skriv "Designsystemet" i "Note"
      • Sett expiration et godt stykke frem i tid.
      • Huk av "repo" i avkrysningsboksene.
      • Trykk "Generate token"
      • Du får nå en "Personal Access Token" (PAT).
      • Kopier PAT-en (du kan bare se den én gang)

    • I Figma Tokens, under Sync > GitHub, fyll inn:

      • Name: DesignsystemetTokens
      • Personal Access Token: *** din PAT *** (som du fikk fra Github)
      • Repository: owner (brukernavn)/navn på repo
      • Branch: "main".
      • File Path: design-tokens
      • Trykk "Save"

  6. Du vil nå se alle tokens-verdiene du genererte i temavelgeren. Du kan velge Styles & variables og Create variables for å få fargene dine tilgjengelige som variabler i Figma.

  7. Ferdig! 🎉 PS. Dersom du skal gjøre endringer på tokens i pluginen kan du pushe endringene til Github-repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst. Men...du må ha Pro-versjonen av Tokens Studio for å kunne gjøre dette, så det kan være like greit at endringer kun gjøres i koden, og at du henter ned eventuelle endringer til Figma ved å velge "Last-ned"-ikonet (Pull) nederst.

Alternativ 2: Uten kobling

Ved å ikke ha en kobling kan du sette opp Figma-bibiloteket med dine farger uten at du må bruke Github. Uten direkte kobling til tokens, må du manuelt passe på at variablene som lages i Figma er de samme som brukes i kode.

Slik går du frem:

  1. 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.
  2. Installer designystemets plugin for Figma.
  3. Gå til next.theme.designsystemet.no og generer fargeskalaen ut i fra dine profilfarger.
  4. Kopier JSON-koden og lim den inn i pluginen du installerte i steg 2.
  5. Velg "Oppdater variabler". Nå skal du se alle komponentene med dine egne profilfarger. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
github logoRediger denne siden på Github