Руководства по стилю, экспорт PDF и многое другое!

На случай, если вы не в курсе, в прошлом месяце мы выпустили Figma Platform с первым Web API для профессионального инструмента проектирования. Мы надеялись, что сообщество начнет развивать проект в новых направлениях, но не знали, чего ожидать.

Однако вам не понадобилось много времени. Уже через несколько дней вы наполнили наш фид в Twitter впечатляющими творениями. От генераторов руководств стилей до интеграции Alexa-Echo. Люди адаптируют API для множества рабочих процессов.

Мы хотели объединить несколько самых крутых проектов, которые мы видели с момента запуска API. Спасибо тем из вас, кто публикует свои работы на нашем канале Show & Tell на Spectrum.

Интеграции для дизайнеров

Эти проекты могут сразу же использовать другие люди — даже те, у кого нет навыков программирования. Прикрепите URL-адрес Figma в форме веб-сайта и творите волшебство (помните, что это всесторонние интеграции, поэтому Figma не отвечает за настройки разрешения или поддержку интеграции).

1. Figma PDF exporter

Благодаря новой API интеграции вы можете экспортировать дизайны Figma в формате PDF. Просто выберите фрейм, а затем скопируйте его в эту веб-форму. Если вы хотите создать такой инструмент для себя, просто сделайте форк GitHub-проекта с открытым исходным кодом, созданный Gweltaz Calori.

Figma PDF exporter

2. Генератор руководств стиля Figma

Вставьте ссылку на документ Figma в эту веб-форму, и этот генератор создаст страницу руководства по стилю, основанную на всех шрифтах, цветах и других стилях, которые вы использовали. Узнайте больше о том, как это работает здесь, от его создателя Liam Martens, основателя дизайн-студии Freighter.

Генератор руководств стиля Figma

3. Интеграция Alexa

Хотя мы сомневаемся, что много дизайнеров используют Alexa для чтения комментариев к своим дизайнам (не стесняйтесь доказать, что мы ошибаемся), этот пример выходит за пределы наших ожиданий использования Figma API. И если вы подключите свой Figma аккаунт к аналогичной функции, активируемой голосом, покажите нам, что вы с ней сделаете! Это создал Джон Голд — дизайнер-технолог в Airbnb.

Интеграция для разработчиков

Вы инженер, который задается вопросом, с чего начать работу с API Figma? API веб-дизайн может упростить автоматизацию передачи проекта от дизайнеров разработчикам. Посмотрите следующие проекты для вдохновения.

4. Figma.js

В дополнение к интеграции Alexa, Джон Голд создал неофициальную библиотеку для использования Figma API в Javascript. Она поможет вам быстро приступить к построению интеграции JS с Figma. Оболочка Джона уже используется для других программ, таких как open-sourced GraphQL connector, который позволяет людям писать запросы GraphQL вместо API Figma. GraphQL connector был создан дизайнером и разработчиком Bernardo Raposo совместно с Sara Vieira.

Figma.js

5. Синхронизация проектов Figma с компонентами React

Одна из возможностей API, которая нас больше всего волнует — это возможность автоматического преобразования Figma в другие фреймворки. Мы уже видим это: PageDraw представила интеграцию React, а Sara Vieira — фронт-енд разработчик из Португалии, нашла способ отображать компоненты React непосредственно из файла Figma используя вышеупомянутый GraphQL connector, над которым она работала (?).

Демо-версия React от Sara Vieira
Демо-версия React от Sara Vieira
Florian Nagel — инженер-программист в Candis, также создал свой собственный Figma → React конвертер, и он работает над открытым исходным кодом.

6. Volvo Car Mobility

Чтобы автоматизировать доставку ресурсов, команда дизайнеров и разработчиков Volvo Car Mobility использовала API Figma для упрощения рабочего процесса. С помощью пользовательских команд Slack дизайнер или разработчик может инициировать процесс, а веб-сервис за кулисами создает новую ветку в репозитории GitHub.

Оттуда веб-сервис использует Figma API для экспорта иконок в конкретный документ с параметрами экспорта для фреймов, содержащих иконки. Пользователь может просмотреть журнал событий и URL-адрес ветви для создания pull request, и всё это в Slack. Создатель: Volvo Car Mobility team

Команды Slack от Volvo Car Mobility, которые автоматизируют экспорт дизайна
Команды Slack от Volvo Car Mobility, которые автоматизируют экспорт дизайна

7. Figma OAuth2 Strategy для Passport

Если вы используете Passport в своем приложении Node. js для аутентификации, вы можете создать свою службу, чтобы пользователи могли войти на сайт используя свой Figma аккаунт при помощи этого модуля от Liam Martens (он также создал генератор руководств стилей ?).

8. Легко вызывайте Figma API из выбранного вами языка

Тем временем, David Siegel — сооснователь quicktype, нашел простой способ вызвать Figma API из Swift, Objective-C, Flow, TypeScript, JavaScript, C#, C++, Go, Rust, Java, Elm и Ruby. Он сгенерировал шрифты и код JSON на всех этих языках.

Это всего лишь часть созданных интеграций. Будет интересно посмотреть, насколько масштаб этих усилий будет развиваться с течением времени и какую роль он сыграет в формировании рабочих процессов проектирования как для отдельных лиц, так и для целых команд.

Мы собираемся продолжить эту интеграцию в будущих раундах, поэтому, если вы работаете над чем-то крутым, напишите на наш Spectrum-канал Show & Tell! А, если вы только собираетесь начать работу, ознакомьтесь с нашей документацией разработчика.

Спасибо Valerie Veteto.