Theme Generation

Setting up variables in Figma

Overview

The theme generation feature converts Figma variables into type-safe Flutter theme files, supporting:

• Multiple theme modes (light/dark)
• Colors, typography, and spacing variables
• Automatic type conversion
• Organized theme structure

Prerequisites

• Figma Enterprise plan (required for Variables API access)
• Variables properly set up in Figma
• Collection named "1. ✨Mapped" containing your theme variables

Command Structure

figma_flutter_generator variables \
  --token YOUR_FIGMA_TOKEN \
  --file YOUR_FILE_ID \
  --output ./lib/theme \
  [--clean] \
  [--verbose]

Required Parameters

• --token, -t: Your Figma access token
• --file, -f: The Figma file ID
• --output, -o: Output directory for theme files

Optional Flags

• --clean: Clean output directory before processing
• --verbose, -v: Enable detailed logging

Figma Variables Setup

Generated theme files structure

Variable Types

The tool supports these Figma variable types:

1. Colors

   colors/primary
   colors/secondary
   colors/background
   

2. Typography

   typography/body_size
   typography/heading_size
   typography/font_family
   

3. Spacing

   spacing/small
   spacing/medium
   spacing/large
   

Naming Convention

• Use forward slashes (/) to create categories
• Use underscores (_) for multi-word names
• Keep names lowercase
• Example: colors/button_primary

Output Structure

lib/
└── theme/
    ├── light_theme.dart    # Light theme variables
    ├── dark_theme.dart     # Dark theme variables
    └── theme.dart          # Combined theme configuration

Using Generated Theme

Using generated theme in Flutter app

Basic Usage

import 'package:your_project/theme/light_theme.dart';
import 'package:your_project/theme/dark_theme.dart';

// Using theme variables
Container(
  color: lightTheme.background_color,
  padding: EdgeInsets.all(lightTheme.spacing_medium),
  child: Text(
    'Hello World',
    style: TextStyle(
      color: lightTheme.text_primary,
      fontSize: lightTheme.font_size_body,
    ),
  ),
)

Creating ThemeData

ThemeData getLightTheme() {
  return ThemeData(
    primaryColor: lightTheme.primary_color,
    backgroundColor: lightTheme.background_color,
    textTheme: TextTheme(
      bodyLarge: TextStyle(
        color: lightTheme.text_primary,
        fontSize: lightTheme.font_size_body,
      ),
    ),
  );
}

// Using in MaterialApp
MaterialApp(
  theme: getLightTheme(),
  darkTheme: getDarkTheme(),
  // ...
)

Best Practices

1. Variable Organization

   • Use clear category names
   • Keep a consistent naming convention
   • Group related variables together

2. Theme Structure

   • Create separate files for different theme aspects
   • Use type-safe variables
   • Document custom theme extensions

3. Maintenance

   • Regularly sync with Figma changes
   • Version control your theme files
   • Document any manual overrides

Troubleshooting

Common issues and solutions:

1. API Access

   • Verify Enterprise plan access
   • Check token permissions
   • Ensure variables API is enabled

2. Variable Mapping

   • Confirm collection naming
   • Check variable types
   • Verify mode configurations

3. Type Conversion

   • Review variable definitions
   • Check for unsupported types
   • Verify value formats

For more details, see the Troubleshooting guide.