Как в фигме разрезать картинку на части

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

Зачем разрезать картинку в Figma

Figma — это не только векторный редактор, но и мощная платформа для командной работы над UI/UX. Часто дизайнерам необходимо разделять изображения на логические блоки: кнопки, иконки, элементы баннеров или составные части иллюстраций. Такой подход упрощает передачу ассетов разработчикам, позволяет контролировать загрузку ресурсов и повышает производительность конечного продукта.

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

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

Инструменты для обрезки и разделения изображений

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

Первый и самый универсальный — слайсы (Slices). Они не изменяют сам объект, а лишь задают зоны экспорта. Идеально подходит для передачи ассетов разработчикам. Второй — маски (Masking). Позволяет скрыть часть изображения за пределами фигуры. Подходит для дизайна, когда нужно показать только определённый фрагмент. Третий — обрезка через фреймы. Простой способ кадрирования: поместите изображение внутрь фрейма и ограничьте видимую область.

Также можно использовать векторные маски, если требуется сложная форма обрезки — например, круг или многоугольник. Это особенно полезно при работе с аватарками, иконками или нестандартными композициями.

1. Slice Tool — для экспорта без изменения оригинала.
2. Frame + Clipping — для визуального кадрирования.
3. Mask with Shape — для художественной маскировки.
4. Boolean Operations — для векторных изображений (редко, но возможно).

Сравнение методов

Как разрезать картинку с помощью слайсов

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

Шаг 1: Загрузите изображение в Figma. Перетащите его в рабочую область или вставьте через буфер обмена. Убедитесь, что оно не вложено в другой фрейм, если только это не требуется.

Шаг 2: Выберите инструмент Slice на панели слева (иконка в виде ножа) или нажмите клавишу S. Теперь вы можете нарисовать прямоугольную область вокруг нужной части изображения.

Шаг 3: Нарисуйте слайс точно по границам фрагмента. Можно включить сетку (View → Show Grid) или использовать snapping для точности. Двойной щелчок по изображению автоматически создаёт слайс по его размерам.

Шаг 4: В правой панели (Design) найдите раздел Export. Нажмите «+» и выберите формат (PNG, JPG, SVG). Настройте масштаб (1x, 2x) и качество. Можно добавить несколько вариантов экспорта.

Шаг 5: Чтобы экспортировать все слайсы сразу, выберите родительский фрейм или страницу и нажмите «Export» в верхней панели. Figma сохранит каждый слайс как отдельный файл.

Советы по использованию слайсов

• Используйте группировку: если разрезаете большое изображение, создайте отдельный фрейм для всех слайсов.
• Не накладывайте слайсы друг на друга — это может вызвать ошибки экспорта.
• Для нестандартных форм используйте комбинацию маски + слайс: сначала обрежьте форму, затем примените слайс.

Использование масок для точного выделения

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

Чтобы применить маску, сначала создайте фигуру (прямоугольник, круг, путь) поверх изображения. Затем выделите и фигуру, и изображение (удерживая Shift), кликните правой кнопкой и выберите «Create Mask» (или Ctrl+Alt+M).

Теперь изображение будет видно только в пределах фигуры. Вы можете перемещать изображение внутри маски, изменять размер маски или применять эффекты — всё это не затрагивает оригинал.

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

Ограничения масок

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

Метод фреймов: простое и быстрое кадрирование

Один из самых простых способов — поместить изображение внутрь фрейма и включить обрезку (clipping). Это похоже на кадрирование в фотошопе, но работает на уровне компоновки.

Создайте фрейм нужного размера (например, 100×100 px). Перетащите изображение внутрь него. По умолчанию Figma покажет всю картинку, но вы можете включить clipping: в правой панели найдите раздел «Layer» и установите галочку «Clip content».

Теперь всё, что выходит за пределы фрейма, будет скрыто. Вы можете свободно перемещать изображение внутри фрейма, чтобы выбрать нужный фрагмент. Это удобно при создании превью, миниатюр или адаптивных блоков.

Преимущество этого метода — динамичность. Если вы измените изображение, фрейм останется прежним, и обрезка автоматически применится. Также можно создавать компоненты с заполнителями: например, карточку товара, где изображение всегда обрезается под 3:2.

Когда использовать фреймы вместо слайсов

• Когда нужна живая связь между изображением и его отображением.
• При создании компонентов и вариантов (variants).
• Если изображение будет часто меняться, а обрезка должна оставаться постоянной.

Советы по экспорту отдельных частей

Правильный экспорт — завершающий этап. Даже если вы идеально разрезали изображение, неправильные настройки могут испортить результат.

Во-первых, проверьте масштаб. Для веба чаще всего используют 1x и 2x. Для Retina-экранов — 3x. Убедитесь, что в настройках экспорта указан нужный scale.

Во-вторых, выберите формат. PNG — для прозрачности и качества. JPG — для фотографий с меньшим размером. SVG — только если изображение векторное. Не пытайтесь экспортировать растровую картинку как SVG — результат будет плохим.

В-третьих, настройте именование. Figma позволяет использовать автоматическое именование по слоям. Включите опцию «Include in export» и задайте понятные названия: «hero-banner-mobile.png», «icon-close@2x.png».

Чек-лист перед экспортом

• Проверены ли все слайсы на нужных позициях?
• Соответствует ли размер каждого фрагмента требованиям разработки?
• Указаны ли корректные форматы и масштабы?
• Имеются ли прозрачные области, которые нужно сохранить?
• Протестирован ли экспорт на реальном устройстве или в браузере?

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

Анна Лебедева, старший продукт-дизайнер в крупной EdTech-компании с семилетним опытом работы в Figma, делится своим подходом к обработке изображений:

«Когда я только начинала, я пыталась делать всё в одном инструменте — как в Photoshop. Но Figma работает иначе. Здесь важно не “как”, а “зачем”. Если цель — дизайн, я использую маски и фреймы. Если цель — передача ассетов, я всегда выбираю слайсы.

Один из наших проектов — мобильное приложение с анимированными персонажами. Каждое движение состояло из 10–15 фрагментов. Мы разрезали спрайты с помощью слайсов, давали понятные имена и автоматизировали экспорт через плагины. Это сократило время подготовки с 3 дней до 4 часов.

Советую новичкам: не бойтесь экспериментировать. Попробуйте все три метода на одном изображении — и вы сразу поймёте, какой подходит лучше.»

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

Заключение

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

Слайсы — лучший выбор для экспорта, маски — для визуальных решений, а фреймы — для динамических компонентов. Комбинируя эти инструменты, вы сможете эффективно управлять графикой и ускорить workflow.

• Слайсы — стандарт для экспорта частей изображений.
• Маски подходят для визуальной обрезки, но не для экспорта отдельных файлов.
• Фреймы с clipping’ом — идеальны для компонентов и прототипов.
• Имена слайсов должны быть понятными и соответствовать структуре проекта.
• Плагины ускоряют процесс разрезки больших изображений на сетку.