Все уровни (атомы, молекулы, организмы) мы оборачиваем в компоненты (обозначены в Figma значком ❖).

При создании нового компонента, не забываем присвоить ему соответствующее имя для более удобного и быстрого поиска в базе компонентов в будущем. Лучше всего называть компоненты в соответствии с разрешением под которое они делаются, названием сущности и ее параметром, например, 1440/Button/Small. Обязательно расписывать через слэш, так как фигма распознает это как папки.

В приведенном примере будет работать следующим образом: в папке 1440 будут лежать все вложенные папки с компонентами под это разрешение, а в папке Button — все возможные кнопки. Это ускорит дальнейший поиск компонентов. 

Самый простой компонент — кнопки и иконки (атом). Важно помнить, что ее вид не должен меняться при переходе от экрана к экрану.

Более сложные компоненты — (молекулы и организмы) например, футер, хедер, модальные окна, формы обратной связи.

Сложный компонент можно наделить различными свойствами в зависимости от задач:

• Слои: скрыть или показать.

• Замена экземпляра: заменить один элемент другим.

• Изменение текстовых строк: указать, какие текстовые строки можно редактировать.

Булевы свойства: позволяют включать или отключать определенные функции или элементы.

Свойства обмена экземплярами: дают возможность замены одного экземпляра компонента на другой.

Свойства текста: позволяют изменять текстовые элементы внутри компонента.

Свойства варианта: используются для переключения между различными вариантами компонента.

После добавления они будут отображаться на правой панели с настройками компонента.

Использование свойств компонентов, особенно булевых свойств, помогает значительно уменьшить размер файла библиотеки, оптимизируя работу с макетами.

Часовое видео про супер-компоненты →

Варианты позволяют группировать и организовывать похожие компоненты в один контейнер. Это упрощает библиотеку компонентов и облегчает их поиск. Переключение между вариантами происходит с помощью выбора необходимого пункта в свойствах экземпляра.

Каждый вариант обладает набором определенных характеристик и свойств. Данные параметры присваиваются в зависимости от решаемой задачи. Базовые характеристики это Type, State, Size, Breakpoint.

Некоторые состояния можно вывести в отдельный переключатель с настройками True и False. Например, это подходит для быстрого включения или отключения иконки в кнопке (в том случае, если она всегда находится в определенном месте, а не нескольких)

После того как мы разобрались с понятием, поведением и возможностями вариантов компонентов, можем смело переходить к работе с вложенными или атомарными компонентами. Они представляют собой компонент, частично или полностью собранный из других компонентов. Такая конструкция упрощает и ускоряет проектирование.

Самый простой пример атомарного компонента — это список с буллитами, где каждая строка — это экземпляр другого компонента. Если нужно изменить вид буллитов, достаточно внести изменения в мастер-компонент строки, а не редактировать каждую строку в списке по отдельности.

Есть и более сложные примеры создания молекул и организмов. Всех их объединяет одно простое правило: создаем сложное из более простого. Все, что в будущем может претерпеть изменения, лучше разбивать на маленькие компоненты, а из них собирать более сложные.

Также слоям в компонентах можно задавать дополнительные характеристики.