Как экспортировать всю графику из Figma
Изображения из Figma можно экспортировать или по одному, или выбрать сразу несколько слоев в панели с зажатым ctrl. Но разнообразных слоев, их групп, фреймов и уровней вложенности может довольно много и выбор нужных изображений с зажатым ctrl может оказаться затруднительным.
Работу можно слегка упростить, если использовать плагин Select Layers.
Плагин позволяет выделять слои по названию, типу или какому-то общему признаку, например, все заблокированные слои.
Но нас интересуют изображения. Запустите плагин, выберите в нём Select Images. В результате будут выделены все слои с растровой графикой. Теперь их можно экспортировать обычным способом через панель Export.
Нюансы использования
Все изображения Фигма экспортирует в один выбранный формат. Можно выбрать сразу несколько форматов, но при этом все изображения будут во всех выбранных форматах. То есть не получится так просто одни картинки получить в png, а другие в jpg. Разделять придется ручками.
С другой стороны, плагин выберет все графические слои и следующим действием можно ручками снять выделение с ненужных. Возможно, это окажется быстрее, чем искать их по макету.
Второй возможный минус — это название слоёв. Если дизайнер не позаботился назвать их нормально, то верстальщикам придётся делать это за него. Либо предварительно переименовать слои либо возиться потом с названиями файлов.
Как экспортировать всю векторную графику из Figma
Аналогично можно было бы поступить и с векторной графикой, выбрав опцию Select Vector Layers.
Почему я пишу «бы»?
Потому что плагин действительно выберет все векторные слои. Но очень часто картинка состоит из нескольких кривых, каждую из которых плагин считает векторным слоем. В итоге мы получим совсем не то, что хотели бы.
Но если дизайнер позаботился о верстальщике и подготовил макет к вёрстке, поработал с названиями групп и слоев, то можно воспользоваться опцией Select Similar Layers и найти похожие слои и затем экспортировать как SVG обычным способом средствами Фигмы.
Если найдете более удобный способ экспортировать всю графику из макета, напишите через форму обратной связи или любой из мессенджеров, дополню статью.