Как вырезать изображение в figma

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

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

Что такое маскирование в Figma

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

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

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

Основные способы вырезать изображение

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

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

Второй способ — ручное выделение с помощью Pen Tool (инструмент перо). Этот метод подходит, когда нужно вырезать объект по сложному контуру, например, человека на фоне или логотип с изгибами. После создания векторного контура его можно использовать как маску, точно повторяя форму.

Третий способ — использование плагинов. Существуют специализированные расширения, такие как Remove.bg for Figma или Clipper, которые автоматизируют процесс удаления фона или создания масок. Они особенно полезны при работе с большим количеством изображений.

Сравнение методов маскирования

Пошагово: как создать обрезку

Процесс вырезания изображения в Figma стандартен и состоит из нескольких чётких шагов. Ниже приведена пошаговая инструкция для базового случая — создания круглой аватарки.

1. Загрузите изображение в ваш Figma-файл с помощью перетаскивания или через меню Insert → Image.
2. Выберите инструмент Ellipse (E) и нарисуйте круг нужного размера в том месте, где должно быть вырезанное изображение.
3. Перетащите изображение поверх круга в том же фрейме или группе. Убедитесь, что изображение находится выше по слоям.
4. Выделите одновременно и фигуру, и изображение (удерживайте Shift).
5. Щёлкните правой кнопкой мыши и выберите «Create Mask» или нажмите горячие клавиши Ctrl+Alt+M (Cmd+Option+M на Mac).
6. Готово: изображение теперь видно только внутри круга.

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

Для более сложных форм, таких как многоугольники или кривые, используйте Pen Tool. Нарисуйте контур, преобразуйте его в фигуру, поместите поверх изображения и примените маску тем же способом. Обратите внимание: контур должен быть замкнутым, иначе маска не сработает.

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

Новички часто сталкиваются с типичными проблемами при работе с масками. Понимание этих ошибок поможет избежать разочарований и сэкономит время.

Первая ошибка — неправильный порядок слоёв. Если изображение находится ниже фигуры-маски, функция «Create Mask» будет недоступна. Всегда следите за иерархией: маска должна быть сверху, но при этом оба объекта должны быть в одной группе или фрейме.

Вторая ошибка — попытка применить маску к объектам из разных фреймов. Figma не позволяет создавать маски между разными родительскими контейнерами. Решение: переместите изображение и фигуру в один фрейм или создайте группу (Ctrl+G).

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

Как исправить невидимое изображение под маской

• Выделите маску и уменьшите её непрозрачность (Opacity) до 50%, чтобы увидеть, что находится под ней.
• Перейдите в панель слоёв и найдите вложенный объект — там будет указано «Image» под «Mask».
• Перетащите изображение внутри маски, чтобы отцентрировать его.
• При необходимости измените размер изображения с зажатой клавишей Alt, чтобы не влиять на размер маски.

Советы для эффективной работы

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

Используйте сочетание клавиш. Ctrl+Alt+M — самый быстрый способ создать маску. Запомните его, и вы сэкономите десятки кликов в день. Также полезны Ctrl+Shift+G (разгруппировать маску) и Ctrl+D (дублировать объект).

Работайте с компонентами. Если вы создаёте шаблон карточки с аватаркой, сделайте её компонентом. Тогда при замене изображения маска останется, и вам не придётся повторять процесс.

Применяйте Auto Layout для динамических блоков. Если вы проектируете карусель или список, в котором изображения имеют разный размер, заверните каждый элемент в Auto Layout и примените маску. Это обеспечит единообразие и адаптивность.

Чек-лист: перед публикацией макета

• Проверьте, все ли маски корректно отображаются на разных устройствах.
• Убедитесь, что изображения не обрезаны слишком резко — важные детали (например, глаза в аватарке) должны быть видны.
• Оптимизируйте размер файлов: хотя Figma не сжимает изображения при экспорте, большие оригиналы могут замедлять загрузку.
• Протестируйте поведение маски в прототипе, особенно если она анимируется или изменяется по ховеру.

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

Интервью с Еленой Мироновой, старшим UI-архитектором, 10 лет в Figma

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

На одном из проектов нам нужно было создать 200 карточек сотрудников с разными фотографиями. Мы автоматизировали процесс с помощью компонентов и масок. Каждая карточка — это экземпляр компонента с заранее наложенной маской. Дизайнеры просто вставляли фото — и всё, форма сохранялась. Это сократило время настройки с 10 минут до 10 секунд на карточку.

Советую новичкам: не бойтесь экспериментировать. Создайте тестовый файл, добавьте 5 разных изображений и попробуйте вырезать их разными способами. Через час вы уже будете чувствовать себя уверенно.»

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

Заключение

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

• Маскирование — основной способ вырезать изображения в Figma.
• Фигура-маска должна быть выше по слоям и в одном контейнере с изображением.
• Используйте компоненты и Auto Layout для масштабируемости.
• Плагины ускоряют работу с большими объёмами данных.
• Маски полностью совместимы с экспортом и прототипированием.