Компоненты и стили позволяют повторно использовать объекты и атрибуты интерфейса, чтобы систематически поддерживать дизайн в масштабе. Когда нужно что-то изменить, например, цвет ссылки или домашнюю иконку, вы можете внести изменение один раз — в исходный основной компонент или стиль — и посмотреть, как он обновится во всех ваших проектах.

Что такое компоненты и стили?

• Компоненты — это объекты многоразового использования в дизайне. Они могут быть простыми, как отдельная кнопка, или сложными, как весь заголовок навигации (состоящий из экземпляров других компонентов, таких как логотипы, кнопки и пункты меню).
• Экземпляры компонента. Как только вы сделаете компонент, вы можете создать его экземпляры, которые по сути являются связанными копиями этого компонента. Поэтому, если вы обновите дизайн исходного компонента, эти экземпляры будут отражать изменение.
• Стили — это многократно используемые коллекции свойств, которые можно легко применять к элементам дизайна. В Figma можно создать стили для текста, цветов, сеток и эффектов, таких как тени и размытия.

Компоненты

Когда создавать компоненты? Мы рекомендуем превращать элементы дизайна в компоненты на раннем этапе проектирования. Дизайн может измениться и пройти через множество усовершенствований, но создание компонентов на этом этапе означает, что вы сможете сэкономить время, сделав эти изменения один раз (с исходным компонентом), и обновив их на всех ваших экранах (с экземплярами).

Главные компоненты (мастер-компоненты) мы складываем на отдельную страницу в фигмофайл. Это позволяет быстро их находить и легко настраивать по мере развития проекта.

Начинать создание компонентов следует с более мелких «атомных» компонентов, которые можно использовать в качестве строительных блоков. Вы заметите в своем дизайне паттерны, и захотите их последовательности. Например, форма карточки или форма кнопки.

<aside> 💡 Атомы — это абсолютный фундамент нашей системы. Атомы включают палитры цветов, шрифты, индивидуальные элементы (например, заголовки, абзацы, кнопки и т.д.) и прочие вещи, которые соединяются с другими атомами для создания молекулы.

</aside>

Хорошая стратегия — превратить эти повторяющиеся элементы в компонент, который вы можете использовать повторно, вложив экземпляры этих элементов в другие компоненты. Представьте себе, что вы превращаете простую форму кнопки в компонент (который будет использоваться в качестве атома) и вкладываете его в каждый созданный вами компонент кнопки («молекулу»). Результат: все кнопки используют одну и ту же отправную точку. Если эту форму нужно изменить, ее можно обновить, изменив всего лишь «атомный» компонент.

<aside> 💡 Молекулы — это кусочки системы, которые мы строим из атомов. И хотя молекулы требуют атомы, они больше похожи на блоки лего-конструктора, из которого складываются более сложные вещи. Пример молекулы: кнопки, поля формы с надписью или таблица с заголовками и колонками данных.

</aside>