Design System Generator #

This generator allows you to generate a design system for your project. You can use it to generate design tokens based on a JSON configuration.

The configuration can be viewed at Design System JSON Schema.

The generator creates the following elements:

• Colors
• Border Radii
• Spatials (spacing)
• Screensizes (Breakpoints) and a responsive helper function

Usage #

Refer to the example to see how to use the generator.

Summary:

• Create a design-system.json file in your app folder. The file can be passed as config or will be searched in your folder by a glob pattern.
• Configure your design system to your wishes (add "$schema": "https://github.com/smartive/flutter-design-system-generator/blob/main/design-system.schema.json") to the start to get JSON schema validation
• Install the design system generator with flutter pub add dev:design_system_generator
• Run dart run design_system_generator generate to generate the design system