Komponenty — jak projektować
Komponenty to wielokrotnie używalne elementy interfejsu — przyciski, formularze, karty, modale. Dobrze zaprojektowane komponenty przyspieszają pracę i zapewniają spójność.
Co to jest?
Komponent w Design Systemie to samodzielny, wielokrotnie używalny element interfejsu z określonymi wariantami, stanami, API (props) i wytycznymi użycia. Komponent enkapsuluje styl, zachowanie i dostępność w jednym pakiecie. Dobry komponent jest elastyczny (obsługuje różne scenariusze), spójny (wygląda tak samo w całym produkcie) i dostępny (działa z klawiaturą i czytnikami ekranu).
Jak to działa?
Każdy komponent ma: warianty (np. Button: primary, secondary, ghost), stany (default, hover, active, focus, disabled, loading), rozmiary (sm, md, lg), sloty na treść (tekst, ikona) i API (props sterujące zachowaniem). W Figmie komponent to Component z Properties. W kodzie to React/Vue component z props i TypeScript interface.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Polaris Shopify dokumentuje każdy komponent z sekcjami: Best practices, Content guidelines, Accessibility. Carbon IBM oferuje pełne wytyczne Design + Development z przykladami kodu. Atlassian dzieli dokumentację na Usage, Code, Figma guidelines.