Как в figma обрезать фото

В дизайне интерфейсов точность и чистота визуала — не просто пожелание, а необходимость. Фотографии, которые выходят за рамки макета, перегружают композицию, отвлекают от ключевых элементов и разрушают целостность макета. В Figma, как в профессиональном инструменте для UX/UI-дизайна, обрезка изображений — базовая, но критически важная операция. Она позволяет адаптировать фото под любую форму: круг, прямоугольник, сложный полигон или даже архитектурный контур. Многие новички пытаются обрезать изображения в Photoshop, а затем импортировать результат — это лишняя стадия, снижающая гибкость и увеличивающая время работы. В Figma всё можно сделать в одном окне, без потери качества и с возможностью быстрой корректировки.

Зачем обрезать фото в Figma, а не в Photoshop?

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

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

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

Обрезка в Figma — это операция маскирования. Она работает по принципу «фигура сверху — фото снизу». Ниже — пошаговая инструкция для новичков:

1. Загрузите изображение в Figma: перетащите файл из проводника или используйте File > Import.
2. Создайте фигуру, которая будет определять форму обрезки: прямоугольник, круг, звезда, произвольный путь — всё подходит. Для круглых аватаров лучше использовать эллипс.
3. Разместите фигуру точно поверх изображения. Убедитесь, что она полностью перекрывает ту часть фото, которую хотите оставить.
4. Выделите и фигуру, и изображение (удерживайте Shift при выборе).
5. Нажмите Ctrl+Shift+M (Windows) или Cmd+Shift+M (Mac) — или найдите кнопку Mask в правой панели свойств.
6. Фото автоматически обрежется по контуру фигуры. Фигура станет маской — её можно редактировать, перемещать, изменять форму, а фото будет адаптироваться в реальном времени.

Если вы случайно обрезали не то изображение — просто выберите маску и нажмите Release Mask (в том же меню). Это не удалит фото — оно вернётся в исходное состояние.

Продвинутые техники обрезки: круги, полигоны, текст

Круги и овалы — стандарт для аватаров

Круглая обрезка — самая частая задача. Используйте эллипс, зажмите Shift при рисовании, чтобы получить идеальный круг. Затем разместите его поверх фото и примените маску. Чтобы фото центрировалось в круге, используйте Align Center в панели свойств — это гарантирует, что важная часть изображения (лицо, логотип) не будет обрезана.

Полигоны и сложные формы

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

Обрезка текстом — эффект «текст из фото»

Это один из самых эффектных приёмов. Сделайте текст (например, крупное слово «ПРОДАЖИ»), преобразуйте его в контур через Right-click > Convert to Vector, затем поместите поверх фото и примените маску. Результат — текст, заполненный изображением. Такой приём часто используется в рекламных баннерах и заголовках. Важно: после преобразования текст становится вектором и больше не редактируется как текст — сохраните копию, если планируете менять содержание.

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

Даже опытные дизайнеры допускают типичные ошибки при обрезке. Вот основные из них:

• Ошибка 1: Выделили изображение и фигуру, но забыли нажать Mask — фото осталось необрезанным. Решение: Всегда проверяйте, появилась ли маска в структуре слоёв — она будет отображаться как вложенный объект под изображением.
• Ошибка 2: Фигура слишком мала — обрезается только кусочек фото. Решение: Используйте Fit to Frame (в свойствах изображения), чтобы автоматически масштабировать фото под маску.
• Ошибка 3: Маска применяется к группе, а не к изображению. Решение: Убедитесь, что вы выделяете именно изображение + одну фигуру. Если изображение в группе — распакуйте его перед маскированием.
• Ошибка 4: После маски изображение стало размытым. Решение: Это происходит при масштабировании низкокачественного фото. Всегда используйте изображения с разрешением не ниже 2x от конечного размера в макете.

Маска vs. Clip — в чём разница?

В Figma есть два способа «обрезать» изображение: маска (Mask) и клип (Clip). Они выглядят одинаково, но работают по-разному.

• Mask — это векторная фигура, которая определяет, какая часть изображения видна. Фигура остаётся редактируемой. Вы можете менять форму, размер, положение — и фото автоматически подстраивается. Это гибкий, рекомендуемый метод.
• Clip — это ограничение видимой области по границе самого изображения. Он работает только с прямоугольными рамками. Если вы измените размер изображения, Clip автоматически обрежет его по новым краям. Но если вы захотите обрезать фото под круг — Clip не поможет.

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

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

• Используйте Components — создайте один обрезанный элемент как компонент, затем дублируйте его. Все экземпляры будут использовать одну маску — это экономит память.
• Не используйте изображения выше 3000×3000 пикселей, если они не требуются. Figma загружает их полностью в память.
• Сжимайте фото перед импортом через TinyPNG или Squoosh — это ускоряет работу и снижает размер файла проекта.
• Если маска сложная (например, с множеством точек), упрощайте её через Object > Simplify — это уменьшает нагрузку на рендер.

Экспертное мнение: как дизайнеры используют маски на практике

Дмитрий также подчёркивает важность согласованности: если вы обрезаете аватары пользователей в круг, делайте это для всех — без исключений. Несогласованность в обрезке — один из главных признаков «недоделанного» интерфейса. Он рекомендует создавать стиль-гайд по обрезке: «Круглые аватары — 48px, прямоугольные карточки — 16:9, текстовые маски — только для заголовков».

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

Заключение

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

• Обрезка в Figma — это маскирование, а не кадрирование: изображение остаётся нетронутым.
• Всегда используйте Mask, а не Clip — это даёт полный контроль над формой и масштабом.
• Компоненты с масками — ключ к масштабируемости при работе с десятками фото.
• Текст как маска — мощный инструмент для визуальных акцентов, но требует осторожности.
• Ошибки в обрезке — признак неопытности; их легко избежать с помощью Align и Fit to Frame.