Как работает система компонентов в Figma и для чего она используется?

Система компонентов в Figma работает по принципу «главный компонент — экземпляры», где изменения в главном компоненте автоматически отражаются во всех его экземплярах. 1

Мастер-компонент (Main component) — это оригинал, который задаёт структуру, стили и поведение. 3 Экземпляр (Instance) — это копия мастер-компонента, которая автоматически наследует изменения из мастера. 3

Некоторые примеры компонентов в Figma:

• Кнопки — разные состояния кнопок (обычная, наведённая, нажатая, заблокированная). 1
• Формы и поля ввода — текстовые поля, чекбоксы, переключатели с различными состояниями. 1
• Карточки — элементы с изображением, заголовком, описанием и кнопками действий. 1
• Иконки — единый набор пиктограмм, который можно изменять централизованно. 1
• Шапки и подвал сайта — повторяющиеся блоки, используемые на всех страницах. 1
• Модальные окна и всплывающие уведомления — стандартные элементы, используемые в интерфейсе. 1

Система компонентов в Figma используется для того, чтобы:

• Ускорить работу. 2 Не нужно вносить правки к каждому повторяющемуся объекту, достаточно изменить только компонент. 2
• Упорядочить дизайн. 2 С помощью компонентов дизайн получается более аккуратным, логичным и консистентным. 2
• Согласовать дизайн с вёрсткой. 2 Разработчики тоже используют принципы компонентов в коде. 2
• Организовать командную работу. 2 Все дизайнеры и разработчики будут использовать одинаковые согласованные элементы. 2