Versjonering i Figma

Oppdatert 14. februar 2025Stabil

Oppdatering av Figma-bibliotek

Figma er et designverktøy som lar oss jobbe sammen i sanntid, akkurat som et Google-dokument. Designsystemet bruker det til å lage komponenter som vi deler med resten av NAV gjennom et bibliotek. Det er veldig enkelt og effektivt.

Når vi har oppdatert komponentene publiserer vi endringene til biblioteket. Da vises en blå prikk på bibliotek-ikonet i Figma. Du går selv inn her og oppdaterer når det passer deg. Alt vel så langt.

Skjermbilde av sidepanel i Figma. Blå prikk viser at biblioteket er oppdatert. — Blå prikk viser at biblioteket er oppdatert.

Utfordringen

La oss si at du har brukt et tekstfelt flere titalls ganger i et skjema. Du har overskrevet med egen tekst (labels, description, error message). Hvis oppdateringen innebærer en breaking change i tekstfelt-komponenten, vil du miste alle dine lokale endringer. Det er kjipt! Figma lar oss ikke teste endringene vi gjør før vi publiserer. Vi jobber rett og slett i prod 🤯.

Vår versjonering

Fordi Figma ikke har versjonering, har vi vår egen måte å gjøre det på:

Den gamle komponenten endrer navn til 🚨 OLD [Komponentnavn]. Dette vil ikke føre til endringer i ditt design.
Ny versjon av komponenten blir publisert i tillegg. Den vil ha det originale komponentnavnet.
Den gamle komponenten flyttes til "Deprecated"-siden i bibliotekfila. Komponenten blir liggende der en stund før den blir avpublisert. Dette blir varslet på forhånd.
Designsystemet vil informere om endringer i komponenter i Slack-kanalen #aksel-figma.

Visning av OLD component i Assets-panelet i Figma. — Slik vises ny og gammel versjon av en komponent i Assets-panelet i Figma.

Visning av OLD component i Design-panelet i Figma. — Slik vises gammel versjon av en komponent i Design-panelet i Figma.

Hva betyr det for deg?

Komponenter du har brukt i designet ditt vil ikke miste tekst- og stilendringer. Uansett hvor "gammelt" designet er.
Komponenten du bruker vil ikke bli automatisk oppdatert. Du må bytte til den nye versjonen manuelt (swap instance).

Bildet viser ny versjon av komponenten gjennom å søke i swap-funksjonen — Det er enkelt å finne ny versjon av komponenten ved å søke i "swap instance".