Как и зачем использовать дизайн в компонентах
Компоненты используют для отрисовки повторяющихся элементов интерфейса. Например, шапки, меню, карточки товара. Так и разработчикам удобней, и дизайнерам проще вносить правки сразу на всех экранах.
Три главных предмета в фокусе внимания
-
Повторное использование
Если кусок интерфейса почти наверняка будет одинаковым или похожим на нескольких экранах, то его нужно делать компонентом.
-
Передача в разработку
Девелоперы сначала собирают компоненты в разных вариантах и состояниях, а уже потом составляют из них экраны.
-
Командная работа
Коллегам будет проще взять готовый компонент из библиотеки, чем искать что-то похожее по всему проекту.
5 советов,
как делать хорошо
- Не спешите
Сначала отрисуйте кусок интерфейса, потом оцените, нужно ли превращать его в компонент или это лишнее усложнение для структуры проекта.
- Используйте горячие клавиши
Не только для создания, но и для редактирования и работы с библиотекой компонент.
- Синхронизируйте вариативность с разработкой
Чтобы не напридумывыть состояний и вариантов, которые нет смысла делать.
- Используйте чужое
Прежде чем создать свой собственный компонент, посмотрите, может коллега уже сделал.
- Используйте прототипирование внутри компонентов
Это помогает разработчикам понять работу компонента и упрощает создание интерактивного прототипа.
Например
Конечно, сначала можно сделать дизайн без компонентов, но при передаче в разработку все равно придется их сделать.
Мы создавали конструктор чат-ботов, поэтому все элементы этого конструктора отрисовывали сразу в компонентах.
Хороший образец
Масштабы проекта Пангео потребовали выделить отдельную роль — дизайнер, отвечающий за оптимизацию дизайн-системы и поддержание порядка.
Так делать не надо
Два крайних случая: слишком много уровней вложенности компонентов или компонентов нет вообще.
Инструменты
Шпаргалка по горячим клавишам в Figma
Design Systems в Figma Community
Посмотреть, как делают другие
Libraries
Повторное использование сетов и независимая разработка компонент
Работа в компонентах демонстрирует уровень производственной культуры. Это не волшебная таблетка от всех проблем, но один из важных инструментов, который, при правильном использовании, упрощает работу всей команды.
Наталья Прокофьева, генеральный директор «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169