Figma Variables to Code

A Figma plugin that automatically converts design variables and text styles into ready-to-use Dart code for Flutter applications. Generate type-safe, mode-aware design tokens with seamless GitHub integration.

Features

• 🎨 Variable Conversion: Transform Figma variables (colors, numbers, strings, booleans) into Dart constants
• 📝 Text Style Generation: Convert text styles to Flutter TextStyle objects with variable binding support
• 🌙 Multi-Mode Support: Automatic handling of light/dark themes and other design modes
• 🔒 Type Safety: Generated interfaces ensure compile-time safety across all modes
• 🐙 GitHub Integration: Direct sync to repositories with automatic PR creation
• ⚡ Live Updates: Real-time code generation as you modify designs in Figma

Documentation

• 📚 API Documentation - Comprehensive guide to all APIs, functions, and components
• 🚀 Usage Examples - How to use generated code in Flutter apps
• 🔧 GitHub Integration - Setting up automatic repository sync

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

• Node.js – v20
• Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples