Как обрезать фотографию в фигме

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

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

Зачем обрезать фотографию в Figma

Обрезка изображения в Figma — это не просто эстетическая операция. Она решает важные практические задачи в процессе проектирования. Например, при создании макетов мобильных приложений часто требуется привести фото к строгим пропорциям: 1:1 для аватарок, 16:9 для превью видео или 4:3 для карточек новостей. Обрезка помогает соблюдать единый стиль и масштаб по всему проекту.

Кроме того, Figma активно используется командами разработчиков и дизайнеров совместно. Чётко обрезанные изображения упрощают передачу макетов в код: разработчику проще понять, какую часть картинки нужно отобразить, особенно если используются CSS-свойства вроде `object-fit` или `clip-path`. Также важно, что обрезка в Figma не изменяет исходный файл — она лишь контролирует его отображение, что позволяет легко корректировать кадрирование на любом этапе.

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

Основные способы обрезки изображения

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

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

Альтернативный подход — кадрирование с помощью инструмента «Crop» (обрезка), доступного при двойном клике на изображение. Он позволяет временно скрыть нежелательные области, но не даёт такой гибкости, как маскирование. Этот способ подходит для быстрой подстройки, но не рекомендуется для сложных композиций.

Третий вариант — использование сторонних плагинов, таких как Image Crop Tool или Smart Cropper. Они расширяют функциональность Figma, позволяя автоматически вырезать фон, применять круглые маски или кадрировать по заданным пропорциям. Однако такие плагины требуют дополнительного времени на установку и могут быть избыточны для простых задач.

Пошагово: как использовать маскирование

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

1. Загрузите изображение в Figma с помощью перетаскивания или через меню File → Place Image.
2. Создайте фрейм нужного размера. Нажмите F, затем выделите область нужных габаритов. Альтернативно — выберите уже существующий фрейм, например, карточку пользователя.
3. Перетащите изображение внутрь фрейма. Убедитесь, что оно стало дочерним элементом (это можно проверить в панели слоёв).
4. Выделите фрейм и найдите в правой панели свойств опцию Mask. Активируйте её, нажав на значок маски или используя сочетание Ctrl+Alt+M (Cmd+Option+M на Mac).
5. Теперь изображение будет отображаться только внутри границ фрейма. Вы можете перемещать его, масштабировать или поворачивать, чтобы выбрать нужную часть.

Настройка положения изображения

После активации маски вы можете свободно редактировать положение картинки. Используйте стрелки на клавиатуре для точного смещения. Чтобы увеличить изображение, выделите его и потяните за угол, удерживая Shift — это сохранит пропорции. Если нужно заполнить весь фрейм, используйте функцию Fill container в контекстном меню (правый клик по изображению).

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

Допустим, вам нужно сделать круглую аватарку. Создайте фрейм 80×80 пикселей. Затем добавьте внутри него эллипс того же размера. Поместите изображение выше эллипса в дереве слоёв, выделите эллипс и нажмите Ctrl+Alt+M. Теперь изображение будет отображаться только в форме круга. При желании можно удалить сам эллипс — он остаётся невидимым, выполняя роль маски.

Как кадрировать без маски — альтернативные методы

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

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

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

Экспорт обрезанного изображения

Если вам нужно получить именно файл с обрезанной картинкой, выделите маскированный фрейм и перейдите в панель экспорта. Укажите формат (PNG, JPG) и нажмите Export. Figma автоматически экспортирует только видимую часть, как если бы маска была «запечена» в изображение. Это особенно полезно при подготовке материалов для разработчиков.

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

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

• Забыли активировать маску. После помещения изображения в фрейм легко забыть нажать Ctrl+Alt+M. Результат — картинка выходит за границы. Решение: всегда проверяйте наличие значка маски в правой панели.
• Неправильная иерархия слоёв. Изображение должно находиться поверх фрейма-маски. Если оно ниже — маска не сработает. Перетащите изображение выше в панели слоёв.
• Потеря пропорций при масштабировании. При растягивании изображения без Shift оно деформируется. Всегда удерживайте Shift, чтобы сохранить соотношение сторон.
• Использование маски на группе вместо фрейма. Группы не поддерживают маскирование. Преобразуйте группу в фрейм (Ctrl+Alt+G) перед применением маски.

Ошибка: изображение не реагирует на маску

Если маска не работает, проверьте следующее:

1. Является ли родительский элемент фреймом (не группой).
2. Активирована ли опция Mask в правой панели.
3. Находится ли изображение выше фрейма в дереве слоёв.
4. Не применено ли к изображению другое маскирование ранее.

Экспертные советы по работе с изображениями

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

• Создавайте библиотеку шаблонов: карточки, аватарки, баннеры с заранее настроенными масками. Это ускорит работу над проектами.
• Используйте Auto Layout в сочетании с масками для адаптивных блоков. Например, карточка с фото и текстом будет корректно масштабироваться под разные данные.
• Не забывайте про доступность: при обрезке убедитесь, что ключевые элементы изображения (лицо, объект) остались в центре внимания.
• Для командной работы добавляйте комментарии к маскированным элементам: «Обратите внимание — изображение обрезано маской, исходник полный».

Автоматизация с помощью плагинов

Плагины значительно упрощают рутину. Например, Frame Picker позволяет быстро применять маски из библиотеки. Content Reel — вставлять стоковые фото с автоматическим кадрированием. Unsplash integration — прямо в Figma искать и вставлять изображения, которые сразу можно обрезать.

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

Заключение

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

• Маскирование фреймом — основной способ обрезки в Figma.
• Изображение должно быть дочерним элементом и находиться выше маски в иерархии.
• Для экспорта используйте настройки 2x/3x, чтобы избежать размытости.
• Создавайте шаблоны и компоненты для массового применения.
• Используйте плагины для автоматизации рутинных задач.