Namngivningen i Figma är central för att få till ett bra arbetsflöde. Det kan upplevas som att det tar mycket tid att hålla koll på namngivningen, versioner m.m. men det är absolut något vi tjänar på i längden.
Filer
Namngivningen ska vara enligt följande:
typ av tillgång (component / asset / colors) / kategori (ej obligatorisk, kan vara flera nivåer) / komponentens namn (lowercase) / komponentens version (semver)
Exempel på korrekt namngivning för filer:
- components / forms / inputs / text / search / 1.0.0
- colors / default / 1.0.0
- styles / shadows / 1.0.0
- components / icons / iconandlabel / 1.0.0
Komponenter
Själva komponentfilen ska sedan endast innehålla ett antal Master Components. De ska vara namngivna enligt följande modell:
viewport (desktop, mobile, tablet, ej obligatorisk)/ färg (ej obligatorisk, hämtas från tailwind) / storlek (ej obligatorisk, hämtas från tailwind) / variation (default, container, withLabel osv., ej obligatorisk) / state (active, hover, focus osv., ej obligatorisk)
Exempel på korrekt namngivning för en komponent:
- desktop / primary / default
- gray / sm / default / visited
- gray / sm / container / focus
- primary / 7xl / rounded
- negative / rounded
Interna komponenter
Ibland finns det behov av att skapa interna komponenter, dessa ska då namnges med _Namnpåkomponenten. Anledningen är att komponenten då inte exporteras när man publicerar komponenten. Se t.ex. våra SearchResults komponenter för exempel på när vi använder interna komponenter.
Exempel på vad vi vill uppnå med korrekt namngivning
med en komponentfil och Master komponenter med rätt namngivning så ser filen ut så här:
När vi sedan nyttjar komponenten i en annan fil så kan vi få följande struktur:
