Как в фигме обрезать картинку по фигуре
В Figma есть несколько способов обрезать картинку по фигуре. Перечислим основные методы, как это сделать просто и эффективно.
Использование масок
Это самый простой и популярный способ:
- Создайте фигуру (круг, прямоугольник, многоугольник и т.д.).
- Поместите картинку поверх фигуры.
- Выделите оба объекта (фигуру и картинку).
- Правой кнопкой мыши - "Use as Mask".
- Или используйте горячие клавиши: Ctrl/Cmd + Alt + M.
Изображение будет обрезано по границам вашей фигуры. Для дальнейшей корректировки просто дважды щелкните по маске, чтобы переместить или масштабировать картинку внутри обтравочной области:
|
Действие |
Результат |
Примечание |
|---|---|---|
|
Двойной клик по маске |
Открывает контейнер для редактирования |
Позволяет перемещать и масштабировать изображение внутри маски |
|
Перетаскивание изображения поверх фигуры |
Автоматическое создание маски |
Быстрый метод без выделения нескольких объектов |
|
Использование горячих клавиш Ctrl+Alt+M |
Применение маски к выделенным объектам |
Работает при выделении как фигуры, так и изображения |
Использование Fill с обрезкой
Этот метод позволяет заполнить любую созданную вами фигуру изображением, как если бы оно было заливкой. Начните с создания векторного контура, например, круга или звезды.
- Создайте фигуру.
- В панели Design найдите раздел Fill.
- Перетащите картинку на образец заливки.
- Настройте обрезку:
- Щелкните по образцу заливки.
- Отрегулируйте положение и масштаб картинки.
- Выберите тип заполнения: Fill, Fit, Crop и т.д.
Этот способ отлично подходит для создания стильных аватарков или декоративных элементов.
Составные фигуры Boolean operations
Для обрезки картинки с помощью составных фигур создайте поверх изображения векторный контур желаемой формы, например, круг или многоугольник. Важно, чтобы эта фигура полностью перекрывала область кадрирования.
- Создайте нужную фигуру.
- Поместите картинку под фигурой.
- Выделите оба объекта.
- В панели Boolean operations выберите "Intersect".

В результате останется только та часть изображения, которая находилась в области пересечения с фигурой, а все остальное будет обрезано. Полученный объект становится единой векторной маской, которую в дальнейшем можно перемещать и масштабировать как цельный элемент.
Полезные советы по обрезке картинки по фигуре
Для максимальной точности используйте направляющие и сетку при создании фигуры-маски. Всегда давайте слоям понятные названия - это сильно упростит дальнейшую работу и редактирование сложной композиции.
- Для редактирования маски: дважды щелкните по маске.
- Чтобы изменить положение картинки: выделите картинку внутри маски и перемещайте.
- Для изменения формы: редактируйте фигуру-маску.
- Быстрая маска: можно сразу создать фигуру, залить ее картинкой и настроить обрезку.
Вывод
В Figma обрезка картинки по фигуре - это быстрый и гибкий процесс, доступный даже новичкам. Ключевые методы, такие как маски, заливка изображением и логические операции, позволяют создавать точные и визуально привлекательные композиции. Освоив эти инструменты, вы сможете легко управлять формой любого графического контента, значительно расширив свои дизайнерские возможности.
