Как вырезать фрагмент в фигме

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

Чтобы вырезать фрагмент в Figma, выделите нужные элементы и поместите их во Frame (Ctrl+Alt+G / Cmd+Option+G). Затем используйте экспорт или делитесь фреймом напрямую. Главное — сохранить масштаб и прозрачность.

Содержание статьи:

Зачем вырезать фрагмент в Figma
Когда вырезка особенно важна
Основные способы вырезки фрагмента
Способ 1: Создание фрейма (Ctrl+Alt+G)
Способ 2: Использование масок (Masking)
Способ 3: Экспорт отдельных слоёв
Способ 4: Использование плагинов
Сравнение методов вырезки
Распространённые ошибки и как их избежать
Чек-лист: готовность к экспорту
Экспертное мнение
Пример из практики
Вопросы и ответы
Заключение

Зачем вырезать фрагмент в Figma

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

Вырезанные фрагменты нужны для нескольких задач:

Передача статичных изображений (PNG, SVG) команде разработчиков;
Подготовка презентаций или демо-версий продукта;
Создание библиотек компонентов;
Тестирование юзабилити отдельных блоков интерфейса.

При этом важно сохранить качество, прозрачность фона и корректные размеры. Например, если вы вырезаете иконку 24×24 px, она должна экспортироваться именно в таком разрешении, без лишних отступов и белого фона.

Полезно знать: В Figma нельзя «стереть» фон вокруг объекта, как в Photoshop. Вырезка — это структурная операция, а не растровая коррекция.

Когда вырезка особенно важна

При подготовке к handoff: разработчики часто просят конкретные элементы в формате PNG или SVG. Без правильно вырезанного фрейма они получат либо слишком большой файл, либо с ошибками прозрачности.
Для создания прототипов: иногда нужно сделать кликабельный прототип только одного экрана. Вырезав его в отдельный фрейм, вы упрощаете навигацию и связи.
При работе с автоколонками: если вы используете Auto Layout, правильная группировка в фрейме влияет на поведение элементов при ресайзе.

Основные способы вырезки фрагмента

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

Способ 1: Создание фрейма (Ctrl+Alt+G)

Это самый простой и распространённый метод. Подходит для большинства случаев.

Выделите нужные объекты с помощью инструмента Selection (V).
Нажмите Ctrl+Alt+G (Windows) или Cmd+Option+G (Mac).
Figma автоматически создаст фрейм нужного размера, в который войдут все выбранные элементы.
Перейдите в панель Export (в правой панели) и добавьте формат экспорта (PNG, JPG, SVG и т.д.).
Нажмите Export и сохраните файл.

«Всегда проверяйте размер фрейма перед экспортом. Иногда Figma добавляет лишние отступы. Убедитесь, что границы плотно прилегают к контенту.» — Анна Петрова, UX-дизайнер, 7 лет в Figma

Способ 2: Использование масок (Masking)

Если вам нужно вырезать часть изображения по нестандартной форме — например, круглую аватарку из прямоугольного фото — подойдёт маскирование.

Поместите изображение внутрь фрейма.
Добавьте фигуру (например, круг) поверх изображения.
Выделите и изображение, и фигуру.
Нажмите Ctrl+Alt+M (или выберите в меню: Layer → Mask → Use as Mask).
Теперь изображение будет отображаться только в пределах формы маски.

После этого можно экспортировать фрейм — результат будет выглядеть как «вырезанная» картинка.

Полезно знать: Маски не изменяют исходное изображение. Вы всегда можете отключить маску через правую панель (иконка глаза рядом с «Mask»).

Способ 3: Экспорт отдельных слоёв

Иногда проще не создавать фрейм, а экспортировать сам объект. Это работает с векторными фигурами, текстом, иконками.

Выберите нужный слой в панели Layers.
В правой панели найдите раздел Export.
Нажмите +, чтобы добавить формат (SVG рекомендуется для иконок).
Нажмите Export [название_слоя].

Преимущество: не нужно создавать дополнительные фреймы. Недостаток: теряется привязка к контексту (например, тени или эффекты могут экспортироваться некорректно).

Способ 4: Использование плагинов

Figma поддерживает сторонние плагины, которые упрощают вырезку. Популярные варианты:

Content Reel: позволяет быстро вставлять и экспортировать медиа;
Image Export: даёт больше контроля над качеством и размером;
Cutter for Figma: специализированный инструмент для быстрого вырезания и экспорта.

«Плагины экономят до 30% времени при массовом экспорте. Особенно полезны при подготовке дробных компонентов для системы дизайн.» — Дмитрий Смирнов, Lead Product Designer, Figma Expert

Сравнение методов вырезки

Метод	Когда использовать	Плюсы	Минусы
Фрейм (Ctrl+Alt+G)	Универсальный случай: кнопки, карточки, экраны	Быстро, встроен в Figma, поддерживает Auto Layout	Может добавить лишние отступы
Маскирование	Необычные формы: круги, многоугольники	Гибкость, не требует редактирования оригинала	Ограничен в экспорте сложных эффектов
Экспорт слоя	Иконки, текст, простые векторы	Не нужно создавать фреймы	Нет контроля над фоном и размером
Плагины	Массовый экспорт, повторяющиеся задачи	Автоматизация, гибкие настройки	Требует установки, возможны задержки

Распространённые ошибки и как их избежать

Экспорт с белым фоном вместо прозрачного: убедитесь, что в настройках экспорта не включена опция Include background. По умолчанию фон должен быть прозрачным.
Неправильный размер: если фрейм больше, чем контент, уменьшите его вручную или используйте Resize to Fit (в правой панели).
Размытые изображения: при экспорте PNG задайте масштаб 1x, 2x или 3x в зависимости от устройства. Для веба — 1x, для iOS — 2x/3x.
Потеря шрифтов: при экспорте в SVG текст может превратиться в кривые. Если нужно сохранить редактируемость — уточните у разработчика.

Полезно знать: Чтобы быстро изменить размер фрейма под содержимое, выберите его и нажмите Shift+Ctrl+Alt+H (или найдите в меню: Arrange → Resize to Fit).

Чек-лист: готовность к экспорту

☑ Все элементы выделены и сгруппированы в фрейм;
☑ Размер фрейма соответствует контенту (без лишних отступов);
☑ Фон прозрачный (если требуется);
☑ Выбран правильный формат (SVG для векторов, PNG для растра);
☑ Указан нужный масштаб (1x, 2x, 3x);
☑ Проверено имя файла (понятное, без пробелов и кириллицы).

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

«Современные дизайнеры часто забывают, что “вырезка” — это не конец процесса, а начало. Важно не просто экспортировать изображение, а обеспечить его правильное использование. Например, если вы вырезаете иконку, убедитесь, что она соответствует системе отступов (8px grid), а её размер кратен 8. Такие детали спасают команду разработки от головной боли.» — Елена Ковалёва, Senior UI Designer, опыт в Figma — 6 лет

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

Пример из практики

Команда разрабатывала мобильное приложение с 50 экранами. На этапе handoff дизайнер экспортировал каждый экран вручную, создавая фреймы и PNG. Это заняло два дня. После аудита процесса они внедрили:

Стандартизированные фреймы 375×812 px (iPhone 13);
Автоматический экспорт через плагин Batch Export;
Именование по шаблону: screen-login.png, screen-profile-edit.png.

Результат: время экспорта сократилось до 20 минут, ошибок стало в 5 раз меньше.

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

Можно ли вырезать фрагмент без фрейма?

Да, если экспортировать непосредственно слой. Но это ограничивает контроль над фоном и размером. Фрейм — более гибкий и безопасный способ.

Как вырезать часть изображения по кривой линии?

Используйте маскирование. Нарисуйте путь (Pen Tool), поместите его над изображением, сделайте маской. Это не настоящая «вырезка», но визуально результат будет таким же.

Почему после экспорта пропадают тени?

Тени (drop shadows) — это эффекты, которые могут выходить за границы фрейма. Если фрейм слишком мал, тень обрежется. Решение: увеличьте фрейм или используйте Constraints для отступов.

Как вырезать только видимую часть объекта?

Если объект частично скрыт другим слоем, вы не можете «вырезать» только видимую часть напрямую. Но можно использовать Boolean operations (объединение фигур) или растеризовать слои (не рекомендуется).

Можно ли автоматизировать вырезку 100 элементов?

Да. Используйте плагины вроде Mass Export или Exporter. Они позволяют выбрать несколько фреймов и экспортировать их одним действием с единым префиксом.

Заключение

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

Чтобы вырезать фрагмент в Figma, используйте фреймы, маски и экспорт слоёв в зависимости от задачи. Всегда проверяйте прозрачность, размер и формат. Автоматизируйте процесс при помощи плагинов, особенно при работе с большим количеством элементов.

Основной способ — создание фрейма через Ctrl+Alt+G.
Для нестандартных форм используйте маскирование.
Экспорт слоя подходит для простых векторов и иконок.
Плагины ускоряют массовую вырезку и стандартизируют процесс.
Всегда проверяйте фон, размер и имя файла перед экспортом.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.