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

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

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

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

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

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

Способ 1: Маска с прямоугольником

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

1. Разместите изображение на холсте.
2. Создайте прямоугольник (R) точно такого же размера, как нужный вам контейнер.
3. Переместите прямоугольник так, чтобы он полностью накрывал ту часть изображения, которую вы хотите оставить.
4. Выделите оба объекта: сначала изображение, затем прямоугольник (удерживайте Shift при клике).
5. Нажмите Ctrl+Shift+M (или Cmd+Shift+M на Mac) — или кликните правой кнопкой и выберите «Mask».
6. Прямоугольник станет маской, а изображение обрежется по его границам.

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

Способ 2: Маска с произвольной формой

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

1. Нарисуйте нужную форму: круг (O), многоугольник, или используйте Pen Tool (P) для ручного рисования.
2. Убедитесь, что форма находится поверх изображения.
3. Выделите сначала изображение, затем форму (важно: порядок выделения критичен!).
4. Нажмите Ctrl+Shift+M.
5. Изображение автоматически обрежется по контуру формы.

Этот метод особенно полезен при создании аватаров, иконок с нестандартными формами или дизайна в стиле «cut-out». Например, если вы делаете карточку с фотографией в форме сердца — маска позволит сохранить форму, не обрезая края изображения вручную.

Способ 3: Обрезка с помощью Frame

Frame — это мощный инструмент, который в Figma выступает не только как контейнер, но и как естественная маска. Когда вы помещаете изображение внутрь Frame, оно автоматически обрезается по его границам.

1. Создайте Frame (F) нужного размера.
2. Перетащите изображение внутрь Frame — оно автоматически встанет в центр.
3. Если изображение не помещается — выберите его внутри Frame и нажмите Ctrl+Shift+M, чтобы включить маску вручную.
4. Используйте «Fill» в свойствах изображения: выберите «Fill» вместо «Fit» или «Stretch» — это обеспечит полное покрытие области.

Преимущество этого метода в том, что Frame можно сделать адаптивным. Например, если вы используете Auto Layout внутри Frame, обрезка будет сохраняться даже при изменении размеров контейнера.

Способ 4: Использование Auto Layout и масок

В современном дизайне редко встречаются статичные изображения. Чаще всего они встроены в динамические компоненты, которые меняют размер в зависимости от контента. Здесь важно, чтобы маска реагировала на изменения.

1. Создайте Frame с Auto Layout (в панели свойств выберите «Auto Layout»).
2. Поместите изображение внутрь Frame.
3. Установите для изображения параметр «Fill» — это заставит его заполнять всю доступную область.
4. Включите маску: выделите изображение и Frame, нажмите Ctrl+Shift+M.
5. Теперь, когда вы меняете ширину или высоту Frame, изображение будет автоматически перерисовываться внутри маски.

Этот метод особенно полезен при создании библиотек компонентов — например, карточек с аватарками в списке пользователей. При замене изображения в экземпляре компонента маска сохранится, а изображение подстроится под форму.

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

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

• Неправильный порядок выделения. Если вы сначала выделяете маску, а потом изображение — Figma применит маску к маске, а не к изображению. Результат: ничего не обрежется. Решение: всегда выделяйте сначала изображение, потом маску.
• Изображение не заполняет маску. Если вы используете «Fit» вместо «Fill», изображение останется в центре с пустыми полями. Решение: в свойствах изображения выбирайте «Fill».
• Маска не сохраняется при экспорте. Иногда при экспорте PNG изображение экспортируется с белым фоном, хотя маска была применена. Решение: убедитесь, что маска включена, а не удалена. Используйте «Export» → «PNG» → «Include mask».
• Обрезка по неправильной форме. Если вы используете сложную маску (например, с кривыми), но не проверяете её в режиме «Preview», могут появиться артефакты. Решение: всегда включайте «Preview» (Ctrl+Shift+P) и просматривайте результат в реальном времени.

Экспертное мнение: как обрезать профессионально

Часто задаваемые вопросы

Заключение

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

Все четыре метода — через прямоугольник, произвольную форму, Frame и Auto Layout — имеют свои сценарии применения. Начните с простого — маски с прямоугольником — и постепенно переходите к сложным компонентам. Помните: правильная маска — это не только то, что скрыто, но и то, что показано.

• Используйте маски (Ctrl+Shift+M), а не прямое обрезание — это сохраняет исходные данные.
• Всегда выделяйте изображение первым, затем маску — иначе операция не сработает.
• Для динамических компонентов используйте Frame + Auto Layout + маску — это будущее масштабируемого дизайна.
• Проверяйте экспорты: маска должна быть включена в PNG и SVG.
• Превращайте часто используемые маски в компоненты — это сэкономит сотни часов.