No bo jak opiszesz input, button czy też breadcrumb? Nie da rady napisać „button to button, służy do naciskania”. Dokumentowanie pracy nie jest tylko dla projektantów, ale również dla programistów, technical writerów, ownerów oraz dla klienta. A ci już na designie znać się nie muszą.

Sam niedawno napotkałem taki problem w mojej pracy. Przyszedł czas dokumentowania. Dla wszystkich powyższych stakeholderów. No i zrobił się problem. Nie taki, którego nie dałoby się rozwiązać. Ale musiałem się nagłówkować nad tym jak na przykład opisać wspomniane buttony czy też button grupy.

Już po fakcie, ale trafiłem na stronę component.gallery Na której znajdują się całkiem zgrabnie opisane komponenty oraz przykłady do nich.

Przykład definicji button grupy:


Button group

Other names: Toolbar

A wrapper for multiple, related buttons.

Description

A button group is a wrapper for related buttons; useful if you want to display multiple, related actions together.

Markup

Add the correct role attribute to the button group: e.g. role="group" or role="toolbar", to communicate that the buttons are grouped to users of assistive technologies.

Usage guidelines

  • Use consistent rules for the order of buttons across different button groups. One possible rule is to keep primary actions (e.g. submitting a form) on the right and secondary actions (e.g. cancel, go back) on the left.

No i to jest coś, co chciałbym mieć za wzór zanim musiałem nadrukować to sam :) Właśnie dlatego stwierdziłem, że się tym z Wami podzielę. Nie chodzi o kopiowanie czyjejś pracy, ale mieć dostęp w ustrukturyzowany sposób do tego, jak zrobili to inni i móc wyciągnąć z tego wnioski jest bezcenne.

Strona jest o tyle fajna, że komponenty wylistowane tam mają przykłady. I to takie bardzo życiowe. Te przykłady to linki do innych design systemów, które są w sieci opublikowane, jak na przykład Uber, Salesforce, General electric itd. To jest też dodatkowy plus tej strony. Poza komponentami znajdziemy tutaj listę Design sytemów oraz linki do nich.

Bardzo przydatne źródło, zwłaszcza dla kogoś, kto walczy z Design Systemami. Według mnie to już tylko kwestia czasu, aż będzie to standardowe narzędzie (w sensie jakiś Design System) w arsenale każdego projektanta. Leci do zapisania w moim Notion 😎