Shopbox-Aps/figma_flutter_generatorFigma Flutter Generator

Usage Examples

Practical examples of using Figma Flutter Generator

Usage Examples

This guide provides practical examples for both icon generation and theme generation use cases.

Icon Generation Examples

Basic Icon Generation

# Generate icons with default settings (PDF download)
figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons

Direct SVG Export

# Use direct SVG export (requires Figma Professional)
figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons \
  --direct-svg

Clean Generation with Verbose Logging

# Clean output directory and show detailed logs
figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons \
  --clean \
  --verbose

Using Generated Icons in Flutter

import 'package:your_project/icons/icons.dart';

// Basic usage
Icon(MyIcons.menu)

// With color and size
Icon(
  MyIcons.notification,
  color: Colors.blue,
  size: 24.0,
)

// In a button
IconButton(
  icon: Icon(MyIcons.search),
  onPressed: () => print('Search pressed'),
)

// With badge
Badge(
  child: Icon(MyIcons.cart),
  label: Text('3'),
)

Theme Generation Examples

Basic Theme Generation

# Generate theme files
figma_flutter_generator variables \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --output ./lib/theme

Clean Generation with Verbose Output

# Clean output and show detailed logs
figma_flutter_generator variables \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --output ./lib/theme \
  --clean \
  --verbose

Using Generated Theme in Flutter

Basic Theme Usage

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

// Simple text styling
Text(
  'Hello World',
  style: TextStyle(
    color: lightTheme.text_primary,
    fontSize: lightTheme.font_size_body,
  ),
)

// Container with theme colors
Container(
  color: lightTheme.background_color,
  padding: EdgeInsets.all(lightTheme.spacing_medium),
  child: Text('Themed Container'),
)

Complete Theme Implementation

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

class AppTheme {
  static ThemeData getLightTheme() {
    return ThemeData(
      primaryColor: lightTheme.primary_color,
      backgroundColor: lightTheme.background_color,
      scaffoldBackgroundColor: lightTheme.background_color,
      textTheme: TextTheme(
        bodyLarge: TextStyle(
          color: lightTheme.text_primary,
          fontSize: lightTheme.font_size_body,
        ),
        titleLarge: TextStyle(
          color: lightTheme.text_primary,
          fontSize: lightTheme.font_size_title,
          fontWeight: FontWeight.bold,
        ),
      ),
      iconTheme: IconThemeData(
        color: lightTheme.icon_color,
        size: lightTheme.icon_size,
      ),
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          backgroundColor: lightTheme.button_primary,
          foregroundColor: lightTheme.button_text,
          padding: EdgeInsets.all(lightTheme.spacing_medium),
        ),
      ),
    );
  }

  static ThemeData getDarkTheme() {
    return ThemeData(
      primaryColor: darkTheme.primary_color,
      backgroundColor: darkTheme.background_color,
      scaffoldBackgroundColor: darkTheme.background_color,
      // ... similar to light theme
    );
  }
}

// Using in MaterialApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.getLightTheme(),
      darkTheme: AppTheme.getDarkTheme(),
      // ...
    );
  }
}

Complete App Example

Here's a complete example combining both icons and theme:

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

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.getLightTheme(),
      darkTheme: AppTheme.getDarkTheme(),
      home: ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example App'),
        actions: [
          IconButton(
            icon: Icon(MyIcons.notification),
            onPressed: () {},
          ),
        ],
      ),
      body: Container(
        padding: EdgeInsets.all(lightTheme.spacing_medium),
        child: Column(
          children: [
            Card(
              child: ListTile(
                leading: Icon(MyIcons.user),
                title: Text(
                  'User Profile',
                  style: TextStyle(
                    color: lightTheme.text_primary,
                    fontSize: lightTheme.font_size_body,
                  ),
                ),
                trailing: Icon(MyIcons.arrow_right),
              ),
            ),
            ElevatedButton.icon(
              icon: Icon(MyIcons.save),
              label: Text('Save Changes'),
              onPressed: () {},
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(MyIcons.add),
        onPressed: () {},
      ),
    );
  }
}

Next Steps

Edit this page on GitHub
Figma Setup
Troubleshooting