Primärt har vi två modes i Figma; prototypande och arbete med vårt design system.
Arbetet med prototyper är fritt och har inte speciellt mycket struktur. Här ska vi laborera och snabbt testa olika varianter och lösningar. Arbetet med design systemet är precis tvärtom, här ska vi vara strukturerade, petiga och tänka långsiktigt.
Prototypande
I princip har vi inga regler förutom namngivningen för hur vi gör våra prototyper. Kruxet vi försöker lösa får bestämma arbetssättet. Prototyperna skapas alltid i projektet Prototyper i Figma och har följande namn:
- Namn på prototypen / SemVer version.
Design system
Arbetet med design systemet handlar om att konsolidera de komponenter och mönster som kommit fram i prototypfasen. När vi hittar "legobitar" som vi tror oss kunna återanvända så ska de bli en del av designsystemet. Detta innebär att de dels byggs upp i vårt figma projekt och dels att de utvecklas i Storybook. Arbetet med designsystemet ska kännetecknas av följande principer:
- Återanvändning är alltid bäst - Finns det redan en komponent, stil, textstorlek eller färg som vi kan återanvända så gör vi det. T.ex. texten i en knapp bör vara en instans av vår Label komponent, textstorleken i en ingress är en av de som finns i Tailwind osv.
- Designen ska inte vara knuten till en implementation - Komponenten vi tar fram ska inte vara bunden till användningen i t.ex. en visst tema utan ska vara generisk och kunna fungera överallt. Om det inte går så bör inte komponenten vara en del av designsystemet utan tas fram separat.
- Struktur framför hastighet - Det är viktigt att vi alltid gör rätt när vi implementerar något i vårt Designsystem. Artefakterna vi producerar här ska hålla över tid, vara solida och robusta. Vi är t.ex. noggranna med namngivning, paddings, marginaler, nyttjande av korrekta färger, textstilar m.m.
- Framtagningen sker tillsammans med utvecklarna - I takt med att arbetet med t.ex. en komponent fortskrider så gör vi avstämningar med utvecklarna så att vi t.ex. destrukturerat komponenten korrekt, använder margins, paddings m.m. som finns i Tailwind.