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

В Figma компоненты — это мощный инструмент для создания масштабируемых и согласованных дизайн-систем. Они позволяют создавать повторно используемые элементы, такие как кнопки, карточки или формы, и синхронизировать их изменения по всем проектам. Однако на практике часто возникает необходимость отменить превращение слоя в компонент: например, если действие было совершено случайно, выбран неверный фрейм или требуется изменить структуру до публикации. В отличие от обычного «Отменить» (Ctrl+Z), которое может не сработать после перехода между экранами, полное удаление или разрыв связи с библиотекой требует понимания логики работы компонентов в Figma.

Что такое компонент в Figma и зачем его отменять?

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

Отмена компонента может потребоваться по нескольким причинам. Например, вы могли выбрать не тот слой, случайно нажать на значок компонента в правой панели, или поняли, что элемент слишком специфичен для включения в общую библиотеку. Также бывает, что компонент был создан, но ещё не опубликован в командной библиотеке — в этом случае есть шанс исправить ситуацию без последствий для коллег.

Важно различать три состояния: исходный компонент (master component), его экземпляры (instances) и обычные группы или фреймы. Отмена возможна только до момента публикации в shared library. После этого любые изменения должны проходить по установленным процессам, чтобы не нарушить работу других членов команды.

Как отключить экземпляр компонента: пошаговая инструкция

Если вы работаете с экземпляром компонента (instance), а не с оригиналом, то отменить его связь с родителем просто. Это называется «открепление» или detach. Процедура не удаляет элемент, а превращает его в независимый объект, который больше не будет обновляться при изменениях в основном компоненте.

1. Выберите экземпляр компонента на холсте с помощью инструмента «Select» (V).
2. В правой панели свойств найдите раздел «Instance». Он расположен под названием слоя и содержит имя компонента, например «Button / Primary».
3. Нажмите на иконку цепи рядом с названием — это кнопка «Detach instance from component».
4. После нажатия экземпляр станет обычным фреймом. Его можно свободно редактировать, перемещать, изменять стили без риска повлиять на другие копии.

Альтернативный способ — контекстное меню. Кликните правой кнопкой мыши по экземпляру и выберите пункт «Detach instance». Оба метода работают одинаково быстро и надёжно. Откреплённый элемент теряет все связи с оригиналом, но сохраняет визуальное оформление на момент отключения.

Как преобразовать компонент обратно в обычный объект

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

Первый способ — дублирование и замена:

• Выделите мастер-компонент в странице или библиотечной вкладке.
• Нажмите Ctrl+C (копировать), затем Ctrl+V (вставить).
• Вставьте копию на тот же холст. Новая вставка будет экземпляром.
• Открепите экземпляр, используя кнопку «Detach».
• Теперь у вас есть независимый фрейм, идентичный оригиналу. Можно удалить сам мастер-компонент, если он больше не нужен.

Второй способ — работа через Layers панель:

• Раскройте структуру компонента в левой панели слоёв.
• Выделите все внутренние элементы (текст, фигуры, иконки).
• Вырежьте их (Ctrl+X), создайте новый фрейм (F), вставьте содержимое внутрь.
• Переименуйте фрейм, настройте стили. Старый компонент можно удалить.

Удаление компонента из библиотеки: риски и последствия

Если компонент уже опубликован в командной библиотеке, удаление становится серьёзным шагом. Figma не позволяет просто «удалить» публичный компонент — он остаётся доступным для всех проектов, где уже используется. Удаление возможно только через настройки библиотеки и только администратором.

Процесс удаления:

1. Перейдите во вкладку «Design systems» или «Libraries» в Figma.
2. Найдите нужную библиотеку и откройте её.
3. Перейдите в раздел «Components» и найдите целевой элемент.
4. Щёлкните по троеточию рядом с ним и выберите «Delete».
5. Подтвердите действие. Компонент исчезнет из библиотеки, но останется в проектах, где уже используется.

Однако, если вы просто удалили компонент локально, не через библиотеку, это не повлияет на опубликованную версию. Важно понимать, что даже после удаления экземпляры в других файлах продолжают существовать как «зависшие» копии — они больше не обновляются, но визуально остаются на месте.

Распространённые ошибки при работе с компонентами

Многие начинающие дизайнеры допускают типичные ошибки при работе с компонентами в Figma. Одна из самых частых — создание компонента из неготового макета. Например, когда внутри кнопки используются абсолютные значения вместо auto-layout, или текст не привязан к вариациям.

Другая ошибка — неправильное именование. Если компонент назван просто «Button», а не «Button / Primary / Large», это затрудняет поиск и использование в команде. Также распространена ситуация, когда компонент создаётся из группы, а не из фрейма, что ломает адаптивность.

• Создание компонента без использования Auto Layout — приводит к проблемам с масштабированием.
• Отсутствие вариаций (variants) — делает систему менее гибкой.
• Превращение всего экрана в компонент — нарушает принцип единственной ответственности.
• Редактирование экземпляра без открепления — может вызвать путаницу при синхронизации.

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

Мы поговорили с Игорем Петровым, старшим продуктовым дизайнером в IT-компании с 10-летним стажем работы в Figma. Он делится своим подходом к управлению компонентами:

По его словам, около 30% запросов в дизайн-чате связаны с некорректно созданными компонентами. Чаще всего — это случайные публикации или отсутствие документации. Он рекомендует использовать плагины вроде «Anima» или «Figma Tokens» для автоматизации и контроля.

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

Заключение

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

• Экземпляры можно откреплять — это безопасно и быстро.
• Мастер-компонент до публикации можно заменить через дублирование и detach.
• Удаление из библиотеки — радикальная мера, требующая согласования.
• Всегда тестируйте компонент перед публикацией.
• Используйте Version History как страховку против ошибок.