Как изменить компонент в фигме

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

Основы компонентов в Figma

В Figma компонент — это повторно используемый элемент дизайна, такой как кнопка, карточка или навигационная панель. Он служит «матрицей» для создания экземпляров, которые сохраняют связь с оригиналом. Это позволяет быстро вносить глобальные изменения: достаточно отредактировать мастер-компонент, и все его копии в файле обновятся.
Компоненты особенно полезны в командной работе и при создании дизайн-систем. Они ускоряют прототипирование, снижают количество ошибок и обеспечивают единообразие интерфейса. При этом важно понимать разницу между мастер-компонентом и его экземплярами: первый является источником истины, второй — его адаптацией в конкретном контексте.
Figma поддерживает динамические свойства компонентов: текстовые и цветовые переопределения, видимость слоёв, вариации через Component Properties. Это даёт гибкость без потери контроля над целостностью дизайна. Например, одна кнопка может иметь разные надписи и состояния (активная, отключённая), оставаясь одним компонентом.

Как изменить мастер-компонент

Изменение мастер-компонента — центральный механизм синхронизации дизайна в Figma. Чтобы внести правки, найдите исходный компонент в панели слоёв или на холсте. Дважды щёлкните по нему, чтобы войти в режим редактирования. Здесь вы можете менять форму, цвет, текст, добавлять или удалять слои.
После внесения изменений все экземпляры этого компонента в файле автоматически обновятся. Это касается как визуальных свойств, так и структуры — например, если вы добавили иконку внутрь кнопки, она появится во всех её копиях. Однако есть нюанс: локальные переопределения могут временно скрывать изменения.

• Откройте файл Figma с нужным компонентом.
• Найдите мастер-компонент в Layers панели (он отображается с синим квадратом).
• Дважды щёлкните по нему, чтобы начать редактирование.
• Внесите необходимые изменения: цвет, типографика, геометрия.
• Выйдите из режима редактирования (щелчок вне компонента или Esc).

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

Что делать, если изменения не применяются?

Иногда экземпляры не обновляются после правки мастер-компонента. Причины могут быть следующими:

Работа с экземплярами и переопределениями

Экземпляры (instances) — это копии компонентов, которые сохраняют связь с мастером. Они позволяют адаптировать элемент под конкретный контекст, не нарушая целостности системы. Например, вы можете изменить текст кнопки или скрыть иконку, не создавая новый компонент.
Переопределения реализуются через Component Properties: текст, цвет, состояние, видимость. Эти параметры можно настроить прямо в правой панели Inspector. Когда вы меняете мастер-компонент, базовая структура обновляется, а переопределённые свойства остаются нетронутыми — это предотвращает потерю контекстных правок.

• Выберите экземпляр на холсте.
• В правой панели найдите раздел «Instance Swap» или «Properties».
• Измените нужное значение: текст, цвет, состояние переключателя.
• Убедитесь, что изменения не конфликтуют с новыми правками в мастере.

Когда мастер-компонент изменяется, Figma показывает уведомление о наличии устаревших экземпляров. Вы можете вручную сбросить их к стандартному состоянию или оставить локальные правки, если они актуальны.

Управление переопределениями: лучшие практики

• Не переопределяйте слишком много свойств — это усложняет поддержку.
• Используйте логичные имена для свойств: например, «Label», «Icon Visible», «Variant».
• Тестируйте изменения на нескольких экземплярах перед публикацией библиотеки.
• Документируйте возможные варианты использования в Notes внутри компонента.

Вложенные компоненты и слоты

Современная Figma поддерживает сложные композиции через вложенные компоненты и слоты. Это позволяет создавать гибкие шаблоны, такие как карточки с заменяемым содержимым или модальные окна с разными блоками.
Слот (slot) — это область внутри компонента, куда можно вставлять другие элементы. Например, в компоненте «Card» можно выделить слот для изображения, заголовка и кнопки. При создании экземпляра вы можете «подменить» содержимое слота, сохранив общую структуру.
Чтобы создать слот:

1. Выделите слой или группу внутри компонента.
2. В правой панели найдите раздел «Component Properties».
3. Нажмите «+ Add Property» и выберите «Swap».
4. Назначьте слоту имя, например, «Image Content».
5. Теперь при использовании экземпляра можно будет подставлять разные изображения или компоненты.

Пример: изменение компонента с несколькими слотами

Представьте, что у вас есть компонент «Hero Section» с тремя слотами: заголовок, подзаголовок и CTA-кнопка. Вы решили изменить фон и добавить тень. Редактируете мастер-компонент — фон и тень обновляются везде. При этом текст и кнопка в слотах остаются прежними, потому что они управляются независимо.
Такой подход идеален для маркетинговых страниц, где часто нужно менять контент, но сохранять стиль. Важно: если вы удалите слот из мастера, все его экземпляры потеряют возможность замены — будьте осторожны с рефакторингом.

Совместное редактирование и контроль версий

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

• Перед изменением мастер-компонента сообщите команде.
• Добавьте описание к версии: «Обновлена кнопка: новый цвет и отступы».
• Проверьте, не используются ли старые версии в активных ветках.
• Используйте плагины вроде «Figma Version Control» для более гибкого управления.

Экспертное мнение

Он также отмечает важность naming-конвенций: «Если компонент называется “Button / Primary / Large”, его легче найти и изменить. Избегайте названий вроде “Кнопка копия 3” — это хаос».
Практика показывает, что компании, внедрившие чёткие правила работы с компонентами, сокращают время на правки до 40%. Особенно это заметно в проектах с сотнями экранов и множеством дизайнеров.

Вопросы и ответы

Заключение

Изменение компонента в Figma — это не просто правка одного элемента, а управление системой. Освоив этот процесс, вы получаете инструмент для быстрого и согласованного развития дизайна. Главное — понимать иерархию: мастер-компонент как источник, экземпляры как адаптации, а переопределения как контролируемые исключения.

• Редактируйте только мастер-компонент — изменения распространяются автоматически.
• Используйте переопределения и слоты для гибкости без потери контроля.
• Публикуйте обновления библиотек, чтобы синхронизировать проекты.
• Тестируйте изменения на нескольких экземплярах перед финальным применением.
• Документируйте компоненты и согласуйте процессы в команде.