Компонент и его экземпляры
Курс «Макет учебного портала в Figma»
Кнопка «Открыть курс» умеет менять ширину вместе с надписью и сохраняет внутренние отступы. Она понадобится в каталоге, на странице курса и в мобильном меню. Если копировать её как независимый фрейм, любое изменение скругления придётся повторять в нескольких местах. Компонент сохраняет общий источник, а экземпляры используют его в конкретных экранах.
В этом уроке создадим main component, добавим два экземпляра и разберём, какие изменения относятся к общему устройству кнопки, а какие — к отдельному месту применения. В результате связь станет управляемой: редакция основы обновляет повторяющиеся элементы, но текст каждой кнопки может оставаться своим.
Основной компонент и экземпляр
На странице 02 Components выделите Button/Base и создайте компонент. Назовите его Button. Изменение типа видно по значку в панели Layers. Теперь объект служит основным компонентом; он определяет структуру и исходные свойства. Рядом добавьте экземпляр через Assets, копирование или команду вставки. Способы перечислены в документации экземпляров Figma.
Поместите один экземпляр в будущую карточку каталога, второй — на пробный экран курса. Для первого оставьте «Открыть курс», для второго укажите «Начать урок». Не меняйте основную надпись только для того, чтобы оформить страницу курса: это изменило бы исходное значение для других мест. Текст конкретного экземпляра является локальным изменением, которое обычно называют override.
Теперь вернитесь к main component и поменяйте скругление с 10 на 12. Ожидаем, что оба экземпляра получат новое скругление, сохраняя разные надписи. Это и есть полезное разделение: устройство элемента общее, содержание в контексте может различаться. Внешнее сходство независимых копий не даёт такого поведения.
При поиске основы используйте команду Go to main component у выбранного экземпляра. Она надёжнее ручного поиска среди десятков похожих кнопок. В небольшом файле разница кажется несущественной, но после добавления состояний и вложенных компонентов она позволяет понять, какой объект действительно управляет выбранным элементом.
Фрагмент официального письменного руководства Figma: кнопка преобразуется в main component. Это исходный пример автора, а не выполненная сборка нашего портала.
Когда команда получает файл, попросите читателя найти основу по одному экземпляру и назвать локально изменённую часть. Если он не может понять происхождение кнопки, проблема находится в организации файла или неясных именах. Разместите краткое правило прямо рядом с основным компонентом и удалите неиспользуемые независимые копии. При этом не удаляйте эксперимент без сохранения, если он объясняет ещё обсуждаемое решение: перенесите его в отдельную секцию и подпишите статус. Источник текущего решения должен оставаться однозначным.
Что изменять в основе
В основном компоненте задавайте порядок слоёв, внутренние отступы, стандартное скругление и общие текстовые параметры. Если все кнопки должны иметь больший горизонтальный padding, это изменение основы. Если одна кнопка открывает программу курса, а другая начинает урок, это различие содержания. Смешение этих уровней приводит либо к случайным глобальным изменениям, либо к множеству ручных исправлений.
Назовите текстовый слой внутри компонента Label, а стрелку — TrailingIcon. Стабильные имена облегчают чтение структуры. Не оставляйте Text 21 и Vector 8, потому что другому редактору придётся угадывать их назначение. При добавлении вариантов мы будем сохранять одинаковые роли слоёв, чтобы состояния выглядели как изменение одного элемента.
Создайте на странице компонентов подпись: «Главное действие в текущем блоке; текст должен назвать результат перехода». Компоненту полезно иметь короткое описание применения. Иначе каталог со временем наполнится технически правильными объектами, из которых непонятно, какой выбрать. Имя Button говорит о типе, но не объясняет различие будущих primary и secondary.
Не превращайте каждый декоративный прямоугольник в компонент. Компонент оправдан, когда объект повторяется, имеет общий договор или должен поддерживать контролируемые состояния. Фон одного hero-блока может оставаться обычным слоем. Слишком много бессодержательных компонентов делает Assets шумным и затрудняет поиск действительно важных строительных элементов.
Локальные изменения и восстановление
В одном экземпляре измените цвет фона вручную на красный. Затем поменяйте акцент основного компонента. Наблюдайте, наследует ли экземпляр новое значение или сохраняет локальную настройку. Такое различие объясняет частую проблему: «Я исправил компонент, но одна кнопка осталась старой». Причина может состоять в override конкретного свойства, а не в поломке связи.
Верните фон экземпляра к исходному через сброс соответствующего изменения. Общий сброс всех overrides используйте осторожно: он может вернуть и локальную надпись «Начать урок» к значению основы. Нам важно восстановить наследование фона, сохранив уместное содержание. Если редактор не предлагает точечного сброса в нужном месте, заранее запишите надпись и восстановите её после общего действия.
Отсоединение экземпляра через Detach instance снимает связь с основным компонентом. Объект снова становится самостоятельной структурой. Это может понадобиться для принципиально другого элемента, но плохо подходит для исправления одного цвета. После отсоединения будущая редакция основы перестанет обновлять эту копию, и ответственность за согласованность вернётся к ручному поиску.
| Изменение | Где выполняем | Ожидаемое следствие |
|---|---|---|
| Общий padding | Main component | Все наследующие экземпляры меняют отступы |
| Надпись «Начать урок» | Экземпляр | Меняется конкретное действие |
| Новый тип кнопки | Вариант компонента | Появляется управляемый выбор состояния |
| Detach instance | Экземпляр | Прерывается связь с основой |
Использование в одном файле
Для нашего проекта достаточно локальных компонентов. Публикация командной библиотеки имеет смысл, если элементы должны использоваться в нескольких файлах и команда согласовала процесс обновления. Доступность такой функции зависит от плана. Не требуется включать библиотеку или менять тариф, чтобы пройти этот урок и собрать портал внутри одного файла.
Добавьте в рабочие экраны именно экземпляры из Assets. Для наглядности временно измените скругление основы и убедитесь, что выбранные элементы реагируют. После этого верните принятое значение 10. Эта операция описана как ожидаемая самостоятельная проверка, а не как выполненный при подготовке запуск Figma.
Основной компонент оставьте на странице 02 Components, а образцы использования — в экранах. Перемещать main component в каждую карточку не нужно: экземпляр уже выражает применение. Такая организация сохраняет понятный центр изменений и отделяет строительный материал от готовой композиции.
На выходе получаем кнопку с общей структурой и несколькими экземплярами, у которых различаются надписи. Следующий урок добавит управляемые разновидности: главное и второстепенное действие, обычное и недоступное состояние. Мы выразим эти различия свойствами, чтобы редактор экрана не собирал их заново из случайных цветов.