Как экcпортировать все файлы из Figma

Дисклеймер

Нашел код на Reddit, поправил одну ошибку и скачал с его помощью все файлы. Доверился автору скрипта, за безопасность не отвечаю.

В статье скриншоты и видео записаны в Macos. Если у вас Windows, что-то может отличаться. Скриншоты для операций Windows я взял из гугла. Если они неактуальные, пишите в личку @daniilpostnov. Заменю.

Постарался писать как можно проще, для непрограммистов. Тем без моей инструкции будет легко, а дизайнерам будет сложнее, так как это другая область.

Если что-то не получается, спрашивайте в личке или в комментариях. Занимает примерно 15 минут.

Проблема

Надо скачать все файлы из Figma, но нет кнопки экспорта. Есть только экспорт файлов вручную по одному.

Решение

Использовать код, который позволит автоматизировать скачивание.

⚠️ Это код не скачивает файлы из Drafts. Их надо перенести в проект. Если у вас бесплатный аккаунт, у вас не получится воспользоваться кодом. Нужно будет скачивать вручную. Советую оплатить Figma на один месяц, добавить проект, положить туда все файлы и выгрузить их. Я написал автору скрипта, возможно он допишет код, чтобы решить эту проблему.

Как оплатить фигму из России. Сам этими методами не пользовался, так как есть зарубежная карта. На свой страх и риск.

Как создать проект?

Порядок действий

1. Если в Drafts есть файлы — добавить их в проект.
2. Скачать архив с кодом по ссылке и распаковать его
3. В файл вписать: логин, пароль, токен доступа, путь до папки, куда будут загружаться файлы
4. Создать папку, куда будет выгружаться файлы
5. Найти ID аккаунта в Figma
6. Запустить две команды в терминале
7. Ждать, пока все скачается
8. Докачать вручную те файлы, что не скачаются автоматически

Скачиваем код

👉 Скачать архив с кодом

Архив нужно распаковать, зайти внутрь папки и найти файл .env

Заполняем файл .env

Этот файл скрытый. Если вы его не видите, надо включить показ скрытых файлов.

Как включить показ скрытых файлов

На Macos комбинация в папке — CMD + SHIFT +. (точка)

На Windows — Вид → Скрытые элементы

Кликаем по нему два раза, он отекроется в текстовом редакторе. В каком — зависит от вашей системы и наличия редакторов. Та файл выглядит внутри.

Если он вдруг будет пустой — вставьте туда этот текст.

FIGMA_EMAIL="email@example.com"
FIGMA_PASSWORD="hunter2"
FIGMA_ACCESS_TOKEN="figd_abcdefghijklmnopqrstuvwxyz"
DOWNLOAD_PATH="/Users/anonymous/Downloads" # Абсолютный путь до папки, куда скачаются ваши файлы
WAIT_TIMEOUT=10000 # Время в милисекундах для ожидания между загрузками

Что вставлять в строки

1. Логин
2. Пароль. Если заходите через гугл, то зайдите на страницу входа, нажмите восстановить пароль и установите новый пароль. Ваш вход через гугл не затронет.
3. Токен. Где его найти — ниже.
4. Путь до папки. Создаем папку в загрузках и прописываем путь до неё. Как скопировать путь — ниже.
5. Время между загрузками я не трогал. Оставил 10 000.

Где взять токен

Где взять токен

Как скопировать путь до папки

Как скопировать путь до папки

Вам нужно будет создать новую папку, куда будут скачиваться файлы. Я назвал свою FigmaExportResult

На Macos нажимаете Option и кликаете на папке правой кнопкой мыши. На выходе у меня получилось /Users/daniilpostnov/Downloads/FigmaExportResult. Это и надо вставить в строку DOWNLOAD_PATH.

На Windows. Взял с гугла. Проверяйте на месте.

Находим и копируем id аккаунта в фигме

Сохраните, пусть где-то рядом будет.

Авторизуйтесь в аккаунте Figma в браузере и из адресной строки возьмите ID вашего аккаунта. Он идет сразу что после files/team/

Запустить две команды в терминале

Показано для Macos. На Windows ±тоже.

1. Открываете Terminal
2. Пишите cd и закидываете папку в окно Terminal
3. Нажимаете Enter
4. Вводите npm install, чтобы установить недостающие пакеты
5. Пишем команду формирования списка файлов npm run get-team-files наш-id-аккаунта
6. Пишем команду старта загрузки npm start

Ждем, пока все скачается

Начало загрузки выглядит так. Список файлов, где написан проект, файл и время, которое было потрачено на скачивание.

Если все файлы будут скачаны успешно, в конце будет такой экран

Докачать вручную те файлы, что не скачаются автоматически

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

На выходе получится структура вашего figma-аккаунта

Мои результаты

Скачалось 400/425 файлов. 25 не скачались, выгрузил вручную.

Итоговая папка весит 17ГБ. Скачалось за 4.5 часа.

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

У одного из дизайнеров пояилась проблема. При запуске скрипта у него открывалось приложение Figma с первым макетом из списка, скрипт завершалеся с ошибкой. Ничего не экспортировалось. Мы нашли проблему — у вас должна быть отключена вот это галочка. Ссылки не должны автоматом открываться в приложении.

Почему так? Скрипт работает так: он в фоне открывает браузер, авторизуется там и нажимает у каждого файла: File → Save fig. Он делает это в браузере. Но если в программе выбран параметр открытия ссылки в приложении, то когда фоновый браузер скрипта открывает ссылку, у вас открывается приложение и всё ломается.

Подписывайтесь на канальчики, может там годнота попадется

Про дизайн и за жизнь:
@devpostnov

Про фриланс:
@nuance_freelance