Figma er muligens det beste verktøyet til produktdesign. Det lar oss jobbe smidig sammen på en enkel måte. Men noen ganger blir det kanskje litt for smidig. Designsystemet har behov for mer kontroll på komponentene vi deler med teamene. Derfor tester vi vår egen måte å versjonere komponenter på i Figma.

Utfordringen

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. Alle som bruker komponenter fra biblioteket, får et varsel i Figma om at det har kommet en oppdatering. Vil du oppdatere?

Det spørsmålet kan få det til å kaldt nedover ryggen til enkelte. 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). Om designsystemet gjør en feil i oppdateringen av tekstfeltet 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 🤯. Vi får heller ikke publisert betaversjoner som teamene kan teste i praksis.

Vår versjonering

Vi tester derfor en annen måte å gjøre det på. Når designsystemet oppdaterer en komponent, vil vi lage en helt ny komponent med samme navn som erstatter den gamle. På den måten vil ikke oppdateringer ødelegge for komponentene du allerede bruker.

Det vil nok fortsatt komme justeringer fra designsystemet som gir varsel om å oppdatere, men dette skal ikke være noe som kan knekke komponentene som er brukt.

Sånn ser det ut i Figma

Når designsystemet skal oppdatere komponenten dupliserer vi den og bruker samme navn. Før vi publiserer den nye komponenten sørger vi får at den er stabil og gjennomtestet. Samtidig vil vi avpublisere den gamle versjonen og legger på "v#" i navnet. Eks. "_Read more v2" Den blir ikke slettet og kan publiseres igjen om det skjer noe feil.

Hva betyr det for deg?

• Komponenten du bruker vil ikke bli automatisk oppdatert. Du må bytte til den nye versjonen manuelt (swap instance).
• Komponenter du har brukt i designet ditt vil ikke miste tekst- og stilendringer. Uansett hvor "gammelt" designet er.
• Du vil kunne teste betaversjoner og gi tidlig tilbakemelding (mer om det lenger ned på siden).

Hva gjør designsystemet?

• Designsystemet får mulighet til å teste konsekvensen av endringer på en sikker måte.
• Designsystemet bruker kortere tid på å få ut nye komponenter og kan teste sammen med produktteamene.
• Designsystemet vil informere om endringer i komponenter i Slack-kanalen #designsystemet-figma.

Beta-versjoner

Vi har separat bibliotek for betatesting (Beta UI kit). Det gjør det superenkelt for deg å bli med på testingen og gi tilbakemelding på tidlige utkast.