Figma to Flutter: Parabeac 4.0 Updates to Components

lily-099 — Fri, 14 Apr 2023 00:23:40 +0000

In Parabeac 4.0, Parabeac Cloud and parabeac_core’s latest update, we’ve simplified the way that components can be referenced. Now, you can directly reference a component as a child. Let’s jump into it!

Parabeac: An Overview

Parabeac Converts Figma designs to Flutter UI code. In our Components project type, you can convert reusable UI elements to Flutter code. For more information on how we do this, check out our docs.

Flutter Components: An Overview

UI components (as seen above) are pieces of UI that are reusable to build the entire front end of an application (as below). Flutter allows developers to create high-quality, natively compiled applications for mobile, web, and desktop from a single codebase. In Flutter, widgets are the building blocks of any Flutter application—the central idea is that you build your UI out of widgets. Because the word component is more universal and specific to UI, we’ve chosen to use the term component—even if the terms are used interchangeably in some spheres.

Old Component Referencing + Breakages

In the pre-Parabeac 4.0, layout builder was required to reference a component. If you have existing applications that reference components this way and make an update, this may cause breakages. All that is required to resolve this is delete layout builder and reference the component in the new, simplified way (shown below).

Parabeac 4.0+ Component Referencing

To use a component in Parabeac 4.0 or later, simply wrap your component in a size box that describes the desired dimensions of your component and reference the component as a child.

Hope this is useful and helps you to speed up and improve your UI coding process. Head to Parabeac Cloud to test it out!

Happy Coding!

Convert Material 3 Theme Designs to Flutter Code

lily-099 — Fri, 31 Mar 2023 20:07:16 +0000

Parabeac — Now compatible with Google Material Design 3 Themes

With the release of Google’s latest design system, Material Design 3, there’s been an update to the way that colors in Light and Dark Schemes are selected. Parabeac has just released support in Parabeac Cloud and parabeac_core: now you have the option to select between Material Design 3 and Material Design 2 when converting themes to Flutter code.

Take a look at our updated Figma Kickstart file here.

Converting with Parabeac Cloud

To convert a Material 3 Theme using Parabeac Cloud, the process remains the same as it was previously: simply create a Theme Project, select your GitHub branch, provide links to the Figma File, and convert. For more detailed instructions, check out our documentation.

What’s New: Color Palette

Based on Key tones, 13 shades shades are generated ranging from 0–100. On the bottom end of the spectrum 0 is true black (#FFFFFF) and 100 is true white white (#00000). From these key tones, the derivative palette colors are selected.

Parabeac has updated its Themes Figma Kickstart file to reflect this — play with it here. To use our Figma file: edit the key tones and the palette will be generated. Then, to select the colors for the light and dark color schemes, use the dropper to choose the appropriate color from the gradient in the palette.

Accessibility and Contrast

One of the main goals of the Google Material 3 color palette is to improve accessibility. The new color palette is designed to meet the WCAG 2.1 AA standard for contrast ratio. This means that text and other important elements are more legible, making it easier for users with visual impairments to navigate and use the interface.

While there are default values, such as Primary being set to Primary40 and On Primary set to Primary100, the user can manually set what shade from the key tone palette they would like to use — though keep in mind there are specific contrast minimums set forth by Material 3.

Updates to Typography

The naming conventions for typography have also been modified as well as several new font options added.

Conclusion

Whether you’re currently using Material Design 2 or Material Design 3, we hope you use Parabeac to convert your design from Figma to Flutter Code! Head to parabeac.com to learn more or to app.parabeac.com to try it today.

Forem: lily-099