Заметил, что многие продуктовые дизайнеры задаются вопросом «Как организовывать разные состояния компонентов?». Весь дизайнерский мир делится на 2 части. Первые делают один компонент, в котором несколько папок для всех состояний. Вторые делают для каждого состояния элемента отдельный компонент.

Сначала разберу преимущества и недостатки каждого из них, а потом рискну предложить еще один вариант. Рассказываю о реализации в Фигме. Возможно, в других редакторах что-то не применимо.

1. Один компонент со множеством состояний

Преимущества

• Библиотека компонентов выглядит компактнее.
• В панели компонентов меньше элементов и поэтому меньше скролишь в поиске нужного. В этом случае спасает поиск по имени.

Недостатки

• Где-то нужно все таки показать верстальщику все возможные состояния, потому что он не видит скрытые слои.
• Приходится тратить время на поиск нужного состояния: его показ и скрытие ненужного. Особенно это утомляет, если структура компонента сложная.

Читать про остальные способы

https://habr.com/ru/post/445764/?utm_source=habrahabr&utm_medium=rss&utm_campaign=445764