In the latest update to [parabeac_core v3.1]([https://bit.ly/3Ny3Cpq], your favorite continuous Figma to Flutter generator, we’ve added:

• Global Styling, so you can import standardized colors and text styles set from the Figma file in your Flutter project.
• Material Theming Integration (beta), so that global styling can integrate into your theme with one line of code.
• Golden Tests, so devs can ensure that the UI generated scales pixel perfectly to the way it was described in Figma.

Let’s check it out!

Global Styling Support

To speed up the standardization of color styles and text styles, parabeac_core will now export a file containing those elements for developers to easily reference.

These elements are automatically detected when provided in the Figma file as seen below.

Generation of Global Colors

If detected in a Figma file, parabeac_corewill export a file containing all global colors as constants, so devs can skip manually entering color palette data.

In the example below, you can see a Figma file with globally declared colors and text styles being used to alter the counterapp’s colors.

We then simply convert using Parabeac, import the file to the .g.dart screen, and call the color names (as declared in Figma).

Generation of Global TextStyles

If detected in a Figma file, parabeac_core will export a file containing all global TextStyles as constants. These specifications include: fontSize, fontWeight, letterSpacing, fontFamily, color, and decoration.

Below, you can see an example of what Parabeac Generates for two different styles: parabeacTextStyle and newStyle.

For more detailed instructions on how to generate and import global styles, check out our new doc here!

Material Theming Integration (beta)

With the new support for styling, we also wanted to begin directly integrating these constant styles into the Flutter theme. We also now generate a file called theme.g.dart which currently supports Text Styles. The way it works is we take into account the naming set by Material 2 for text styles and automatically map that into the theme.g.dart file. The names in the standard TextTheme documentation are the names available for automatic theme integration in the Figma file:

Golden tests

Next, to help ensure Parabeac provides the most accurate product possible, we’ve added Golden Tests! But before we go over them, it is helpful to understand that there are two modes of describing layout in Figma.

• The first is positional/constraint layout. As Flutter developers we understand this through the use of Stack & Positioned widgets.
• The second is Autolayout. In code, we know this as “Flex-based layout” and specifically in Flutter, we know this as Columns & Rows.

With this in mind, we have created Golden Tests to match every permutation of positional layout, and as many feasible permutations of autolayout as possible.

This helps us to standardize the way code is generated, particularly when adding new features. Meaning, no surprise breakages when adding new elements or features to parabeac_core. You can see the 2 additional Figma files used as Golden Tests below. Autolayout on the top and Constraint/Positional Layout permutations on the bottom.

Bugfixes

We’re always striving to provide the most accurate code possible. With the implementation of Golden Tests, we’ve discovered and improved:

• Alignment improvements
• Constraints improvements

If you've made it to the end, thanks for reading! Let us know what you thought and reach out to us on our Discord server, we'd love to hear your feedback!