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

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

Основы обрезки в Figma: как это работает

Figma не обрезает изображения так же, как Photoshop или GIMP. Здесь нет инструмента «Crop Tool» в классическом понимании. Вместо этого используется система маскирования: вы помещаете изображение внутрь фрейма, и только та часть, которая попадает в границы фрейма, остаётся видимой. Это называется «masking» — наложение маски.

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

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

Как включить маскирование

• Выберите фрейм, в который вы добавили изображение.
• В правой панели найдите раздел «Design».
• Найдите переключатель «Clip content» (обрезать содержимое) — он должен быть включён (цветной).
• Если переключатель выключен, всё содержимое фрейма будет выходить за его границы.

Когда «Clip content» активен, всё, что находится за пределами фрейма, становится невидимым. Это и есть ваша «обрезка».

Пошаговая обрезка изображения

Давайте рассмотрим стандартный сценарий: вы загрузили фотографию и хотите обрезать её под квадратную аватарку 100×100 px.

1. Создайте фрейм нужного размера. Нажмите F, выделите область 100×100 px. Можно использовать сетку или вручную ввести размеры в правой панели.
2. Загрузите изображение. Перетащите его из проводника или вставьте через Ctrl+V.
3. Поместите изображение внутрь фрейма. Перетащите его так, чтобы оно оказалось внутри границ фрейма. Или просто вставьте прямо в фрейм — Figma сама поместит его внутрь.
4. Активируйте маскирование. Убедитесь, что в настройках фрейма включён параметр «Clip content».
5. Отрегулируйте положение изображения. Кликните по изображению внутри фрейма и двигайте его, чтобы выбрать нужную часть.
6. Зафиксируйте результат. Готово — изображение «обрезано» и будет отображаться только в рамках фрейма.

Горячие клавиши для быстрой обрезки

• Ctrl+Alt+M — быстро применить или снять маску с выбранного фрейма.
• Shift + клик по изображению — выделить и изображение, и фрейм одновременно.
• Пробел + клик — временно перейти в режим просмотра, чтобы двигать холст, не теряя выделение.
• Ctrl+T — свободная трансформация (если нужно повернуть или растянуть изображение перед обрезкой).

Методы маскирования и кадровая обрезка

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

Прямоугольная маска

Самый распространённый метод. Подходит для карточек, аватаров, плиток. Работает через обычный фрейм с включённым «Clip content».

• Форма: прямоугольник (включая квадрат).
• Гибкость: высокая — легко менять размеры и позицию.
• Ограничение: нельзя сделать скруглённые углы без дополнительных действий.

Круглая и фигурная маска

Хотите обрезать изображение по кругу? Легко.

1. Нарисуйте круг (инструмент O).
2. Добавьте изображение поверх круга.
3. Выделите оба объекта (Shift + клик).
4. Нажмите Ctrl+Alt+M — круг станет маской.

Теперь изображение видно только в области круга. Аналогично можно использовать любую фигуру: треугольник, шестиугольник, сердце.

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

Иногда нужно обрезать несколько изображений одной маской. Например, коллаж или слайдер.

• Создайте фрейм нужного размера.
• Поместите внутрь несколько изображений.
• Включите «Clip content».
• Перемещайте изображения — только те части, что в пределах фрейма, будут видны.

Этот метод часто используется в прототипировании слайдеров и каруселей.

Совместное использование с Auto Layout и компонентами

Одно из главных преимуществ Figma — интеграция обрезки с Auto Layout и системой компонентов. Это особенно полезно при создании дизайн-систем.

Auto Layout и маскирование

Когда вы добавляете фрейм с маскированным изображением в контейнер с Auto Layout, важно понимать поведение:

• Фрейм с «Clip content» сохраняет свои размеры.
• Изображение внутри не влияет на размеры родителя.
• Вы можете задать фиксированную ширину/высоту или оставить «Hug contents», если нужно, чтобы фрейм подстраивался.

Например, в карточке товара изображение может быть строго 200×200 px, а текст под ним — растягиваться по содержимому. Auto Layout корректно это обработает.

Компоненты с обрезанными изображениями

Создаёте компонент кнопки с иконкой? Или профиль пользователя с аватаром?

• Создайте мастер-компонент с фреймом и маской.
• Установите изображение как override (переопределение).
• При использовании экземпляра можно заменить изображение — маска сохранится.

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

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

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

Ошибка 1: Изображение не обрезается

Причина почти всегда одна — отключён «Clip content».

• Проверьте правую панель.
• Убедитесь, что фрейм выбран (не изображение).
• Нажмите Ctrl+Alt+M — если маска не применялась, Figma активирует её.

Ошибка 2: Невозможно переместить изображение внутри маски

Если вы не можете сдвинуть картинку — возможно, она не внутри фрейма.

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

Ошибка 3: При экспорте обрезка не сохраняется

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

• Выделяйте фрейм, а не изображение.
• Используйте опцию «Export frame» в настройках экспорта.
• Проверьте формат: PNG, JPG или SVG (для векторных масок).

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

Анна также отмечает, что маскирование особенно эффективно в сочетании с Variants и Interactions. Например, при наведении курсора изображение может плавно сдвигаться — эффект «parallax» без кода.

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

Заключение

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

• Обрезка в Figma — это маскирование через фреймы с включённым «Clip content».
• Используйте Ctrl+Alt+M для быстрого применения маски.
• Любая форма может стать маской — прямоугольник, круг, вектор.
• Маски совместимы с Auto Layout и компонентами.
• При экспорте выбирайте фрейм, а не изображение, чтобы сохранить обрезку.