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

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

Зачем обрезать изображение в Figma

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

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

Когда нужно обрезать изображение

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

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

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

Выбор метода зависит от типа проекта, частоты правок и требований к адаптивности. Например, маскирование лучше подходит для статичных элементов, а фреймы — для динамических компонентов, особенно при работе с Auto Layout.

Сравнение методов обрезки

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

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

Шаг 1: Подготовка изображения и фигуры

1. Загрузите изображение в Figma с помощью перетаскивания или через меню File → Place Image.
2. Создайте фигуру, которая будет служить маской: например, прямоугольник (R) или эллипс (O).
3. Разместите фигуру поверх изображения, выровняв по нужным границам.

Шаг 2: Применение маски

1. Выделите одновременно изображение и фигуру (удерживайте Shift или Ctrl).
2. Щёлкните правой кнопкой мыши и выберите Use as Mask (или нажмите Ctrl+Alt+M).
3. Изображение автоматически обрежется по форме фигуры.

Шаг 3: Редактирование и замена

• Чтобы изменить положение изображения внутри маски, войдите в режим редактирования маски (двойной клик).
• Перемещайте, масштабируйте или поворачивайте изображение.
• Чтобы заменить изображение, просто перетащите новое поверх старого — оно примет ту же маску.
• Для выхода из режима редактирования нажмите Esc.

Как обрезать изображение через Frame

Если вы работаете с Auto Layout или создаёте адаптивные компоненты, использование обычного маскирования может быть ограничено. В таких случаях лучшим решением станет обрезка через Frame.

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

Шаги обрезки через Frame

1. Создайте новый Frame (F) нужного размера.
2. Поместите изображение внутрь Frame (перетащите или вставьте).
3. Убедитесь, что свойство Clips content включено (иконка ножниц в правой панели Inspector).
4. Перемещайте изображение внутри Frame, чтобы выбрать нужную область.

Преимущества использования Frame

• Поддержка Auto Layout и вариантов компонентов.
• Автоматическое обрезание без дополнительных действий.
• Лёгкая замена изображений — достаточно перетащить новое.
• Возможность группировки с другими элементами (текст, иконки).

Совместное использование фигур и изображений

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

Как создать векторную маску

1. Импортируйте или нарисуйте векторную фигуру (например, с помощью Pen Tool).
2. Преобразуйте её в компонент или оставьте как отдельный объект.
3. Поместите изображение сверху и примените Use as Mask.
4. При необходимости отредактируйте точки вектора для точной подгонки.

Работа с прозрачностью и эффектами

После маскирования вы можете добавлять тени, размытие или градиенты к самой маске или к изображению. Однако важно помнить:

• Эффекты применяются к маске как к целому объекту.
• Размытие изображения возможно только через плагины или внешнюю обработку.
• Тени будут обрезаны, если включено Clips content.

Типичные ошибки и как их избежать

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

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

• Причина: неверный порядок объектов или неправильное выделение.
• Решение: убедитесь, что фигура находится выше изображения в иерархии (Layers panel). Выделите сначала изображение, затем фигуру, и примените маску.

Ошибка 2: Изображение не двигается внутри маски

• Причина: не активирован режим редактирования.
• Решение: дважды щёлкните по изображению, чтобы войти в маску. Теперь можно свободно перемещать содержимое.

Ошибка 3: Маска исчезает после группировки

• Причина: группировка нарушает иерархию маски.
• Решение: не используйте Group (Ctrl+G) для масок. Вместо этого используйте Frame или оставляйте маску как есть.

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

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

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

Заключение

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

• Используйте маскирование для точного контроля формы обрезки.
• Применяйте Frame при работе с Auto Layout и адаптивными компонентами.
• Всегда проверяйте порядок слоёв перед применением маски.
• Не бойтесь комбинировать методы — например, Frame + маска.
• Экспортируйте обрезанные изображения в нужном формате без потери качества.