Figma Puller: Bring Your Figma Design Tokens Directly into Flutter

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Design systems are only as good as their implementation. You may spend countless hours crafting beautiful colors, icons, and components in…

Design systems are only as good as their implementation. You may spend countless hours crafting beautiful colors, icons, and components in Figma — but how do you make sure your Flutter app actually uses those design tokens in a consistent, automated way?

That's where Figma Puller comes in.

This Dart package bridges the gap between your design file and your Flutter codebase. Instead of manually copying hex codes or exporting icons one by one, you can pull design tokens and assets directly from your Figma file, generating clean Dart code and asset references for immediate use in your app.

🚀 What Figma Puller Does

At its core, Figma Puller connects to the Figma API and downloads your color styles, icons, and design metadata. It then generates Dart files and Flutter helpers, so you can reference your design tokens in code as easily as calling AppColors.primaryBlue or AppIconWidgets.home().

It automatically detects changes, skips unchanged files, and organizes everything into logical categories. You'll never need to worry about syncing design updates again.

🎨 Extracting Colors

Define your color styles in Figma, give them descriptive names, and Figma Puller will generate constants you can use across your Flutter app.

Example output:

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

With the optional --theme-extension flag, it even generates a full ThemeExtension so your colors integrate naturally with Flutter's theming system.

🔍 Extracting Icons

Icons are pulled as SVG or PNG files, stored under assets/icons, and referenced through generated Dart constants:

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

Need widget helpers? Run with --icon-widgets and you'll get prebuilt icon widgets powered by flutter_svg:

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

⚡ Smart Change Detection

One of the biggest challenges in syncing design files is avoiding unnecessary downloads. Figma Puller solves this with a .figma_manifest.json file that tracks file hashes, node IDs, and timestamps.

On subsequent runs, unchanged files are skipped, only modified assets are downloaded, and removed items are automatically cleaned up. This keeps builds fast and CI/CD pipelines efficient.

🛠️ How to Use

Installation is simple. Add the package as a dev dependency:

dev_dependencies:
  figma_puller: ^1.0.1

Then run dart pub get.

From there, use the CLI:

figma_pull --file-key YOUR_FILE_KEY --token YOUR_API_TOKEN

You can customize output directories, clean old files, generate categorized code, or even run it in CI/CD pipelines to keep your app always in sync with your design system.

📱 Flutter Integration

Once generated, simply add the assets to your pubspec.yaml and start using the generated Dart files:

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

Your Figma styles and components are now first-class citizens in your Flutter project.

🔄 CI/CD Ready

Because it supports smart change detection and CLI flags, Figma Puller fits neatly into automated pipelines. You can schedule it to run before builds, commit updated assets to your repo only when changes are detected, and ensure design consistency across teams.

📖 Conclusion

Design and development no longer need to live in separate worlds. With Figma Puller, your Flutter project can automatically stay aligned with your Figma design system.

No more manual exports. No more mismatched colors. Just a clean, automated workflow that keeps your app beautiful and consistent.

👉 Try it today: Figma Puller on pub.dev