Very Good Flutter Styles

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!

InstructionsRun the plugin in Design or Dev ModeClick the Color or Text Styles button to copy Color or Text styles to your clipboardPaste the code into your code editorFeaturesNEW: Hide styles: Control which styles are exported by excluding styles hidden using . and _Copy all document color and text styles from Figma, paste as dart code.

Works in both Design & Dev ModesStyle names are converted to camelCase, and will remove the following characters: ( ) [ ] { } . , _ - – — / | \Opacity is reflected in the 8 digit alpha hex valueThis plugin will convert styles with 2 fills into a single calculated alpha hex value, great for Material surfacesGradient step color values are supportedNot SupportedVariablesVariables are not supported in this release. We are looking to enable supporting variables either in a future release or a separate plugin.

Color StylesGradient step positionsImage stylesLayer modes (Multiply, etc)More than 2 colors per styleText StylesAlignmentCase formattingListsParagraph spacing