Чтобы обрезать картинку в Фигме, дважды кликните по изображению на холсте: включится режим Crop. Потяните синие маркеры по краям, оставьте нужный кусок кадра и нажмите Enter или кликните по пустому месту холста.
Обрезка в Figma ничего не удаляет: спрятанная часть картинки остаётся в файле, и кадр можно поменять в любой момент. Фигуры, фреймы и фон обрезаются другими инструментами, их разберём ниже по порядку. Если вы только осваиваете редактор, начните с подробной инструкции, как пользоваться Figma.
CheckroiПодборка курсов по Figma353 курса • 55 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как обрезать картинку в Фигме по шагам
В Figma у картинки нет отдельного слоя-фото, как в Фотошопе. Изображение лежит заливкой внутри прямоугольника или другой фигуры, поэтому и обрезка работает с заливкой. Тем, кто привык к рамке в Фотошопе, логика покажется непривычной, для сравнения вот как обрезать фото в Фотошопе. Порядок действий по справке Figma такой:
- Выделите слой с картинкой.
- Включите обрезку одним из трёх способов: дважды кликните по изображению, нажмите Crop image в разделе Image правой панели или откройте образец заливки в разделе Fill и смените режим на Crop.
- Потяните синие маркеры по краям и углам. Для точного размера есть выбор пропорций Aspect ratio.
- Нажмите Enter или кликните по любому месту холста, и обрезка применится.
Пока режим обрезки включён, работают модификаторы. Они пригодятся, когда кадр нужно подогнать под конкретный блок макета.
| Что нужно | Windows | macOS |
|---|---|---|
| Обрезать сразу с двух противоположных сторон | зажать Alt | зажать Option |
| Быстро обрезать без входа в режим Crop | Ctrl + тянуть за угол | Cmd + тянуть за угол |
| Повернуть кадр с шагом 15° | зажать Shift при повороте | зажать Shift при повороте |
По умолчанию пропорции картинки при обрезке сохраняются. Поэтому маркер и тянет картинку сразу по двум осям: так задумано, это не ошибка программы.
Чтобы обрезать с другими пропорциями, зажмите Control / Fn, пока тянете маркер.
Как вернуть обрезанную часть и поменять кадр
Обрезанная область в Фигме не исчезает, она просто скрыта. Обрезка в Figma неразрушающая: вернуться к полному кадру можно в любой момент.
Чтобы поправить уже обрезанную картинку, снова дважды кликните по ней. Дальше доступны три операции:
- Сдвинуть изображение внутри рамки: наведите курсор на бледную, скрытую часть картинки и перетащите её.
- Повернуть: наведите курсор на внешний угол, появится значок поворота. С Shift угол меняется шагами по 15°.
- Изменить размер: наведите курсор на край изображения и потяните.
Если нужно вернуть картинку целиком, проще всего поменять режим заливки. В настройках изображения их четыре:
| Режим | Что делает | Когда выбирать |
|---|---|---|
| Fill | Растягивает картинку на всю фигуру, лишнее может обрезать | Обложки, баннеры, фон блока |
| Fit | Показывает картинку целиком, даже если фигура заполнена не вся | Логотипы, скриншоты, схемы |
| Crop | Даёт вручную выставить границы видимой части | Нужен конкретный фрагмент кадра |
| Tile | Повторяет картинку узором по всей фигуре | Паттерны и фоновые текстуры |
Ещё одна особенность: размер самой картинки в Figma не меняется. Вы масштабируете фигуру, а изображение подстраивается под неё по выбранному режиму.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяКартинка по фигуре и по кругу
Прямоугольная обрезка подходит для обложки, но аватарка, круглое фото в карточке или картинка в форме звезды делаются иначе. Здесь работает маска: фигура снизу задаёт форму, а всё, что лежит над ней, видно только внутри её контура.
Порядок из справки по маскам:
- Нарисуйте фигуру нужной формы: круг, прямоугольник или многоугольник.
- В панели Layers перетащите фигуру под картинку. Маска действует только на слои, которые лежат выше неё.
- Выделите оба слоя с зажатым Shift.
- Справа нажмите More options → Use as mask или сочетание Ctrl + Alt + M на Windows, Control + Cmd + M на Mac.
Figma соберёт из слоёв группу-маску. Картинку внутри можно двигать отдельно от формы: маска и изображение лежат на одном уровне, как соседние слои.
Мягкий край и картинка внутри текста
У маски есть тип, по умолчанию стоит Alpha. Он учитывает прозрачность формы: чем непрозрачнее участок маски, тем больше видно картинки. Сменить тип на Vector или Luminance можно в выпадающем списке раздела Mask правой панели.
На прозрачности построен приём с растушёванным краем. Добавьте фигуре-маске размытие Layer blur, и край фото станет мягким, как виньетка.
Маской может быть и текстовый слой. Наберите крупное слово, положите его под фотографию и примените Use as mask: картинка останется только внутри букв. Так делают обложки и заголовки для соцсетей. А если надпись должна идти по дуге, пригодится инструкция как сделать текст по кругу в Фигме.
Круглое фото без маски
Если нужна одна круглая картинка, маска не обязательна. Нарисуйте круг, откройте его заливку в разделе Fill и вместо цвета поставьте изображение.
Нужный фрагмент кадра выставите в режиме Crop, как в первом разделе. Так же удобно делать аватарки для карточек отзывов и команды. В PowerPoint похожий приём называется обрезкой по фигуре, он разобран в статье как обрезать фото в PowerPoint.
По произвольному контуру
Чтобы вырезать объект с фотографии, например человека или товар, обведите его инструментом Pen. Замкните контур, опустите его под фото и снова примените Use as mask.
Решение для сложных краёв вроде волос: уберите фон нейросетью, об этом ниже. Перо даёт аккуратный край на предметах с чёткими границами, на пушистых краях оно проигрывает. Работу с пером и масками по шагам разбирают на онлайн-курсах по Figma, обычно в первых модулях.
Маска не меняет пиксели. Если позже понадобится снять её, выделите маску и нажмите то же сочетание или кликните правой кнопкой → Remove mask, и скрытые части вернутся.
CheckroiПодборка курсов для UX/UI-дизайнеров100 курсов • 32 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как обрезать фигуру в Фигме
С векторной фигурой маска тоже работает, но чаще удобнее булевы операции. Они вычитают или пересекают формы и собирают результат в одну группу, которую можно править и дальше.
Например, чтобы срезать у круга нижнюю половину, положите поверх него прямоугольник, выделите оба слоя и выберите Subtract selection. Операции собраны в меню Boolean operations, у каждой есть сочетание по справке Figma:
| Операция | Что остаётся | Windows | macOS |
|---|---|---|---|
| Union selection | Общий контур всех фигур | Alt + Shift + U | Option + Shift + U |
| Subtract selection | Нижняя фигура минус всё, что её перекрывает | Alt + Shift + S | Option + Shift + S |
| Intersect selection | Только область пересечения | Alt + Shift + I | Option + Shift + I |
| Exclude selection | Всё, кроме пересечения | Alt + Shift + E | Option + Shift + E |
Важно, какой слой лежит снизу. При вычитании остаётся именно нижняя фигура, и её заливка с обводкой переходят на результат.
Булевы операции неразрушающие: внутри группы можно двигать и менять размер исходных фигур. Разобрать группу обратно можно через правый клик → Ungroup. Применить их можно к фигурам, векторным контурам и тексту, а к фреймам и секциям нельзя.
Когда нужен Flatten
Если обрезанную фигуру надо превратить в один обычный вектор, например чтобы передать иконку разработчику в SVG (форматы экспорта разобраны в статье как сохранить проект в Фигме), используйте Flatten: правый клик → Flatten или Alt + Shift + F (Option + Shift + F на Mac).
Flatten, в отличие от булевых операций, разрушающий. Разделить слои после него уже нельзя, спасёт только Ctrl+Z или история версий.
Про откат подробно рассказали в статье как сделать шаг назад в Фигме.
Обрезка фрейма через Clip content
Бывает, что спрятать нужно всё, что вылезает за границу экрана макета. Для этого у фрейма есть настройка Clip content. Она прячет содержимое за пределами фрейма.
- Выделите фрейм.
- Откройте вкладку Design в правой панели.
- В разделе Layout поставьте галочку рядом с Clip content.
Теперь потяните край фрейма внутрь, и всё, что окажется снаружи, скроется. Сами объекты остаются в файле целыми, их можно сдвинуть обратно. Так удобно подрезать первый экран, когда собираете макет сайта своими руками.
У этой настройки есть ещё одна роль. Маска перестаёт действовать на слои, когда доходит до фрейма с включённым Clip content, поэтому фрейм удобно использовать как границу для масок, чтобы они не захватывали лишнее.
Если нужно разделить фрейм на части, то есть разрезать один экран на несколько, обрезка не поможет. Создайте нужное число фреймов поменьше и перенесите в них объекты, а колонки удобно разметить сеткой в Фигме.
CheckroiПодборка курсов по Adobe Photoshop458 курсов • 46 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Удаление фона с картинки
Убрать фон вокруг человека или товара теперь можно без плагинов. В Figma Design для этого есть функция Remove background на базе Figma AI:
- Выделите одну или несколько картинок.
- На дополнительной панели инструментов нажмите Remove background.
- Проверьте край объекта: Figma оставит главный предмет кадра, а фон уберёт.
Функция доступна и на бесплатном тарифе Starter, но тратит кредиты Figma AI. По таблице кредитов одно удаление фона стоит от 1 до 5 кредитов. На бесплатном тарифе полное место получает 500 кредитов в месяц, при этом действует дневной лимит 150 кредитов.
Учтите ограничение для России. Figma не продаёт платные тарифы новым клиентам из России и не проводит для них оплату, поэтому докупить кредиты не выйдет. Бесплатный тариф при этом работает.
Кредиты кончились или край вышел грубым? Фон можно убрать в другой программе и вставить готовый PNG. Как это сделать, мы показали в инструкции как удалить фон с картинки в Фотошопе. А если вырезанный объект нужен вектором, пригодится разбор трассировки изображения.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКакой способ обрезки выбрать
Инструментов несколько, и путаются в них из-за того, что все они «обрезают». Выбирайте по тому, что именно нужно спрятать:
| Задача | Инструмент | Можно откатить |
|---|---|---|
| Оставить кусок фотографии прямоугольником | Crop (двойной клик по картинке) | Да |
| Сделать круглое фото или аватарку | Заливка круга картинкой или маска | Да |
| Вырезать предмет по контуру | Pen и Use as mask | Да |
| Срезать часть векторной фигуры | Subtract или Intersect selection | Да, через Ungroup |
| Получить один чистый вектор | Flatten | Только Ctrl+Z или история версий |
| Спрятать всё за краем экрана | Clip content у фрейма | Да |
| Убрать фон вокруг объекта | Remove background | Да, через Ctrl+Z |
Если сомневаетесь, начинайте с неразрушающего варианта. Маска и Crop ничего не стирают, а к Flatten лучше переходить в самом конце, когда форма точно утверждена.
Частые ошибки при обрезке в Figma
Большинство проблем с обрезкой связаны с порядком слоёв и типом объекта. Вот что встречается чаще всего:
| Что происходит | Почему | Что сделать |
|---|---|---|
| Двойной клик открывает правку точек вместо режима Crop | Выделен вектор или группа, слой с картинкой остался внутри | Выберите сам слой изображения в панели Layers |
| После маски пропала вся картинка | Фигура-маска лежит над изображением | Перетащите фигуру ниже картинки в Layers |
| Маска обрезала соседние слои | Маска действует на все слои над ней до конца группы или фрейма | Соберите маску и картинку в отдельную группу или фрейм |
| Пункт Boolean operations неактивен | Выделены фреймы или секции либо выбран один слой | Выделите минимум две фигуры, вектора или текста |
| Объекты вылезают за край экрана | У фрейма выключен Clip content | Включите галочку в разделе Layout |
| Не получается выделить маску | Её границы по умолчанию не видны | Включите контуры масок: Figma → View → Mask outlines |
Обрезка в Figma не уменьшает исходный файл картинки, скрытая часть хранится в макете. Поэтому перед экспортом выделяйте именно тот слой или фрейм, который нужен в готовом файле.
Где освоить Figma системно
Обрезку, маски и булевы операции можно разобрать за вечер. Компоненты, автолейаут и прототипы требуют уже последовательной программы с практикой и разбором ошибок, ради этого обычно и идут на курс.
Ниже курсы, где Figma проходят с нуля до рабочих проектов. Полный список с ценами и сроками собран в каталоге курсов по Figma, а если думаете о профессии целиком, загляните в статью как стать UX/UI-дизайнером.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Основы дизайна в Figma Перейти на сайт курса |  Bonnie & Slide | 42 800 ₽ | 2366 ₽/мес. | 4 недели | Обзор курса |
| Figma 2.0 Перейти на сайт курса |  Skillbox | 29 394 ₽ | 4899 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса |  Академия Синергия | 31 836 ₽ | 2653 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса | Skillbox | 39 334 ₽ | 1091 ₽/мес. | 2 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по Figma
