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

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

Основы маскирования в Figma

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

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

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

Как работает система слоёв

Figma строит отображение элементов по принципу «последний сверху». То есть, если вы поместили изображение над фигурой, оно будет отображаться полностью. Чтобы активировать маску, нужно, чтобы фигура была *над* изображением, но при этом сама маска применяется к нижележащему объекту. Это достигается через группировку: вы объединяете изображение и фигуру в одну группу, после чего применяете маску.

В панели слоёв вы увидите иерархию: группа → маска (фигура) + содержимое (изображение). Фигура визуально исчезает, превращаясь в «область видимости». Её можно редактировать — менять размер, форму, положение — и изменения сразу отразятся на отображаемой части изображения.

Пошаговая инструкция: как обрезать изображение по фигуре

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

1. Загрузите изображение в ваш файл Figma с помощью перетаскивания или команды «File → Place Image» (Ctrl+Alt+K).
2. Создайте фигуру, по которой вы хотите обрезать изображение. Это может быть прямоугольник, эллипс, многоугольник или произвольный контур, нарисованный Pen Tool.
3. Разместите изображение так, чтобы нужная часть находилась внутри будущей маски. Вы можете временно сделать фигуру полупрозрачной, чтобы точнее позиционировать изображение.
4. Выделите сначала изображение, затем, удерживая Shift, выделите фигуру. Убедитесь, что фигура выделена последней (она должна быть «верхним» слоем в выделении).
5. Нажмите Ctrl+7 (Windows) или Cmd+7 (Mac), либо выберите в верхнем меню Create Mask.
6. Готово! Изображение теперь обрезано по форме фигуры. Вы можете редактировать маску: изменять её размер, двигать изображение внутри маски, добавлять эффекты.

Изменение и редактирование маски

Одно из главных преимуществ Figma — возможность редактировать маску после её создания. Достаточно дважды щёлкнуть по замаскированному объекту, и вы попадёте внутрь группы. Там можно:

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

Если вы хотите временно отключить маску, выделите группу и нажмите Ctrl+Shift+7 (или Cmd+Shift+7 на Mac). Это разгруппирует маску, но сохранит структуру слоёв.

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

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

Один из продвинутых способов — использование Boolean операций перед созданием маски. Вы можете объединить несколько фигур с помощью Union, Subtract, Intersect или Exclude, получить сложный контур и использовать его как маску. Это особенно полезно при создании нестандартных форм: например, обрезка фото по силуэту логотипа или по фигуре с вырезами.

Маска из текста: как сделать

Да, вы можете обрезать изображение по форме текста. Для этого:

• Напишите текст с нужным шрифтом и размером;
• Преобразуйте его в векторные контуры: выделите текст и нажмите Ctrl+Shift+O (или Cmd+Shift+O);
• Поместите изображение под текст (в панели слоёв);
• Выделите оба объекта и нажмите Ctrl+7.

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

Частые ошибки и как их избежать

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

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

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

Проблемы с производительностью

При использовании множественных масок, особенно с большими изображениями, файл Figma может начать тормозить. Чтобы минимизировать нагрузку:

• Используйте оптимизированные изображения (не 50 Мп с камеры);
• Не применяйте маски к очень большим группам без необходимости;
• Удаляйте неиспользуемые маски и скрытые слои.

Экспорт и совместимость масок

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

Однако есть нюансы. Например, при экспорте в SVG векторная маска может не всегда корректно интерпретироваться в браузерах. Чтобы избежать проблем:

• Проверяйте экспорт в разных средах;
• Для критически важных элементов экспортируйте как PNG с прозрачностью;
• Если нужна максимальная совместимость, используйте растр, а не вектор.

Разработчики, получающие макеты, должны понимать, что маска — это не изображение, а эффект. В коде это реализуется через CSS-свойства: clip-path, mask-image или overflow: hidden. Figma автоматически генерирует кодовые сниппеты, которые можно скопировать во вкладке «Dev Mode».

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

Интервью с Дмитрием Смирновым, арт-директором цифрового агентства «Вектор»

«Маскирование — один из тех инструментов, который кажется простым, но на деле определяет качество всей работы. За 12 лет в дизайне я видел, как один и тот же макет выглядел по-разному только из-за того, как были обрезаны изображения. В Figma мы активно используем маски не только для красоты, но и для скорости.

Например, у нас есть системный компонент „Card with Image“, где изображение автоматически маскируется под закруглённый прямоугольник. Это экономит часы времени при создании каталогов. Главное — не бояться экспериментировать. Попробуйте обрезать фото по форме сердца, капли или силуэта. Часто такие решения становятся визитной карточкой проекта.

Но помните: маска — не панацея. Если вы каждый раз вручную обрезаете изображение, значит, у вас нет системы. Используйте компоненты, переменные и авто-расположение. Современный дизайн — это не только креатив, но и эффективность.»

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

Заключение

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

• Маскирование в Figma — неразрушающий процесс, позволяющий в любой момент изменить изображение или форму.
• Для обрезки используйте комбинацию Ctrl/Cmd+7 после правильного выделения фигуры и изображения.
• Сложные формы можно создавать через Boolean-операции или конвертацию текста в контуры.
• При экспорте учитывайте совместимость: PNG для надёжности, SVG для векторов.
• Интегрируйте маски в дизайн-системы через компоненты для повышения эффективности.