Figma Puller: Прямо из Figma получаем Design Tokens в Flutter

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Системы дизайна хороши только настолько, насколько хорошо они реализованы. Вы можете тратить бесчисленные часы на создание красивых цветов, иконок и компонентов в…

Системы дизайна хороши только настолько, насколько хорошо они реализованы. Вы можете тратить бесчисленные часы на создание красивых цветов, иконок и компонентов в Figma — но как вы можете убедиться, что ваше приложение Flutter действительно использует эти токены дизайна последовательным и автоматическим образом?

Именно здесь на помощь приходит Figma Puller.

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

Что делает Figma Puller

В своей основе Figma Puller подключается к API Figma и загружает ваши стили цвета, иконки и метаданные дизайна. Затем он генерирует файлы Dart и помощники Flutter, чтобы вы могли ссылаться на токены дизайна в коде так же легко, как вызывать AppColors.primaryBlue или AppIconWidgets.home().

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

Извлечение цветов

Определите стили цвета в Figma, дайте им описательные названия, и Figma Puller сгенерирует константы, которые вы можете использовать по всему приложению Flutter.

Пример вывода:

class AppColors {
  AppColors._();
  static const Color primaryBlue = Color(0xFF007AFF);
  static const Color secondaryGray = Color(0xFF8E8E93);
}

С помощью необязательного флага --theme-extension он даже генерирует полное ThemeExtension, чтобы ваши цвета интегрировались естественным образом с системой тем Flutter.

Извлечение иконок

Иконки извлекаются в виде файлов SVG или PNG, хранятся в assets/icons и ссылаются через сгенерированные константы Dart:

class AppIcons {
  AppIcons._();
  static const String home = 'assets/icons/home.svg';
  static const String profile = 'assets/icons/profile.svg';
}

Вам нужны помощники виджетов? Запустите с --icon-widgets и вы получите предварительно построенные виджеты иконок, работающие на flutter_svg:

AppIconWidgets.home(width: 24, height: 24, color: AppColors.primaryBlue);

Умное обнаружение изменений

Одной из самых больших проблем при синхронизации файлов дизайна является избежание ненужных загрузок. Figma Puller решает эту проблему с помощью файла .figma_manifest.json, который отслеживает хеши файлов, идентификаторы узлов и метки времени.

При повторных запусках пропускаются неизмененные файлы, загружаются только измененные активы и автоматически очищаются удаленные элементы. Это поддерживает сборки быстрыми и конвейеры CI/CD эффективными.

🛠️ Как использовать

Установка проста. Добавьте пакет как зависимость для разработки:

dev_dependencies:
 figma_puller: ^1.0.1

Тогда запустите dart pub get.

Оттуда используйте CLI:

figma_pull --file-key YOUR_FILE_KEY --token YOUR_API_TOKEN

Вы можете настроить директории вывода, очистить старые файлы, сгенерировать категоризированный код или даже запустить его в CI/CD-пайплайнах, чтобы ваше приложение всегда было синхронизировано с вашей системой дизайна.

📱 Интеграция с Flutter

После генерации просто добавьте активы к вашему pubspec.yaml и начните использовать сгенерированные файлы Dart:

Container(
 color: AppColors.primaryBlue,
 child: AppIconWidgets.home(
 width: 24,
 height: 24,
 color: AppColors.secondaryGray,
 ),
);

Ваши стили и компоненты Figma теперь являются первоклассными гражданами в вашем проекте Flutter.

🔄 Готов к CI/CD

Поскольку он поддерживает умное обнаружение изменений и флаги CLI, Figma Puller идеально подходит для автоматизированных пайплайнов. Вы можете запланировать его запуск перед сборкой,.commit обновленных активов в ваш репозиторий только при обнаружении изменений и обеспечить согласованность дизайна во всех командах.

📖 Вывод

Дизайн и разработка больше не нужно существовать в отдельных мирах. С Figma Puller, ваш проект Flutter может автоматически оставаться синхронизированным с вашей системой дизайна Figma.

Больше нет ручных экспортов. Больше нет несоответствующих цветов. Только чистый, автоматизированный рабочий процесс, который giữает ваше приложение красивым и согласованным.

👉 Попробуйте сегодня: Figma Puller на pub.dev