DEV Community

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

Posted on β€’ Edited on

8 6

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

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools πŸ”

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay