Figma как обрезать картинку

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

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

Как работает маскирование в Figma

В Figma нет кнопки «Обрезать», потому что платформа не изменяет исходный пиксельный массив изображения. Вместо этого применяется принцип маскирования: изображение помещается внутрь другого объекта (фигуры, фрейма), а всё, что выходит за его границы, скрывается. Этот механизм аналогичен CSS-свойству overflow: hidden, но реализован визуально и динамично.

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

Важно понимать, что маска — это не статичная операция. Вы можете в любой момент:

• Перемещать изображение внутри маски;
• Менять размер маски;
• Заменить изображение, сохранив форму обрезки;
• Применить эффекты (теней, размытия) к самой маске.

Такая гибкость делает Figma идеальным инструментом для создания адаптивных компонентов и систематизации дизайна.

Что можно использовать в качестве маски?

Не каждая фигура в Figma подходит для маскирования «из коробки». Чтобы объект стал маской, он должен соответствовать определённым условиям:

• Быть отдельным слоем или фреймом;
• Иметь чётко заданную геометрию (замкнутый контур);
• Не быть частью группы без активированной маски.

На практике чаще всего используются:

1. Фреймы — универсальный выбор, особенно при создании сеток или карточек.
2. Эллипсы — для круглых аватаров, иконок, кнопок.
3. Прямоугольники с закруглёнными углами — стандарт для большинства UI-элементов.
4. Произвольные пути — при помощи Pen Tool можно создать уникальную форму.

Пошаговая обрезка изображения через маску

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

Шаг 1: Добавьте изображение в проект

Перетащите файл (JPG, PNG, SVG) в рабочую область Figma. Или используйте меню File → Place Image. Изображение появится как отдельный слой.

Шаг 2: Создайте фигуру-маску

Выберите инструмент (например, Rectangle, Ellipse) и нарисуйте фигуру нужного размера и формы. Убедитесь, что она находится на том же уровне слоёв, что и изображение.

Шаг 3: Поместите изображение внутрь фигуры

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

Шаг 4: Активируйте маску

Выделите фигуру (не изображение!), затем нажмите правой кнопкой мыши и выберите Create Mask (или используйте сочетание Ctrl+Alt+M / Cmd+Option+M). Фигура станет серой с диагональной штриховкой — это визуальный индикатор активной маски.

Шаг 5: Настройте положение изображения

Теперь вы можете перемещать изображение внутри маски, чтобы выбрать нужную часть. Увеличьте масштаб, чтобы точно выставить центровку. Обратите внимание: масштабирование самого изображения также возможно, но оно не влияет на качество — Figma хранит оригинал.

Особенности обрезки по кругу и сложным контурам

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

Обрезка по кругу: два способа

Первый — через эллипс:

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

Второй — через прямоугольник с максимальным radius:

• Создайте квадрат.
• Установите все corner radius = 50% от стороны.
• Добавьте изображение и примените маску.

Оба метода дают одинаковый результат, но первый предпочтительнее — он проще и не зависит от пропорций.

Сложные формы: Boolean и Pen Tool

Для обрезки по форме стрелки, капли или многоугольника:

1. Нарисуйте нужный контур с помощью Pen Tool.
2. Или объедините несколько фигур через Boolean operations (Union, Subtract).
3. Поместите изображение внутрь полученной фигуры.
4. Примените маску.

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

Даже при простом процессе маскирования новички часто сталкиваются с проблемами. Ниже — самые частые ошибки и способы их решения.

Ошибка 1: Маска не работает

Причина: изображение не вложено в фигуру. Решение — перетащите слой с картинкой внутрь слоя с фигурой в панели Layers. Без вложенности маска не активируется.

Ошибка 2: Изображение исчезло после маскирования

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

Ошибка 3: Нельзя редактировать форму маски

Если вы применили маску, но хотите изменить контур — сделайте двойной щелчок по маске, чтобы войти в режим редактирования. Там можно менять точки, радиусы, размеры.

Ошибка 4: Маска применяется к группе, а не к фигуре

Figma не позволяет использовать группу как маску напрямую. Сначала объедините фигуры через Boolean, или преобразуйте группу в одну фигуру (Ctrl+Alt+G / Cmd+Option+G).

Экспертные советы для профессионалов

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

Используйте компоненты с масками

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

Автоматические layout и маски

Если вы используете Auto Layout, поместите замаскированное изображение внутрь фрейма с Auto Layout. Это позволит маске адаптироваться под размеры контейнера, особенно в горизонтальных каруселях.

Экспорт изображений с масками

Figma экспортирует только видимую часть замаскированного изображения. Вы можете задать параметры экспорта (PNG, JPG, SVG) и указать crop to content. Это удобно для подготовки assets.

Анимация масок в прототипах

Figma позволяет анимировать маски. Например, вы можете сделать эффект «раскрытия» изображения через изменение размера маски. Используйте Smart Animate с типом Transition: Resize.

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

Заключение

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

• Маскирование — основной способ обрезки изображений в Figma.
• Изображение должно быть вложено в фигуру перед активацией маски.
• Маски можно редактировать, заменять и использовать в компонентах.
• Избегайте типичных ошибок: проверяйте вложенность и положение изображения.
• Используйте маски в связке с Auto Layout, компонентами и прототипированием.