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

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

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

В современном UI/UX-дизайне возможность точного управления видимостью изображений критически важна. Будь то создание аватарок, карточек товаров, баннеров или сложных композиций, маски позволяют быстро адаптировать контент под разные макеты. При этом Figma активно развивает функционал работы с изображениями: с 2023 года доступны улучшенные параметры масштабирования, новые режимы заполнения (fill modes) и поддержка SVG-масок, что расширяет возможности дизайнеров.

Основы маскирования в Figma

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

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

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

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

Пошаговое руководство: как вырезать часть изображения

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

1. Импортируйте изображение в ваш файл Figma с помощью перетаскивания или через меню Insert → Image (Shift+Cmd+K).
2. Выберите инструмент Figure (F) и нарисуйте фигуру поверх изображения — например, прямоугольник, овал или произвольный многоугольник.
3. Убедитесь, что изображение находится под фигурой в порядке слоёв (Layers Panel). Если нужно, перетащите его ниже.
4. Выделите одновременно и изображение, и фигуру (удерживайте Shift или Shift+Cmd для выбора нескольких).
5. Нажмите комбинацию клавиш Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac), либо щёлкните правой кнопкой и выберите «Create Mask».

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

Если вы хотите временно отключить маску для проверки исходного изображения, щёлкните по иконке маски в панели слоёв. Чтобы удалить маску полностью, выделите слой и нажмите Ctrl+Shift+M (Cmd+Shift+M). Обратите внимание: удаление маски не удаляет изображение, а просто возвращает его в исходное состояние.

Продвинутые техники: радиусы, формы и SVG

Помимо базового вырезания, Figma позволяет использовать более сложные подходы. Например, вы можете применять закруглённые углы к прямоугольным маскам, создавать эллиптические вырезы или импортировать собственные SVG-фигуры в качестве масок.

Один из популярных приёмов — создание круглых аватарок. Для этого:

• Нарисуйте квадратную фигуру (1:1).
• Установите одинаковые значения радиуса углов во всех четырёх полях (например, 50%).
• Примените маску к изображению.

Такой подход гарантирует идеальный круг независимо от размера фрейма.

Для нестандартных форм можно импортировать SVG-файл:

1. Подготовьте векторную фигуру в Illustrator или другом редакторе.
2. Экспортируйте как SVG.
3. Вставьте в Figma (перетаскиванием или через Insert → Image).
4. Используйте как обычную фигуру для маски.

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

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

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

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

Также стоит избегать чрезмерного вложения масок. Хотя Figma позволяет вкладывать маски друг в друга, это усложняет редактирование и может вызвать лаги в тяжёлых файлах. Лучше ограничиться 1–2 уровнями вложенности.

Практические примеры использования

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

• Изображение товара помещается в прямоугольный фрейм с закруглёнными углами.
• Применяется маска для обрезки по форме.
• Добавляется тень и рамка для визуального выделения.

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

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

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

— Михаил Титов, арт-директор, 12 лет в digital-дизайне

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

Заключение

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

• Используйте комбинацию Ctrl+Alt+M (Cmd+Option+M) для быстрого создания маски.
• Всегда следите за порядком слоёв: маска должна быть выше изображения.
• Маски можно редактировать, двигать и изменять в любое время.
• Поддерживайте чистоту файла — не вкладывайте маски глубоко.
• Экспорт маскированных слоёв включает только видимую часть.