Very Good Flutter Styles

About this plugin

Very Good Flutter Styles can instantly generate Flutter theme code directly from the color and text styles in your Figma document. Simply run the plugin, then copy and paste the code into your project. Save yourself the time and headache of finding, copying, and formatting style properties with Very Good Flutter Styles!

The plugin uses the existing names and order of your Figma styles, giving you more control around the output of your code. It will also strip out common special characters used for organization, and set your styles names to lowerCamelCase. The generated code is intended to be flexible enough to be used as is, or reformatted to fit the needs of your project.

Open up the playground file to see some examples of styles which include various supported properties; gradients, opacity, multiple fills, italics, underlines, and more. Then unleash the power of the plugin on your own design files!

Instructions

1. Run the plugin in Design or Dev Mode
2. Click the Color or Text Styles button to copy Color or Text styles to your clipboard
3. Paste the code into your code editor

Features

1. NEW: Hide styles: Control which styles are exported by excluding styles hidden using . and _
2. Copy all document color and text styles from Figma, paste as dart code.
3. Works in both Design & Dev Modes
4. Style names are converted to camelCase, and will remove the following characters: ( ) [ ] { } . , _ - – — / | \
5. Opacity is reflected in the 8 digit alpha hex value
6. This plugin will convert styles with 2 fills into a single calculated alpha hex value, great for Material surfaces
7. Gradient step color values are supported

Not Supported

Variables

1. Variables are not supported in this release. We are looking to enable supporting variables either in a future release or a separate plugin.

Color Styles

1. Gradient step positions
2. Image styles
3. Layer modes (Multiply, etc)
4. More than 2 colors per style

Text Styles

1. Alignment
2. Case formatting
3. Lists
4. Paragraph spacing