Руководства по стилю, экспорт 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.
2. Генератор руководств стиля Figma
Вставьте ссылку на документ Figma в эту веб-форму, и этот генератор создаст страницу руководства по стилю, основанную на всех шрифтах, цветах и других стилях, которые вы использовали. Узнайте больше о том, как это работает здесь, от его создателя Liam Martens, основателя дизайн-студии Freighter.
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.
5. Синхронизация проектов Figma с компонентами React
Одна из возможностей API, которая нас больше всего волнует – это возможность автоматического преобразования Figma в другие фреймворки. Мы уже видим это: PageDraw представила интеграцию React, а Sara Vieira – фронт-енд разработчик из Португалии, нашла способ отображать компоненты React непосредственно из файла Figma используя вышеупомянутый GraphQL connector, над которым она работала (?).
Демо-версия 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, которые автоматизируют экспорт дизайна
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.
Перевод статьи Carmel DeAmicis
Топ коментарі (0)