DEV Community

Cover image for Figma to Widgetbook - parabeac_core v2.4
Ivan Huerta for Parabeac

Posted on • Edited on

Figma to Widgetbook - parabeac_core v2.4

Hey everyone, recently we added support for component isolation in our Figma to Flutter converter parabeac_core which was a big step in helping developers generate code in a large scale application where it is necessary to isolate UI components into their own packages.

Many development teams creating component packages in other frameworks will use tools like Storybook.js for testing. For Flutter, Widgetbook is one of the best options which is why parabeac_core now has the option to export the code to be immediately testable in Widgetbook. Here's how!

Note: We also have our video guide here: https://youtu.be/aKsmXR1vF2M

In the config file of parabeac_core, (parabeac_core/lib/configurations/configurations.json) set "componentIsolation" to "componentIsolation": "widgetbook"

Configuration File parabeac_core

Run parabeac_core as usual and viola, you have a Flutter project with Widgetbook ready to test your component package.
You can duplicate and use this demo project here:

https://www.figma.com/file/R7GBEc0mfXsJi6B7y3lITe/Parabeac-Widgetbook-Example?node-id=0%3A1

Parabeac Figma Component Example

Parabeac Widgetbook Gen

You can then run it by running:
flutter run project_name/lib/main_widgetbook.g.dart

Next? Start adding the logic needed for this component package. Learn here! - https://docs.parabeac.com/docs/how-to-guides/component-isolation

Top comments (0)