Как и зачем использовать дизайн в компонентах
Компоненты используют для отрисовки повторяющихся элементов интерфейса. Например, шапки, меню, карточки товара. Так и разработчикам удобней, и дизайнерам проще вносить правки сразу на всех экранах.
#элементы интерфейса
#библиотека компонентов
#Figma components
Три главных предмета в фокусе внимания
1
Повторное использование
Если кусок интерфейса почти наверняка будет одинаковым или похожим на нескольких экранах, то его нужно делать компонентом.
2
Передача в разработку
Девелоперы сначала собирают компоненты в разных вариантах и состояниях, а уже потом составляют из них экраны.
3
Командная работа
Коллегам будет проще взять готовый компонент из библиотеки, чем искать что-то похожее по всему проекту.
Например
Хороший образец
Масштабы проекта потребовали выделить отдельную роль — дизайнер, отвечающий за оптимизацию дизайн-системы и поддержание порядка. Пангео
Так делать не надо
Два крайних случая: слишком много уровней вложенности компонентов или компонентов нет вообще.
Инструменты
Control + Shift + ?
Шпаргалка по горячим клавишам в Figma
Design Systems в Figma Community
Посмотреть, как делают другие
Libraries
Повторное использование сетов и независимая разработка компонент
Работа в компонентах демонстрирует уровень производственной культуры. Это не волшебная таблетка от всех проблем, но один из важных инструментов, который, при правильном использовании, упрощает работу всей команды.
Наталья Прокофьева, генеральный директор «Собаки Павловой»
5 советов,
как делать
хорошо
1
Не спешите
Сначала отрисуйте кусок интерфейса, потом оцените, нужно ли превращать его в компонент или это лишнее усложнение для структуры проекта.
2
Используйте горячие клавиши
Не только для создания, но и для редактирования и работы с библиотекой компонент.
3
Синхронизируйте вариативность с разработкой
Чтобы не напридумывыть состояний и вариантов, которые нет смысла делать.
4
Используйте чужое
Прежде чем создать свой собственный компонент, посмотрите, может коллега уже сделал.
5
Используйте прототипирование внутри компонентов
Это помогает разработчикам понять работу компонента и упрощает создание интерактивного прототипа.