Заливка изображением в Figma: режимы Fill, Fit, Crop и Tile
В Figma нет отдельного типа слоя для картинки. Изображение — это заливка: фото накладывается на прямоугольник, эллипс, текстовый слой или вектор. Отсюда и главная особенность: рамка и картинка живут отдельно, и почти всё поведение задаётся режимом заливки.
Как добавить картинку
Перетащите файл на холст — Figma создаст прямоугольник нужного размера с этой заливкой.
Перетащите файл прямо на фигуру — картинка станет её заливкой, а размеры, радиусы и эффекты фигуры сохранятся.
Или выберите фигуру, откройте Fill в правой панели, переключите тип на Image и нажмите Upload from computer.
Четыре режима
Откройте Fill, щёлкните по миниатюре изображения. В выпадающем списке рядом с превью — четыре режима: Fill, Fit, Crop, Tile.
Режим сохраняется при масштабировании слоя: если вы растянете рамку, картинка поведёт себя по правилам выбранного режима.
Fill
Изображение масштабируется так, чтобы полностью закрыть слой. Всё, что не поместилось, обрезается.
Это режим по умолчанию и правильный выбор для карточек, обложек и аватаров: пустых полей не остаётся.
Минус — часть картинки теряется. Если на фото важны края, Fill их съест.
Fit
Изображение целиком помещается внутрь слоя, ничего не обрезается.
Плата за это — пустые поля по двум сторонам, если пропорции не совпадают.
Fit нужен для логотипов, скриншотов и схем, где нельзя терять ни пикселя.
Crop
Режим ручного кадрирования. Вы видите область картинки целиком, а синими маркерами задаёте видимое окно.
Кадрирование не разрушающее: обрезанная часть не удаляется, её можно вернуть, потянув маркеры обратно.
Это главное отличие от «обрезать и забыть» в растровом редакторе.
Tile
Изображение повторяется узором и заполняет весь слой.
Размер плитки задаётся в процентах от исходных размеров картинки.
Режим нужен для паттернов, текстур и декоративных фонов. Для фотографий он почти никогда не подходит.
Как кадрировать
Выделите слой с заливкой и дважды щёлкните по нему, чтобы включить инструмент Crop.
Или нажмите Crop image в разделе Image в правой панели.
Или щёлкните по образцу в Fill и переключите режим на Crop.
Маркеры и пропорции
По умолчанию пропорции картинки сохраняются. Чтобы менять их свободно, удерживайте Control или Fn.
Опция или Alt при перетаскивании маркера двигает противоположную сторону симметрично.
Кнопка Resize to fit подгоняет рамку кадрирования под размер слоя.
Применение и отмена
Щёлкните по холсту или нажмите Enter, чтобы применить кадр.
Escape отменяет кадрирование и возвращает исходное состояние.
Позже можно снова открыть Crop и растянуть маркеры наружу — картинка вернётся в кадр.
Перемещение внутри рамки
В режиме Crop наведите курсор на затемнённую область и перетащите её — картинка сдвинется внутри окна.
Это не меняет границы слоя, только положение изображения.
Поворот
Наведите курсор на внешний угол кадра, появится значок поворота. Shift поворачивает с шагом 15 градусов.
Поворот тоже часть настроек заливки, а не отдельная операция над слоем.
Быстрое кадрирование
Зажмите Command или Ctrl и потяните за угол картинки — кадр включится сразу, без двойного щелчка.
Это самый быстрый способ подрезать фото в макете.
Замена картинки
Перетащите новый файл на образец в разделе Fill или на превью в палитре — изображение заменится.
Настройки заливки сохранятся: режим, кадрирование, положение.
Это экономит время при подборе фото под готовый макет.
Замена в экземпляре компонента
Выберите слой с картинкой внутри экземпляра и замените заливку так же.
Новая картинка станет переопределением только для этого экземпляра. Главный компонент не изменится.
Вернуть исходное изображение можно через Reset в меню экземпляра.
Корректировки
В палитре заливки есть ползунки экспозиции, контраста, насыщенности, яркости и температуры.
Это не замена обработке в редакторе, но позволяет быстро подогнать фото под макет, не выходя из файла.
Корректировки применяются к заливке, поэтому не затрагивают другие слои с тем же файлом.
Связь с масками
Crop работает похоже на маску: он скрывает часть изображения, не удаляя её.
Для сложных форм используют настоящие маски — о них в статье о масках слоёв.
Связь с ресайзом
Режим заливки сохраняется при изменении размера слоя, но поведение рамки задают constraints.
Если карточка должна тянуться, а картинка — оставаться в кадре, настраивайте и то и другое.
О constraints — в статье о поведении слоёв при ресайзе.
Экспорт
При экспорте кадр выгружается так, как он виден в макете, вместе с кадрированием и корректировками.
О форматах и масштабе — в статье об экспорте ассетов.
Где ломается
Картинку нельзя двигать. Режим Fill или Fit, а не Crop.
Появились пустые поля. Выбран Fit при несовпадающих пропорциях.
Фото растянулось. Слой масштабировали с выключенным сохранением пропорций.
Кадр «съехал» после замены. Новое фото других пропорций.
Пропала часть картинки. Режим Fill обрезал края.
Узор повторяется. Включён Tile.
Что выбрать в макете
Простое правило: если пустое поле в макете выглядит как ошибка — Fill; если потеря края картинки недопустима — Fit. Логотипы, скриншоты интерфейса и схемы почти всегда требуют Fit, даже ценой полей: обрезанный логотип заказчик заметит быстрее, чем пустую полосу. Карточки товаров, обложки статей и аватары — Fill, потому что там важна ровная сетка. Crop нужен там, где важна композиция кадра: портрет, обложка, постер. Tile — редкий гость, но незаменим для паттернов.
Как не разрушить макет при замене фото
Замена картинки сохраняет режим и кадр только тогда, когда новое изображение близко по пропорциям. Если пропорции сильно отличаются, Figma подстроит кадр под рамку, и композиция изменится. Поэтому при подборе фото для готового макета проверяйте пропорции исходника заранее: соотношение сторон видно в файле до перетаскивания. Второй приём — заменить картинку и сразу открыть Crop, чтобы поправить кадр вручную, не откладывая это на потом.
FAQ
Чем Fill отличается от Fit?
Fill закрывает весь слой с обрезкой, Fit показывает картинку целиком с полями.
Кадрирование разрушающее?
Нет, обрезанную часть можно вернуть.
Как заменить фото?
Перетащить новый файл на образец в разделе Fill.
Можно ли двигать картинку внутри рамки?
Да, в режиме Crop.
Как быстро включить кроп?
Command или Ctrl плюс перетаскивание угла.