Помимо дизайн-систем, у github.com/react-figma/re… есть еще интересные интерсные применения, о чем расскажу в треде ->
Библиотеку можно использовать для автоматизации рутинных дизайнерских операций, можно легко строить интеграции различных API с фигмой. Есть пример с фетчингом данных в репозитории: github.com/react-figma/re…
В addtivika.ru мы разрабатываем настольную игру для обучения 3D-печати, в которой есть множество карточке - с принтерами, лабораториями и тому подобным.
Карточек довольно много - 100 штук, но все они укладываются в 4 вида шаблонов.
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEod_BjhWEAIZzI-.jpg?table=block&id=8e5215b9-2dca-4d0a-bc34-58bf91dfb2e9&cache=v2)
Дизайн делается в Фигма и по сути дела он двойного назначения:
Выгрузка карточек на печать в PDF
Возможность поиграть в игру прямо в Figma, перетаскивая карточки как компоненты из панели ассетов. Это стало очень востребовано, когда пошел ковид.
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEod_01TXYAAMsvg.jpg?table=block&id=a22a84a1-0fbf-473a-a585-7bc576fe3321&cache=v2)
Поддерживать кучу карточек в актуальном состоянии и тем более вносить изменения в их дизайн оказалось трудной задачей, поскольку при серьезных изменениях приходилось менять все карточки
Мы пришли к решению этой проблемы:
Сложили все карточки в виде строк в Airtable, каждый признак - это колонка.
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEoeAvsaXcAAxfu8.png?table=block&id=012037d1-1234-482d-8832-3fe76ad78294&cache=v2)
Airtable удобен своим API, и большим числом типов данных для ячеек. Например, там есть файл-аплоад. airtable.com/developers
Для того, чтобы выгрузить данные в фигму, подняли проект из бойлерплейта github.com/react-figma/re…
Определили компоненты для карточек и их стили. Проект не в опен-сорсе, но могу показать, например, компонент для карточки принтера: gist.github.com/ilyalesik/ca34…
Визуально он выглядит вот так:
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEoeCtwCW8AAF8MA.png?table=block&id=74230d98-2f8c-423f-a275-451c3dc6edb7&cache=v2)
Выгрузить карточки из Аиртейбл достаточно просто, надо описать метод, который будет ходить в таблицу с принтерами:
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEoeDU3TXMAA9Lu3.jpg?table=block&id=04229711-be93-4e12-b767-2f236ab667f0&cache=v2)
А потом просто пробросить данные в компонент: gist.github.com/ilyalesik/ca34…
Для чего я использовал свою же библиотечку github.com/ilyalesik/reac…
После запуска плагина в фигме, будут все принтеры:
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEoeEWbfXYAA7b0a.jpg?table=block&id=0d3a2800-b9ba-4afd-94ee-692297fd9c4e&cache=v2)
После переноса всех карточек картина выглядела так, больше всего карточек малых заказов:
![notion image](https://www.notion.so/image/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEoeEj4NXUAEL7cN.png?table=block&id=d8e67181-d55f-41dc-b299-470e6423597c&cache=v2)
Мне всегда хотелось соединить дизайн и разработку, поэтому стартую тред по дизайн-системам, по мотивам моего доклада на @HolyJSconf holyjs-moscow.ru/2020/msk/talks…
Помимо автоматизации мы получили еще возможность портирования игру на другие платформы, например в веб, поскольку были использованы компоненты типа View, Text и StyleSheet совместимые с react-native, react-native-web. Более подробно про это было в треде twitter.com/jsunderhood/st…
Может показаться, что получилась разработка по принципу "когда в руках молоток, все вокруг становится подозрительно похожим на гвоздь".
Но реальное применение способствовало и развитию самой библиотеки, поскольку в процессе я находил баги react-figma и сразу их правил.
Это потянуло за собой и улучшение DX, например фича с HMR (hot module replacement) была инспирирована именно опытом с Additivka.
Могут быть более простые применения у этого подхода - например, можно фетчить актуальный курс валюты и отображать его
Или более сложные, например, когда при разработке новых экранов приложения используются реальные данные из АПИ