Figma to Widgetbook - parabeac_core v2.4
Ivan Huerta
Posted on February 25, 2022
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"
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
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
Posted on February 25, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.