🧙‍♂️ Figmage 🧙

A CLI tool for generating Figma styles for Flutter

Documentation 📝

Figmage comes with a comprehensive documentation, which you can find here

If this is your first time here, check out our Getting Started Guide!

What's in the box 🎁

Figmage is a magical CLI tool that helps you generate a flutter package from your Figma Design System. It uses the Figma APIs to fetch your design tokens from published styles, as well as variables, with full modes support.

So a variables section like this:

Is only a short figmage forge run away from becoming code like this:

// colors.dart
import 'package:flutter/material.dart';
@immutable
class ColorsMyCollection extends ThemeExtension<ColorsMyCollection> {
  const ColorsMyCollection({
    required this.background,
    required this.primary,
  });

  const ColorsMyCollection.dark()
      : background = const Color(0xff665555),
        primary = const Color(0xffef86a6);

  const ColorsMyCollection.light()
      : background = const Color(0xfffff4f4),
        primary = const Color(0xff7d4052);

  final Color background;

  final Color primary;

  @override
  ColorsMyCollection copyWith([
    Color? background,
    Color? primary,
  ]) {
    /// ...
  }

  @override
  ColorsMyCollection lerp(
    ColorsMyCollection other,
    double t,
  ) {
    /// ...
  } 
}

extension ColorsMyCollectionBuildContextX on BuildContext {
  ColorsMyCollection get colorsMyCollection =>
      Theme.of(this).extension<ColorsMyCollection>()!;
}

And you can use it like this:

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final colors = context.colorsDesignSystem;
    final typography = context.typographyDesignSystem;

    return Container(
        color: colors.primary,
        child: Text('Hello world!', style: typography.body1),
    )
    // ...

Features

• ✨ Generate a Flutter package from your Figma Design System
• 🎨 Supports many types of tokens:
  • 🌈 Color styles and variables
  • 🖋️ Typography styles (with optional google_fonts support!)
  • 🔢 Number variables, which can be generated as Paddings, and Spacers as well
• 🌓 Modes support for variables: Generate different tokens for different themes (e.g. dark/light)
• 📦 Package generation: All your tokens end up in one convenient package. Depend on it from your app, and update it whenever neccessary!
• 🤝 Seamless integration with Themes from material.dart: Generated classes are ThemeExtensions, so they can be integrated into your app's theme easily!
• 🎯 Quick access using BuildContext extensions.
• 🔮 Portable: figmage is a pure dart package, so it can easily be integrated into your CI/CD pipelines, to automatically fetch the latest tokens of your project for you!