Как вставить свое фото в Figma?

Вставить своё фото в Figma можно четырьмя основными способами: перетаскиванием файла с компьютера на канву, через меню «Place Image» (Shift+Ctrl+K на Windows или Shift+Cmd+K на Mac), через заливку фигуры изображением или с помощью копирования изображения из буфера обмена (Ctrl+V). Figma поддерживает форматы PNG, JPG, WEBP, SVG, GIF и даже HEIC. Фото сохраняется внутри документа и синхронизируется с облаком — не нужно хранить исходные файлы локально.

Способ 1: Drag & Drop (перетаскивание) — самый быстрый

Просто откройте папку с фото на вашем компьютере, захватите мышкой файл и перенесите его на открытое поле Figma (на канву или во фрейм). Figma автоматически создаст новый слой (image) с оригинальным размером фото. Если перетащить несколько файлов одновременно — они вставятся все сразу, выстроившись горизонтально или вертикально в зависимости от того, куда вы их бросили.

Совет: удерживайте Shift во время перетаскивания, чтобы изображение автоматически масштабировалось, сохраняя пропорции (впрочем, Figma и так сохраняет пропорции при изменении размера угловыми маркерами).

Способ 2: Place Image (меню или горячие клавиши)

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

• Через меню: Верхняя панель → иконка фигур (рядом с текстом) → выберите пункт «Place Image» (или «Изображение» в русской версии).
• Горячие клавиши: Нажмите Shift + Ctrl + K (Windows) или Shift + Cmd + K (Mac).
• После этого курсор превратится в крестик. Нажмите на канву — фото вставится с дефолтным размером. Или нажмите и растяните прямоугольник — изображение заполнит этот прямоугольник.

Способ 3: Заливка фигуры изображением

У вас уже есть прямоугольник, круг или кастомная форма (например, иконка), и вы хотите использовать фото как фон.

1. Выделите фигуру.
2. В правой панели (раздел «Fill» / «Заливка») нажмите на значок изображения (четыре квадратика) или кликните на цветовой прямоугольник.
3. В выпадающем меню выберите «Image» (вместо Solid или Gradient).
4. Нажмите «Choose image» и выберите файл на диске.
5. Фото заполнит всю фигуру. В этом же меню можно настроить режим: Fill (заполнить с обрезкой), Fit (вписать целиком), Tile (замостить), Crop (как в Photoshop), Stretch (растянуть).

Этот способ хорош для создания аватарок, карточек товаров или фотографий внутри прототипа.

Способ 4: Копирование из буфера обмена

Если фото уже открыто в другой программе (браузер, просмотрщик, редактор):

1. Скопируйте изображение (правой кнопкой мыши «Копировать изображение» или Ctrl+C в редакторе).
2. Перейдите в Figma и нажмите Ctrl+V (или Cmd+V).
3. Изображение появится на канве как новый слой.

Ограничение: так нельзя вставить фото из Photoshop с буфером обмена, который содержит много слоёв — лучше сохранить как PNG.

Как вставить фото из Figma Community, браузера или Unsplash

Figma имеет встроенную интеграцию с Unsplash (бесплатный сток) и позволяет копировать изображения прямо из браузера:

• Unsplash: В Figma нажмите на иконку фигур, выберите «Place Image», затем в диалоговом окне перейдите на вкладку «Unsplash». Тысячи бесплатных фото — кликните на понравившееся, и оно вставится автоматически.
• Из браузера: Откройте сайт с нужным фото, нажмите на нём правой кнопкой → «Копировать изображение». Затем в Figma вставьте как обычно (Ctrl+V).
• Плагины: Установите плагин «Pexels», «Google Images» или «Stock Photos» — они позволят искать и вставлять фото прямо из интерфейса Figma.

Что делать после вставки: настройка и обрезка

Когда ваше фото уже на канве, вы можете:

• Изменять размер: потянуть за угловые маркеры (пропорции сохраняются по умолчанию).
• Обрезать (Crop): дважды кликните по изображению, появятся маркеры кадрирования. Либо выберите слой и нажмите Enter (или дважды кликните) — перейдёте в режим редактирования заливки.
• Применять эффекты: смешивание (Multiply, Screen, Overlay), размытие, корректировка яркости, контрастности (вкладка «Effects»).
• Заменить фото: не удаляя слой, нажмите на картинку, в панели «Fill» нажмите на миниатюру фотографии и выберите «Choose new image» — новое фото подхватит те же размеры и обрезку.

Сохранение и экспорт вставленных фото

Figma хранит все изображения внутри документа. Если вы отправите ссылку на Figma-файл коллеге, он увидит фото, даже если исходные файлы с вашего компьютера будут удалены. Чтобы сохранить фото из Figma обратно на диск:

• Выделите слой с изображением → правая кнопка мыши → «Export» → выберите формат PNG, JPG, SVG или PDF.
• Или используйте панель «Export» в правой части интерфейса (добавить 1x, 2x).

Проблемы и их решение

• Фото не вставляется (пустое место): проверьте, не превышает ли размер файла лимит Figma (максимум 15 МБ для бесплатного тарифа). Оптимизируйте фото (сожмите через TinyPNG).
• Изображение выглядит размытым: Figma показывает предварительный просмотр в низком разрешении, чтобы экономить ресурсы. При экспорте картинка будет полного качества. Также можно увеличить масштаб (Zoom) — отображение подтянется.
• Тормозит при вставке больших фото: бесплатный тариф имеет ограничение на объём изображений для каждого документа. Используйте ссылки на внешние ресурсы или уменьшите DPI фото до 72 (всё равно для макетов этого достаточно).
• Фото не отображается у других пользователей: убедитесь, что вы работаете в онлайн-документе, а не локально. Если у вас бесплатный тариф и файл перегружен — загрузите фото заново.

Таблица: способы вставки фото в Figma

Итог: вставка фото в Figma — задача на 5 секунд

Figma предлагает удобные и гибкие способы добавления своих фотографий: от простого перетаскивания до заливки фигур с обрезкой. Выберите тот, который подходит под вашу задачу. Если вы работаете в команде, помните, что все изображения сохраняются в облаке и не занимают место на вашем диске. А для ускорения работы используйте горячие клавиши — Shift+Ctrl+K или просто перетаскивайте файлы.