Erfaringer med Figma Variants
Designverktøyet Figma har nettopp lansert en ny funksjon som skal lette hverdagen for designere med å strukturere varianter av komponenter sånn at de er lettere å finne frem i og ta i bruk. De kaller det Variants og dette er mine erfaringer etter å ha brukt det litt.
Som interaksjonsdesigner bruker man veldig ofte de samme komponentene om og om igjen. Det er for eksempel en knapp eller et tekstfelt som gjerne endrer seg basert på brukerens interaksjon. Det er grenser for hvor kreativ man kan være i utformingen av basiskomponenter. Dessuten bør man holde seg til konvensjoner brukerne er vant med fra andre nettsider/apper/tjenester. De tilbringer tross alt mesteparten av tiden sin på andre plattformer enn din, så de forventer at det skal oppføre seg og se noenlunde likt ut.
Når man raskt skal skisse opp en idé kan det være irriterende å måtte pikselpirke seg ned i en komponent for å representere tilstander (states) til for eksempel en radioknapp. Da er det fint å ta i bruk et komponentbibliotek som har radioknapper i ulike tilstander. De ser gjerne slik ut:
Her er ulike tilstander representert og det ser veldig ryddig og greit ut.
Men, når man faktisk skal ta det i bruk for å lage skisser ser det gjerne sånn ut:
Med grupper i grupper i grupper. Vanskelig å forholde seg til. Dessuten vil en liten skrivefeil kunne føre til et rot i hele systemet (som i dette eksempelet):
Her har en menneskelig skriveslurv ført til at to radioknapper ikke har havnet i kategorien de var tiltenkt, og derfor vil skape trøbbel for de som skal ta i bruk komponentbiblioteket.
Her kommer redningen fra Figma
Figma har nettopp lansert ny funksjonalitet som skal gjøre det lettere å både opprette og bruke designkomponenter. De kaller det Variants og det er nettopp varianter av komponenter det handler om.
Variants skal gjøre det lettere å bruke og vedlikeholde komponenter ved å la deg bruke egenskaper (properties) som kan ha flere verdier.
Opprettelse av komponent: I menyen til høyre kan jeg nå sette opp en tilstand til radioknappen min og velge om den er primær (mørkeblå) eller sekundær (grønn), om den skal være valgt (selected) og om den skal være deaktivert (disabled). Jeg kan sette opp egne varianter og velge egenskapene disse skal ha samt navngi disse som jeg vil.
Dette gjør det mye lettere å vedlikeholde og ta i bruk versjoner av komponentene. Sånn vil en instans av radioknappen som ble satt opp over tas i bruk:
I menyen til høyre kan jeg enkelt bytte tilstand, versjon og håndtere egenskapene i et kontrollpanel. Jeg kan til og med bruke praktiske brytere (hvis jeg har brukt booleanske verdier (on/off eller true/false) i egenskapene til komponenten) til å stille på egenskaper som skal fungere på tvers av alle variantene av komponenten.
Dessuten slipper menneskelig skriveslurv å skape trøbbel, fordi Figma navngir komponentene automatisk for meg ut fra verdiene jeg har satt i Variants-kontrollpanelet (som er mye lettere å håndtere enn å måtte endre navnet til hvert enkelt komponent).
Til enkle komponenter går dette helt fint, men med en gang man skal gjøre en endring som har noe å si for flere varianter av komponenten, for eksempel å legge til nattmodus eller deaktivert modus, så må man lage en tilsvarende versjon for alle andre varianter komponenten har. Noen ganger må man også lage en versjon som viser en kombinasjon av flere egenskaper (som også må ha en variant for hver tilstand). Dette fører til en kombinatorisk eksplosjon 💥 og en liten endring kan fort skape mye uforventet ekstraarbeid. Et eksempel på dette:
Siden denne komponenten skal ha både en verdiindikator og ikoner, så må disse lages i alle tilstandene til komponenten. Skulle man i dette tilfellet også laget en versjon av glidebryteren som kun har et ikon på den ene siden, måtte man laget denne i alle tilstandene + med og uten verdiindikator + disse i de ulike tilstandene + en deaktivert versjon i alle de ulike tilstandene. Da blir det fort mye ekstra pirk 🤯. Og problemet vokser bare jo flere tilstander eller varianter man lager.
Oppsummert
Det er ingen tvil om at Figma Variants gjør det lettere (og gøyere) å lage, opprettholde og bruke komponenter via et kontrollpanel.
Jeg skulle derimot ønske at Figma Variants var litt “smartere” når det kom til å sette opp komponenter. Det er fint å kunne ha et panel for å slippe å lete etter en variant av en komponent, og det er fint å kunne organisere tilstandene sine, men det er litt irriterende å måtte lage, kopiere og lime inn så mye hvis man skal skape et innholdsrikt designsystem. Jeg håper Figma fortsetter å utvikle Variants for det er en veldig nyttig funksjon!
Nyttige lenker
- Hvis man har et komponentbibliotek man ønsker å gjøre om til Figma Variants: https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-Variants
- Man kan bruke Regex for å endre på navngivingen av komponenter sånn at de kan bli generert til Variants: https://twitter.com/adispezio/status/1322273853175816193
- Bridging design and code with Variants: https://www.figma.com/blog/bridging-design-and-code-with-variants/
- Creating and organizing Variants
- Steve Ruizok om paralelle tilstander i Variants: https://twitter.com/steveruizok/status/1320671389314068481
Skrevet av Markus Johansen Sørem
