Design Tokens
Design Tokens
to podstawowe jednostki stylów, które definiują wygląd i zachowanie komponentów w Design Systemie. Pozwalają one na zdefiniowanie takich właściwości jak kolory, typografia, odstępy, rozmiary i wiele innych w sposób spójny i łatwy do zarządzania.
Dlaczego warto używać Design Tokens?
- Spójność: Używanie tych samych wartości dla stylów w całej aplikacji zapewnia spójny wygląd i odbiór.
- Łatwość zarządzania: Aktualizacja jednego tokena automatycznie wpływa na wszystkie miejsca, w których jest używany, co ułatwia wprowadzanie zmian.
- Skalowalność: Dzięki tokenom można łatwo dostosować stylowanie do różnych platform i urządzeń.
Najlepsze praktyki
- Nazewnictwo: Używaj intuicyjnych i opisowych nazw dla tokenów, które jasno wskazują na ich przeznaczenie.
- Hierarchia: Organizuj tokeny w hierarchiczne struktury, np.
color.primary
,color.secondary
, aby łatwiej było je zarządzać i odnajdywać. - Dokumentacja: Dobrze udokumentowane tokeny ułatwiają pracę zespołowi i zapewniają, że wszyscy korzystają z tych samych wartości.
Przechowywanie Design Tokens
- Najczęściej
Design Tokens
są przechowywane w plikachJSON
lubYAML
, co ułatwia ich integrację z narzędziami do budowania oraz systemami stylów, takimi jakCSS-in-JS
. - Tokeny możemy również dość łatwo przechowywać w formie zmiennych CSS ( custom properties)
- W przypadku preprocesorów takich jak SASS, możemy skorzystać ze zmiennych
- W przypadku Tailwind CSS tokeny możemy przechowywać w ramach konfiguracji theme
- Zdecydowana większość bibliotek CSS in JS również ma możliwość konfiguracji tokenów za pomocą obiektu theme (np. Chakra)
Design tokens prawdopodobnie będą Ci przekazane przez Designera prawdopodobnie pracującego w Figmie, więc warto sprawdzić czy nie ma jakiegoś odpowiadającego wam pluginu do przekazywania tych informacji. Dobrym wyborem wydaje się być Tokens Studio for Figma
Przykłady typowych tokenów
- Kolory:
color-primary
,color-secondary
,color-background
- Typografia:
font-size-base
,font-weight-bold
,line-height
- Odstępy:
spacing-small
,spacing-medium
,spacing-large
- Rozmiary:
size-button-height
,size-avatar-width
- Cienie:
shadow-elevation-low
,shadow-elevation-high
{
"color": {
"primary": "#007bff",
"secondary": "#6c757d"
},
"spacing": {
"small": "8px",
"medium": "16px",
"large": "32px"
}
}
import tokens from "./design-tokens.json";
const Button = styled.button`
background-color: ${tokens.color.primary};
padding: ${tokens.spacing.small} ${tokens.spacing.medium};
`;