Веб-API Figma

Ура! Figma предоставляет нам веб-API и открывает для нас очень широкие возможности. Одна из вещей, которые я упустил в Sketch, когда перешел на Figma, - это возможность писать плагины, экспериментируя с ними. Теперь у нас есть эта функция, и для меня она даже лучше, потому что она написана на JavaScript, ха-ха

Поговорим о практике. Итак, когда я узнал, что Figma выпустила веб-API, я перешел на https://www.figma.com/developers/docs#intro и начал искать способ начать с API. Моя цель состояла в том, чтобы получить файл JSON, это очень полезно, например, когда у вас есть дело с дизайн-библиотекой, но я не нашел скрипта, который я мог бы скопировать / вставить и проверить сам, только описание API, это определенно полезно, но когда вы уже знали, как получить JSON. Но я нашел несколько примеров на GitHub here.

Я покажу вам сценарий, и мы его разберем, покажем, как вы можете его отфильтровать.

Простой скрипт

Вот простой скрипт для получения базового файла JSON со структурой проекта.

Что здесь происходит? С технической точки зрения, под капотом находится Fetch API https://developer.mozilla.org/ru/docs/Web/API/Fetch_API/Using_Fetch и метод await. Https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait

Figma API JSON three - тестовый пример
Вот простой пример скрипта над JS и результат в консоли. Он показывает целые три JSON. jsbin.com/nexagil/2/edit?js,console

В скрипте для получения файловой структуры нам понадобятся две вещи или два ключа:

1. Токен персонального доступа

2. Идентификатор файла

И с этими двумя ключами и несколькими строками кода придет волшебство. Теперь мы могли анализировать наш JSON разными способами - получать страницы, монтажные области, версию и многое другое. Остальное - подробности 😎

Пример фильтра JSON

Также легко фильтровать ваш JSON. Давайте отфильтруем JSON и получим только страницы.

Нам нужно создать пустой объект, чтобы позже добавить наши страницы внутрь.

let pagesJSON = {};

Затем давайте создадим переменную для страниц. Чтобы сначала получить страницы из JSON, вам нужно знать, как выглядит структура JSON в Figma. Это выглядит так

В этой структуре нам нужны родительский ключ «документ» и «дочерний» ключ для страниц.

let pages = figmaTreeStructure.document.children;

Теперь создайте новый параметр в pagesJSON и пустой массив внутри

pagesJSON.pages = [];

Последняя часть - это цикл, мы просматриваем все страницы, получаем их имена и вставляем внутрь массива pagesJSON.pages.

for (var i in pages) {
    pagesJSON.pages.push(pages[i].name)
};

JSON из проекта файла figma

Чтобы продемонстрировать мощь Figma API, я сделал эту веб-страницу в качестве эксперимента https://pavellaptev.github.io/JSON-from-Figma

На этой странице вы можете получить полную структуру JSON, только страницы и вложенные монтажные области, страницы или монтажные области, а также отфильтровать все монтажные области по имени флага.

JSON от figma
Эта страница не хранит и не собирает ваши личные токены 😊 pavellaptev.github.io

У него уже есть тестовый токен и идентификатор файла для демонстрации. Надеюсь, это будет полезно. Не стесняйтесь создавать проблемы здесь

Https://github.com/PavelLaptev/JSON-from-Figma/issues

Как веб-API Figma может улучшить мою работу?

Один из моих коллег спрашивает меня, когда я прошу его протестировать мою страницу выше: «Хорошо, API, я понимаю… хорошо… но зачем нам это?»

Дело не в API, а в том, что с этим можно было делать. Реализаций предостаточно. Например, файл JSON может улучшить вашу работу за счет автоматизации, вам не нужно каждый раз переписывать и копировать / вставлять каждую монтажную область вручную, чтобы создать отставание библиотеки дизайна, которое вы могли бы получить, и отфильтровать JSON из вашей библиотеки разными способами, это почти не имеет ограничений. Это намного проще и может сэкономить ваше время на кофе-брейк.

Хорошего дня и да пребудет с тобой сила 💪