Кодогенерация токенов дизайн-системы для Android по Figma API

Содержание

• Почему решили идти в историю с автоматизацией

• Research и наша первая попытка

• Реализация:

  • Data-слой

  • Генерация цветов

  • Генерация типографики

  • Генерация изображений

  • Работа с устаревшими (или deprecated) токенами

  • Остальные токены

  • Генерация XML для Android View System

  • Схема генерации. Итоговый проект

• Итоги

• Полезные ссылки

Приветствую, уважаемые читатели Хабра.

Вероятно, в вашей команде уже всерьёз обсуждается необходимость внедрения дизайн-системы, а может, вы уже её активно внедряете. 

Важное место в дизайн-системе занимают токены — самые низкоуровневые элементы, которые являются базой для всех компонентов и экранов.

К токенам можно отнести:

• цвета,

• типографику,

• радиусы/формы,

• паддинги/отступы,

• иконки.

Список этим не ограничивается. По сути, токен — это любая информация, ассоциированная с именем. Некая константа, например:

color-text-primary: #000000

По мере развития проекта в целом и дизайн-системы в частности токенов становится очень много. Для примера — у нас уже около четырёхсот иконок, больше двухсот цветов и перспектива внедрения нескольких тем в приложении. Ещё мы активно внедрением Backend Driven UI</p>" data-abbr="BDUI">BDUI, на BFF которого верстаем виджеты, применяя токены дизайн-системы. А что ещё, если не автоматизация, позволит держать в консистентности всю эту систему?

Меня зовут Никита Яцкивский. Занимаю позицию главного Android-разработчика в отделе разработки мобильной платформы компании «Магнит». В статье расскажу про наш тернистый путь к собственному генератору токенов дизайн-системы.

Почему решили идти в историю с автоматизацией