Design System od zera: czy Figma Variables naprawdę zastępuje tokeny?
Gdy Figma zaprezentowała Variables, świat designu oszalał. Nareszcie otrzymaliśmy natywne wsparcie dla aliasowania, trybu ciemnego i jasnego oraz łatwiejszej budowy architektury design systemu. Ale minęło kilkanaście miesięcy i entuzjazm nieco ostygł w starciu z rzeczywistością wdrożeniową.
Czym właściwie są Variables?
Variables to sposób na przechowywanie wartości (kolorów, liczb, tekstów) w sposób programistyczny. Zamiast odnosić się do hex-kodu #FF0000, odnosimy się do zmiennej "Color/Danger/500". To krok w stronę Design Tokens – metodyki wywodzącej się z W3C.
Figma Variables to potężne narzędzie, ale jego prawdziwa moc objawia się dopiero, gdy połączymy je z dobrym procesem inżynieryjnym.
Gdzie leży problem z Handoffem?
Niestety, Figma to wciąż narzędzie do rysowania (mimo że staje się powoli środowiskiem quasi-programistycznym). Kiedy developerzy wchodzą do pliku, variables często nie są bezpośrednio zmapowane na ich pliki CSS/SCSS w kodzie. Istnieje przepaść między "Primitive Variables" w Figmie, a strukturą zmiennych w środowisku Tailwind czy Styled Components.
Rozwiązaniem jest używanie odpowiednich pluginów (np. Tokens Studio), które potrafią synchronizować tokeny bezpośrednio do repozytorium GitHub za pomocą pull requestów (JSON do CSS/Sass).
Złote zasady struktury Variables
Jeśli budujesz Design System od nowa, pamiętaj o architekturze trzech warstw:
- Core (Primitive) - Surowe wartości. Np. blue-500: #3B82F6.
- Semantic - Znaczenie w kontekście. Np. surface-brand, text-danger.
- Component - Specyficzne dla komponentu. Np. button-primary-bg-hover.
Zastosowanie tej struktury uratuje Cię podczas wdrożenia. Variables w Figmie to nie "magiczna różdżka", ale bardzo ostry nóż. Używaj go z rozwagą.