Contact us

Visual consistency at the touch of a button: The Design System Generator for Flutter

Auf einem Smartphone wird die Benutzeroberfläche einer Food-App angezeigt, während auf der linken Seite Code und Designspezifikationen erscheinen und sich in der oberen rechten Ecke das Flutter-Logo befindet.

Design systems are the backbone of consistent user interfaces. They define colors, typography, spacing and more - and ensure that your app not only looks good, but also remains maintainable. But how do you efficiently integrate a design system into Flutter? With our open source tool Design System Generator this becomes child's play.

Why a Design System Generator?

Manually maintaining design tokens in Flutter projects is error-prone and time-consuming. Our generator automates this process and also offers numerous advantages.

  • Ensure consistency & quality
    All design tokens are defined centrally and automatically translated into Dart code. This ensures a uniform visual language across all components and reduces inconsistencies. Magic numbers are a thing of the past: instead of hard values such as 16.0 or #FF0000 in the code, you use clearly named constants such as AppSpatials.s16 or AppColors.primary back.
  • Type safety & autocompletion
    Thanks to generated code, you benefit from auto-completion and compiler checks. This minimizes errors and speeds up development.
  • Efficiency through automation
    By automating code generation from a JSON configuration, you save valuable development time. Changes to the design system only require an adjustment to the configuration, which significantly reduces the maintenance effort. In addition, helpful functions such as responsive breakpoint helpers are generated, which further simplify development.
  • Scalability & flexibility
    The generator supports multiple design systems per project. This enables easy scaling and adaptation to different requirements or brand identities.
  • Central documentation & collaboration
    The JSON configuration serves as a "single source of truth" for your design system. This facilitates collaboration between design and development teams and ensures that everyone is on the same page.

What is generated?

Based on a JSON configuration, the generator creates.

  • 🎨 Colors
  • 📏 Spacings
  • 🟦 Border radii and widths
  • 📱 Breakpoints
  • 🖋️ Typography (TextStyles)
  • 🖼️ Icon sizes

In addition, various helper functions are generated to make it easier for you to work with the tokens.

How it works

Installation

Add the required packages as dev dependencies:

flutter pub add dev:design_system_generator dev:build_runner

Configuration

Create a file with the extension .design-system.json in your lib-directory. An example:

{
  "$schema": "https://github.com/smartive/flutter-design-system-generator/blob/main/design-system.schema.json",
  "colors": {
    "transparent": "#00000000",
    "black": "#000000",
    "white": "#FFFFFF",
    "neutral": {
      "100": {
        "DEFAULT": "#F5F5F5",
        "contrast": "#333"
      }
    },
    "blue": {
      "DEFAULT": "#155DFC",
      "100": "#DBEAFE",
      "200": "#162456"
    }
  },
  "spacings": {
    "s10": 10,
    "s20": 20,
    "s30": 30
  },
  "borderWidths": {
    "b1": 1,
    "b2": 2
  },
  "borderRadius": {
    "normal": 8,
    "full": 9999
  },
  "screens": {
    "compact": 600,
    "medium": 840,
    "expanded": 1200
  },
  "typography": {
    "text": {
      "md": {
        "DEFAULT": {
          "family": "Inter",
          "weight": 400,
          "size": 12,
          "lineHeight": 16
        },
        "semibold": {
          "family": "Inter",
          "weight": 600,
          "size": 12,
          "lineHeight": 16
        }
      }
    },
    "display": {
      "lg": {
        "DEFAULT": {
          "family": "Arial",
          "weight": 400,
          "size": 28,
          "lineHeight": 36
        },
        "semibold": {
          "family": "Arial",
          "weight": 600,
          "size": 28,
          "lineHeight": 36
        }
      }
    }
  },
  "iconSizes": {
    "sm": 16,
    "md": 24,
    "lg": 32
  }
}

Tip: When structuring your design tokens, use established design systems such as Tailwind CSS. For example, Tailwind uses a consistent naming scheme for colors (primary, secondary), distances (sm, md, lg) and typography (text-sm, text-lg), which can also be reflected in your JSON setup. This promotes reusability and facilitates collaboration between design and development teams.

Optionally, you can also define your own JSON schema and add it to your .design-system.json-file to map the specific requirements of your project.

Generation

Run the build runner to generate the dart code:

dart run build_runner build --delete-conflicting-outputs

The generated code is now available to you and can be used directly in your project.

Remember to copy the generated files to the .gitignore The content is generated fresh with each build process.

Use

Once your design system has been successfully generated, the defined tokens are available to you as type-safe dart classes.

🎨 Colors

Use the generated color values from the AppColors-class.

Container(
  color: AppColors.blue,
);

For variants such as contrast you can also access the corresponding properties:

 Container(
  color: AppColors.neutral100Contrast,
);

📏 Spacings

Use the defined distances from the AppSpatials-class.

SizedBox(height: AppSpatials.s10, width: AppSpatials.s20);

Or use helper functions from the AppSpatial-enum to define paddings or spacers.

Padding(
  padding: AppSpatial.s10.insetsAll,
  child: Text('Beispieltext'),
);
Column(
  children: [
    Text('Beispieltext 1'),
    AppSpatial.s30.verticalSpacer,
    Text('Beispieltext 2'),
  ]
);

🟦 Border radii and widths

Use the defined border radii and widths from the corresponding classes or use the class AppBorders create typed frames.

Container(
  decoration: BoxDecoration(
    borderRadius: AppBorderRadius.normal.all,
    border: AppBorders.all(AppBorderWidth.b1),
    // weitere BoxDecoration Eigenschaften
  ),
);

📱 Responsive breakpoints

Use the generated breakpoints from the AppBreakpoints-class to make your layout responsive.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth >= AppBreakpoints.expanded) {
      return DesktopLayout();
    } else if (constraints.maxWidth >= AppBreakpoints.medium) {
      return TabletLayout();
    } else {
      return MobileLayout();
    }
  },
);

🖋️ Typography

Set the generated TextStyles from the AppTypographies-class.

Text(
  'Überschrift',
  style: AppTypographies.displayLgSemibold,
);

🖼️ Icon sizes

Set the generated icon sizes from the AppIconSizes-class.

Icon(
  Icons.star,
  size: AppIconSizes.md,
);

Conclusion

The Design System Generator saves time, reduces errors and ensures a consistent appearance for your Flutter app. Whether it's a small project or a large application - with this tool, you can efficiently bring your design system into the code. If you have any questions about using it or suggestions for further development, we look forward to your feedback.

👉 Click here for the repository

Written by
Nando Schär

App development|Mai 2025

More Articles