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

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

Русского языка в интерфейсе Figma нет, поэтому названия кнопок даны по-английски с переводом в скобках, в разных версиях подписи могут отличаться. Клавиши в шагах указаны для Windows, на Mac вместо Ctrl нажимайте Cmd, а вместо Alt нажимайте Option. Исключения: маска включается через Control+Cmd+M, а слой на задний план уходит по Cmd+Option+[. Обрезка и маска доступны на всех тарифах, нужно только право редактировать файл.

Какой способ выбрать и как вернуть обрезанное

Для одного изображения мы бы начинали с Crop: область кадра можно передвинуть позже. Заранее обрезать снимок в другом графическом редакторе не советуем, потому что в Figma лишняя часть остаётся. Исключение: исходник со стороной больше 4096 пикселей. Такой объект Figma автоматически уменьшит пропорционально, а часть метаданных файла может потеряться, поэтому, если нужен фрагмент в исходном разрешении, обрежьте его до загрузки, например, в фотошопе.

Crop: обычная обрезка изображения

Сначала добавьте изображение на холст: перетащите файл JPG, PNG или WebP либо вставьте его из буфера. В Figma изображение служит заливкой: после вставки оно становится заливкой нового прямоугольника. Инструмент обрезки работает как раз с такой заливкой.

1. Выделите слой с изображением.
2. Включите режим обрезки одним из трёх способов: дважды щёлкните по слою, нажмите Crop image (обрезать изображение) в разделе Image на правой панели либо кликните по образцу в разделе Fill (заливка) и выберите режим Crop.
3. Потяните синие маркеры по краям. Вместо этого можно задать значение ползунком или выбрать соотношение сторон кадра в списке Aspect ratio.
4. Кликните по холсту или нажмите клавишу Enter.

Пропорции изображения при обрезке в Figma сохраняются по умолчанию. С зажатым Alt меняются сразу противоположные стороны. Для быстрой обрезки зажмите Ctrl и потяните за угол изображения. Если маркеры не появились, включите режим двойным щелчком.

После Enter режим закрыт. Чтобы поправить результат, снова дважды щёлкните по слою. Маркеры разводятся до нужного края. На бледной части снимка появляется значок перемещения, и изображение можно двигать. Наведя курсор на внешний угол, можно повернуть изображение. С клавишей Shift поворот идёт шагами по 15 градусов.

Как обрезать картинку под фрейм

Фрейм в Figma (Frame, рамка) скрывает всё, что выходит за его границы, если включён Clip content (обрезать содержимое). Объект меньше фрейма при перетаскивании становится его частью, а объект больше фрейма нет, поэтому создайте фрейм вокруг самого изображения.

1. Выделите изображение и нажмите Ctrl+Alt+G (Frame selection). Вокруг объекта появится фрейм.
2. Выберите новый фрейм на холсте или в панели слоёв (Layers).
3. Откройте вкладку Design на правой панели и в разделе Layout проверьте, стоит ли галочка Clip content. Если нет, поставьте.
4. Зажмите Ctrl и потяните угол фрейма либо впишите размер в поля W и H. С клавишей Ctrl размер меняется без учёта ограничений (constraints) вложенного объекта.
5. Чтобы показать другую часть, перетащите изображение внутри фрейма, удерживая пробел: так оно останется вложенным в этот фрейм.

Полное изображение вернёт снятая галочка Clip content. Сам фрейм убирают клавишами Ctrl+Shift+G. Готовый фрейм можно выгрузить в нужном формате, настройки описаны в статье как сохранить в Фигме.

Второй способ: сделать изображение заливкой готового фрейма. Создайте фрейм инструментом Frame (клавиша F или A), на правой панели кликните по образцу в разделе Fill, выберите Image, затем Upload from computer (загрузить с компьютера). В режиме Fill изображение займёт весь фрейм. Если пропорции снимка и фрейма различаются, Figma может обрезать лишнее, а режим Fit покажет снимок целиком. Такой вариант подойдёт, например, для карточки товара, где фото служит фоном блока. Для затемнения такого фото под текстом пригодится градиент в фигме.

Как обрезать картинку по кругу или по фигуре

Создайте фигуру инструментом Rectangle (прямоугольник, клавиша R) или Ellipse (эллипс, клавиша O), а с зажатой клавишей Shift получится квадрат или круг. Затем выделите её, откройте Fill на правой панели, выберите Image и загрузите файл. Чтобы настроить положение изображения в фигуре, используйте режим Crop.

Для круглого аватара в Figma есть ещё два варианта. Первый: увеличьте Corner radius (радиус скругления) у слоя с изображением. Круг получится, только если слой квадратный. Второй: маска, она пригодится, когда снимок уже стоит в макете и загружать его заново не хочется.

Маска по фигуре

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

1. Нарисуйте фигуру поверх изображения.
2. Опустите её под изображение: Ctrl+Shift+[ или перетащите вниз в панели слоёв. Маска над объектом его не обрежет.
3. Выделите оба слоя, зажав Shift.
4. На правой панели выберите More options (другие параметры), затем Use as mask (использовать как маску), или нажмите Ctrl+Alt+M.

Figma создаст группу с маской. Маска и объект двигаются и меняют размер независимо друг от друга. Действует она на соседние слои выше неё, до границы родительского фрейма или группы либо до фрейма или компонента с включённым Clip content.

Чтобы отменить маску, кликните по ней правой кнопкой мыши и выберите Remove mask (убрать маску) или нажмите то же сочетание клавиш: скрытые части снова появятся.

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

Для произвольной формы или обрезки по кривой используйте инструмент Pen (перо, клавиша P).

1. Щёлкайте по краю нужной области. Для изгиба щёлкните и потяните мышь, задав длину и наклон кривой.
2. Чтобы замкнуть контур, наведите перо на первую точку и щёлкните.
3. Если заливки у контура нет, добавьте её в разделе Fill: маска типа Alpha, который стоит по умолчанию, работает по непрозрачности, и полностью прозрачная область ничего не покажет.
4. Опустите контур под изображение, выделите оба слоя и нажмите Ctrl+Alt+M.

Без маски тоже можно: залейте замкнутый контур через Fill и Image, изображение подходит как заливка и для векторного слоя. Так получится форма с картинкой внутри, а для обрезки точно по объекту на снимке нужна маска. Если нужно удалить задний план, посмотрите, как убрать фон в фигме.

Горячие клавиши

Частые вопросы

Удаляет ли Figma обрезанную часть картинки?

Нет. Инструмент Crop и маска ничего не удаляют: скрытая часть изображения остаётся в Figma, и её можно вернуть.

Почему картинка не попадает внутрь фрейма?

Вероятно, она больше фрейма: при перетаскивании Figma делает дочерним только объект меньшего размера. Выделите изображение и создайте фрейм вокруг него через Ctrl+Alt+G.

Почему маска ничего не обрезает?

Проверьте порядок в панели слоёв: фигура должна лежать под изображением. Посмотрите и на её заливку: при нулевой непрозрачности маска ничего не покажет.

Как обрезать картинку без потери пропорций?

В режиме Crop пропорции изображения сохраняются по умолчанию. Соотношение сторон кадра выберите в списке Aspect ratio.