Компонент
Это повторно используемый элемент интерфейса в Figma, на основе которого можно создавать связанные копии и централизованно управлять их общими свойствами.
Главный компонент
Это исходный компонент, изменения в котором передаются связанным с ним экземплярам.
Экземпляр компонента
Это связанная копия главного компонента, которая наследует его свойства, но допускает изменение части собственного содержимого и оформления.
Что в видео-уроке:
В уроке изучаем компоненты в Figma и разбираемся, как с их помощью автоматизировать повторяющиеся элементы. Создаём главный компонент и экземпляры, управляем изменениями, изображениями и иконками, настраиваем Constraints и организуем компоненты в понятную систему.
Материалы урока:
- Detach Component - ссылка
Зачем нужны компоненты
Компоненты помогают автоматизировать работу с повторяющимися элементами. Особенно заметна польза в многостраничных проектах: вместо ручного редактирования десятков одинаковых кнопок или карточек достаточно изменить главный компонент, после чего изменения распространятся на его экземпляры.
При этом компоненты, как и другие инструменты автоматизации, требуют привычки. Главная задача — научиться замечать повторяющиеся элементы и заранее понимать, какие из них имеет смысл превращать в компоненты.
Создаём главный компонент и экземпляры
Рассмотрим принцип на обычной кнопке. Элементы кнопки объединяем и создаём из них Component. Главный компонент обозначается отдельной иконкой в панели Layers.
После этого можно создавать его экземпляры через дублирование, копирование или вкладку Assets. Они остаются связанными с исходным компонентом.
Для компонентов также полезен уже знакомый принцип: не создавать лишнюю вложенность. Например, отдельный Rectangle внутри кнопки часто не нужен — заливку, Stroke и скругление можно задать непосредственно самому контейнеру. При необходимости внутри компонента можно использовать и Auto Layout.
Различаем изменения главного компонента и экземпляра
Изменения в главном компоненте распространяются на связанные экземпляры. Можно поменять цвет, размеры, скругления, текст или добавить новый элемент — соответствующие изменения появятся в копиях.
При этом экземпляры можно частично адаптировать под конкретную ситуацию: например, изменить текст, цвет или некоторые свойства. Такие локальные изменения не влияют на главный компонент и остальные экземпляры.
Если определённое свойство экземпляра уже было изменено вручную, изменение того же свойства в главном компоненте может перестать на него влиять. Поэтому важно понимать, какие параметры были переопределены локально.
Управляем переопределёнными свойствами
Локальные изменения экземпляра можно сбросить и вернуть к значениям главного компонента. При необходимости можно восстановить как отдельные параметры, так и все переопределения сразу.
Возможна и обратная ситуация: удачное изменение сначала сделано в одном экземпляре, а затем его нужно распространить на всю систему. Для этого изменение можно перенести в главный компонент, после чего оно станет общим для связанных экземпляров.
Если экземпляр больше не должен быть связан с системой компонентов, его можно отсоединить и превратить в обычный Frame. После этого изменения главного компонента на него больше не распространяются.
Используем Constraints при изменении размеров
Компонент может изменяться по ширине и высоте, поэтому важно заранее определить поведение вложенных элементов.
Например, небольшая иконка внутри кнопки при неправильных настройках может начать растягиваться вместе с контейнером. Constraints позволяют привязать её к нужному краю и сохранить исходные размеры и расстояния.
То же касается текста: можно определить его положение относительно левой, правой, верхней или нижней стороны. Благодаря этому компонент предсказуемо ведёт себя при изменении размеров.
Быстро находим главный компонент
В больших проектах главный компонент лучше хранить отдельно от рабочего макета — например, в специальном Frame с другими компонентами.
При этом искать его вручную не нужно. Из экземпляра можно перейти непосредственно к связанному главному компоненту, внести изменения, а затем вернуться к исходному элементу.
Если главный компонент случайно удалён, связь не обязательно потеряна окончательно: при наличии экземпляра его можно восстановить.
Компоненты также могут сохранять связь при работе с другими файлами, поэтому при передаче или копировании связанных элементов важно учитывать, где расположен их исходный компонент.
Переназначаем компонент при необходимости
Иногда часть экземпляров должна начать использовать другую версию элемента. Например, одна группа кнопок сохраняет старое оформление, а для другой требуется новый вариант.
В таком случае можно создать новый главный компонент и переназначить выбранным экземплярам источник. Так разные группы элементов будут управляться независимо, при этом каждая останется автоматизированной.
Этот же принцип особенно полезен при работе с графическими элементами, которые отличаются содержанием.
Изображения меняем через свойства, а не скрытые слои
Отдельная ситуация — карточки с одинаковой структурой, но разными фотографиями. Не стоит добавлять в главный компонент десятки изображений и затем включать нужный слой в каждом экземпляре.
При большом количестве карточек такая структура быстро превращается в набор скрытых слоёв, усложняет макет и увеличивает количество ненужной информации.
Изображение в фигуре является Fill, то есть свойством объекта. Поэтому в экземпляре можно оставить одну фигуру и заменить только её заливку на другую фотографию. Структура карточки при этом остаётся неизменной и не получает дополнительных слоёв.
Такой подход особенно полезен для каталогов и других интерфейсов с большим количеством однотипных карточек.
Для смены иконок используем вложенные экземпляры
С иконками ситуация отличается: новая иконка — это уже не другая заливка существующего объекта, а другая фигура. Добавлять новые фигуры напрямую в экземпляр нельзя.
Поэтому сами иконки можно заранее превратить в отдельные компоненты, а внутрь основного компонента карточки поместить экземпляр нужной иконки.
После этого в разных экземплярах карточки можно переназначать вложенный компонент: например, заменить одну иконку на другую, не создавая набор скрытых слоёв.
Таким образом, основной компонент отвечает за структуру карточки, а отдельные компоненты — за сменяемые графические элементы.
Организуем библиотеку компонентов
Чем больше компонентов в проекте, тем важнее нейминг. Вместо условных Icon 01, Icon 02 лучше по возможности использовать названия, отражающие содержимое или назначение.
Компоненты также можно распределять по категориям с помощью структуры названий через /. Например, иконки для главной страницы можно объединить в одну группу, а элементы другой страницы — в другую.
Это особенно удобно в многостраничных проектах: при переназначении компонента можно быстро перейти в нужную категорию и найти подходящий элемент.
Главный принцип работы остаётся простым: повторяющиеся элементы стоит превращать в компоненты, а изменяемые части заранее продумывать. Изображения удобнее менять через свойства, а сменяемые фигуры и иконки — через вложенные экземпляры компонентов. Такая структура помогает ускорить правки и сохранить макет чистым и понятным.
