The Very Good Flutter Styles Figma Plugin allows us to extract colors and text styles from Figma design to the Flutter app easily.

Run the Very Good Flutter Styles Plugin

  1. Open Your Design File in Figma. In this example we use Petma Design file
  2. Right Click on Canvas -> Plugins -> Manage Plugins …
  3. Type “Very Good Flutter Styles“, Click “Run“

Extract Colors

  1. Click “Color Styles“
  2. Now your Dart code that contains Color Styles copied to your clipboard.
  3. Paste it into your file: app_color_styles.dart
# Alternatively you can paste it to a file with this command in MacOS.

pbpaste > app_color_styles.dart

Extract TextStyles

  1. Click Text Styles
  2. Now your Dart code that contains Color Styles copied to your clipboard.
  3. Paste it into your file: app_text_styles.dart
# Alternatively you can paste it to a file with this command in MacOS.

pbpaste > app_text_styles.dart

I hope you enjoyed this method.

If you found this article useful, you can share it on social media and send it to your friends so that they can benefit from it and support me in this way.

In the next post I added custom font Rubik to flutter for this text styles.

Have a great Fast Flutter day. 🙂