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

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

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

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

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

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

Подготовка изображения для обрезки

Перед тем как начать вырезать, важно правильно загрузить и разместить изображение в Figma. Первый шаг — импорт файла через перетаскивание или кнопку «Upload». Поддерживаются форматы PNG, JPG, SVG и даже GIF. После загрузки картинка становится отдельным слоем в панели объектов.

Размер изображения должен быть достаточным для выбранного применения. Если вы планируете использовать фото как аватар 40×40 пикселей, но исходник всего 50×50, при увеличении могут появиться артефакты. Рекомендуется использовать изображения с запасом — минимум в 2–3 раза больше целевого размера.

Шаги подготовки:

• Загрузите изображение в Figma.
• Убедитесь, что оно чёткое и соответствует по пропорциям будущей маске.
• Проверьте расположение важных элементов (например, лица на фото).
• При необходимости измените размер с зажатым Shift для сохранения пропорций.

Если вы работаете с командой, добавьте комментарий к изображению: «Исходник. Не трогать». Это предотвратит путаницу. Также стоит помнить, что Figma автоматически оптимизирует изображения при экспорте, но только если они не были обрезаны внешними средствами.

Метод 1: Кадр (Frame) как маска

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

Для этого:

1. Выберите изображение в рабочей области.
2. Нажмите Ctrl+Alt+G (или Cmd+Option+G на Mac) — это сочетание создаёт Frame и помещает изображение внутрь него.
3. Теперь вы можете изменять размер Frame — за его пределами изображение будет скрыто.

Если вы хотите сделать рамку вокруг вырезанного фрагмента, добавьте Stroke к Frame. Это полезно для презентаций или демонстрации состояний (например, активный/неактивный пользователь).

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

Метод 2: Фигура как маска

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

Алгоритм действий:

1. Создайте фигуру нужной формы поверх изображения (например, эллипс для круга).
2. Убедитесь, что фигура находится выше изображения в иерархии слоёв.
3. Выделите оба объекта: сначала изображение, затем фигуру (порядок важен).
4. Нажмите правой кнопкой мыши и выберите «Use as Mask» (или используйте контекстное меню в правой панели).

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

Как изменить форму маски после применения

Если вы уже применили маску, но хотите скорректировать её форму, сделайте следующее:

• Выберите группу с маской (она отображается как один объект).
• Дважды щёлкните по ней — это войдёт внутрь группы.
• Теперь можно редактировать как изображение, так и форму маски.
• Измените размер или положение фигуры — изменения сразу отразятся на визуализации.

Создание круглого и сложного выреза

Круглые аватарки — стандарт де-факто в соцсетях, CRM и мессенджерах. Чтобы создать такой элемент:

1. Загрузите фото.
2. Нарисуйте эллипс поверх (удерживайте Shift для идеального круга).
3. Поместите круг выше изображения.
4. Выделите оба слоя и примените «Use as Mask».

Для более сложных форм, например, шестиугольника или сердца, можно использовать готовые векторы. Импортируйте SVG-файл с нужной фигурой, преобразуйте его в путь («Detach from component»), затем используйте как маску.

Если нужно вырезать по контуру объекта (например, человека на фоне), Figma не позволяет делать это автоматически. Здесь потребуется предварительная обработка в специализированном софте (Photoshop, Remove.bg), после чего загрузить уже прозрачное изображение и применить дополнительную маску при необходимости.

Пример: создание шестиугольной маски

• Найдите или создайте шестиугольник (можно через плагин «Polygon»).
• Установите его поверх изображения.
• Примените маску.
• При желании добавьте тень или обводку к контейнеру для объёмности.

Ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с масками. Ниже — самые частые ошибки и способы их решения.

Ошибка 1: Маска не применяется

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

Ошибка 2: Изображение смещается после маскирования

Это происходит, если вы двигали изображение внутри группы. Решение — выровняйте элементы до применения маски. Используйте инструменты Align (по центру, по краям) для точного позиционирования.

Ошибка 3: Невозможно редактировать маску

Если вы не можете дважды щёлкнуть по маске, проверьте, не заблокирован ли слой. Также убедитесь, что группа не является компонентом. В таком случае нужно разорвать связь («Detach instance») или редактировать основу.

Ошибка 4: Потеря качества при экспорте

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

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

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

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

Заключение

Вырезание части изображения в Figma — это не сложная, но требующая внимания к деталям операция. Знание двух основных методов — Frame и фигурная маска — покрывает 95% практических задач. Главное — соблюдать порядок слоёв, использовать качественные исходники и не забывать о проверке результата перед экспортом.

• Маскирование — это управление видимостью, а не удаление пикселей.
• Frame подходит для прямоугольных вырезов, фигуры — для любых других форм.
• Всегда проверяйте порядок слоёв перед применением маски.
• Используйте PNG для экспорта с прозрачностью.
• Работа с масками ускоряет создание прототипов и улучшает согласованность дизайна.