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

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

Основные способы обрезки фото в Figma

В Figma нет традиционного инструмента «обрезка», как в Photoshop или Canva. Вместо этого используется система масок (masks) и функция обрезки фреймов (Frame Clipping). Оба метода позволяют скрыть часть изображения, оставляя видимой только нужную область. Это дает не только визуальный эффект, но и сохраняет исходное изображение в файле, что удобно при последующих правках.

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

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

Когда использовать каждый метод

Выбор между маской и обрезкой фрейма зависит от контекста. Если вы работаете в прототипе, где изображения динамически меняются (например, в компоненте карточки пользователя), лучше использовать Frame Clipping. Это упрощает работу с авто-расположением (Auto Layout) и позволяет быстро заменять изображения.

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

• Используйте маски для сложных форм и когда важна свобода редактирования.
• Применяйте Frame Clipping для простых прямоугольных блоков и при работе с компонентами.
• Не забывайте, что маски можно группировать и вкладывать, что расширяет возможности дизайна.

Почему использовать маски, а не просто обрезание

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

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

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

Ограничения и особенности

Несмотря на удобство, у масок есть нюансы. Например, они не экспортируются как отдельный элемент — экспортируется только видимая часть изображения. Также важно помнить, что маска применяется только к нижележащему слою (или группе), поэтому порядок слоёв в панели «Layers» критически важен.

Если вы случайно поместите маску под изображение, функция не сработает. Figma всегда требует, чтобы маска была выше в стеке. Это легко исправить, используя сочетание Ctrl+Alt+M (Cmd+Option+M на Mac) или через контекстное меню.

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

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

1. Загрузите изображение в ваш Figma-файл с помощью перетаскивания или через меню «File → Place Image».
2. Создайте фигуру (прямоугольник, эллипс, многоугольник) того размера и формы, которую хотите использовать как обрезку. Инструменты находятся в верхней панели: Rectangle, Ellipse, Polygon.
3. Поместите фигуру точно поверх изображения. Используйте привязку (Snap to Grid) или вручную выравнивайте через панель свойств справа.
4. Выделите сначала изображение, затем зажмите Shift и выделите фигуру. Порядок важен: сначала контент, потом маска.
5. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac), либо кликните правой кнопкой и выберите «Create Mask».
6. Готово: изображение теперь видно только внутри фигуры. Вы можете редактировать его положение, дважды щёлкнув по нему.

После создания маски вы можете:

• Перемещать изображение внутри маски для лучшего кадрирования.
• Менять размер маски — изображение автоматически подстраивается.
• Добавлять эффекты (тень, обводку) к самой маске, чтобы выделить обрезанную область.
• Отменить маску через «Delete Mask» в контекстном меню.

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

Допустим, вам нужно сделать круглый аватар для профиля. Шаги:

• Загрузите портрет.
• Создайте эллипс 100×100 пикселей.
• Поместите его над фото, выровняйте по центру.
• Выделите фото, затем эллипс, нажмите Cmd+Option+M.
• Дважды щёлкните по фото и отцентрируйте лицо.

Теперь аватар готов к использованию в интерфейсе.

Советник для новичков: ошибки и как их избежать

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

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

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

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

Как проверить, что всё сделано правильно

После создания маски выполните проверку:

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

Расширение возможностей обрезки: радиусы, группы, сложные формы

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

Например, чтобы создать изображение с закруглёнными углами, нарисуйте прямоугольник, установите радиус углов (Corner Radius) в 16–24 пикселя, затем примените маску. Такой подход часто используется в карточках новостей, приложениях и платформах вроде Behance или Dribbble.

Для более сложных форм — стрелок, капель, звёзд — подойдут кастомные векторы. Создайте фигуру с помощью Pen Tool, замкните контур, используйте её как маску. Это даёт полную свободу дизайна, особенно в иконках и иллюстрациях.

Группировка и вложенные маски

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

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

Сравнение подходов: маски vs Frame Clipping

Figma предлагает два основных способа ограничения видимости: маски и обрезка фреймов (Frame Clipping). У обоих есть свои сценарии использования.

Frame Clipping активируется в настройках фрейма: достаточно включить опцию «Clip content» в правой панели. Тогда любой контент, выходящий за границы фрейма, будет скрыт. Это проще, чем создавать маску, и идеально подходит для макетов с Auto Layout.

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

Когда что выбирать

• Используйте Frame Clipping для макетов с динамическим контентом: ленты, списки, сетки.
• Выбирайте маски для художественных решений, брендированных элементов, уникальных форм.
• Для компонентов с переменной высотой — Frame Clipping предпочтительнее.

Экспорт и оптимальная подготовка после обрезки

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

Рекомендуется перед экспортом:

• Проверить качество изображения — убедиться, что оно не сжато и не растянуто.
• Установить нужный формат: PNG для прозрачности, JPG для фотографий, SVG — только если изображение векторное.
• Настроить масштаб экспорта: 1x, 2x, 3x в зависимости от целей использования.

Если вы экспортируете аватар или иконку, лучше использовать PNG с прозрачным фоном. Для баннеров и фона — JPG с качеством 80–90%, чтобы сбалансировать вес и чёткость.

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

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

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

Заключение

Обрезка фото в Figma — это не просто техническая операция, а важный элемент современного дизайнерского workflow. Использование масок и Frame Clipping позволяет гибко управлять визуальным контентом, сохраняя при этом качество и возможность правок. Главное — понимать различия между подходами и выбирать тот, что лучше соответствует задаче.

• Всегда используйте маски для сложных форм и Frame Clipping для простых прямоугольных блоков.
• Следите за порядком слоёв: сначала изображение, потом маска.
• Дважды щёлкайте по маске, чтобы редактировать положение фото.
• Используйте компоненты для массовой обработки одинаковых элементов.
• Экспортируйте с учётом формата и масштаба, чтобы сохранить качество.