Как экспортировать изображения из Figma

При верстке макетов, сделанных в Figma, одним из важных моментов является экспорт изображений. Здесь может быть несколько ситуаций, в которых изображения экспортируются по разному.

1. Экспорт одного изображения
2. Экспорт нескольких изображений
3. Экспорт группы
4. Экспорт исходного изображения, использованного в качестве заливки
5. Экспорт фреймов Figma в PDF-формат

Экспорт одного изображения

Для того чтобы экспортировать одно изображение, которое чаще всего находится внутри группы слоев, нужно выделить его с нажатой клавишей CTRL. В этом случае вы выделяете тот слой, который  находится под курсором мыши.

Экспорт из Figma одного изображения

В настройках экспорта вы можете выбрать его размер и формат файла: PNG, JPG, SVG или PDF. Фото с прозрачностью сохраняют обычно в формате PNG, без прозрачности - в JPG, с векторными формами (логотипы, иконки) - в формате SVG.

Экспорт, или сохранение изображения из макета выполняется нажатием на кнопку Export photo (вместо photo  вы увидите название слоя с изображением или группы слоев).

Обратите внимание на изображение на скриншоте. Для него добавлен эффект тени, который останется при сохранении картинки во время экспорта и который лучше добавить с помощью css-свойства box-shadow. Чтобы отключить эффект наложения тени, переместитесь в блок Effects выше блока Export и нажмите на иконку в виде глазика.

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

Изображения размером от 1x до 4x

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

Экспорт из Figma слоя с градиентом вместо изображения

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

Экспорт нескольких изображений

Самый простой вариант экспорта нескольких изображений - это, когда все они лежат в одной группе (фрейме) в виде ряда последовательных слоев. Тут достаточно просто выделить все нужные слои в панели слоев с зажатой клавишей Shift, либо какую-то часть из них с зажатой клавишей Ctrl и экспортировать сразу zip-архив со всеми изображениями.

Экпорт нескольких слоев из одной группы в Figma

На скриншоте выше не самый удачный пример в плане выбора изображений для экспорта, т.к. все они помещены в прямоугольники со скругленными углами в виде заливки, а боковые фото вообще обрезаны, чтобы макет лучше выглядел. Однако при верстке вам придется делать из этих фото карусель, например, как в Bootstrap, и обрезанные фото не подойдут. Поэтому в этом макете экспортировать изображения из Figma придется с помощью панели Inspect.

Второй распространенный вариант экспорта нескольких изображений - когда они размещены не только на разных слоях, но и в разных группах. В этом случае первое изображение мы выделяем с нажатой клавишей CTRL, а все остальные - с нажатыми клавишами  CTRL + Shift, последовательно добавляя изображения к уже выделенным. При этом стоит контролировать в панели слева, какие именно слои попали в выделение, чтобы не экспортировать полупрозрачные или градиентные слои, созданные для эффектов наложения дизайнером.

Экспорт группы

Достаточно часто изображение может состоять в макете из нескольких слоев. Часть из них может быть векторными объектами, часть - фото-изображениями. Составляющие изображение слои могут быть собраны в один фрейм или группу. Вы можете сразу экспортировать этот фрейм или группу, как единое изображение, но что делать, если часть слоев в нем (ней) вам не нужна?

Несколько нужных слоев в Figma можно выделить  с клавишей Shift и экспортировать их в виде zip-архива в нужном формате. На скриншоте выбран экспорт в формат PNG.

После распаковки архива вы увидите 3 изображения с именами, соответствующими названиям слоев:

В том случае, когда нужно экспортировать все слои, как единое изображение, нужно создать из них группу, нажав клавиши Ctrl + G, и выполнить экспорт для нее, выделив ее в панели слоев. В этом случае вы также загрузите zip-архив, но в нем будет одно изображение.

Тогда изображение будет содержать все слои, которые были собраны в группу:

Экспорт одного изображения-группы из Figma

Экспорт исходного изображения, использованного в качестве заливки

В том случае, если вам не подходит изображение, экспортированное из Figma в том виде и размере, который был добавлен в макет дизайнером, то получить его нужно не через экспорт, а через код элемента в панели Inspect.

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

Изображение, как заливка

При экспорте мы получим изображение такого вида:

Экспортированное изображение

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

Открываем изображение по ссылке

В итоге получим такое изображение в новой вкладке браузера, которое можно легко сохранить в любую папку на компьютере.

Экспорт фреймов Figma в PDF-формат

В том случае, если вам нужно выслать документ в PDF-формате клиенту или использовать все файлы для открытия в Photoshop, такая функция тоже предусмотрена в Figma.

Для этого вам необходимо выделить нужные фреймы, кликнуть на иконку Figma  в левом верхнем углу и в меню File выбрать пункт Export Frames to PDF. После этого вам нужно будет просто сохранить PDF-файл на компьютере, если это не происходит автоматически в вашем браузере.