DEV Community: Ivan Huerta

Figma to Flutter : Convert Global Styles & ThemeData

Ivan Huerta — Thu, 07 Jul 2022 20:00:33 +0000

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!

Figma to Dashbook - parabeac_core v2.6

Ivan Huerta — Thu, 07 Apr 2022 15:10:47 +0000

In our last article, we covered how parabeac_core has added support for component isolation & Widgetbook. We have now also added Dashbook support in parabeac_core v2.6!

What’s Dashbook?

"Dashbook is a UI development tool for Flutter, it works as a development enviroment for the project widgets and also a showcase for common widgets on the app, it is heavly inspired by Storybook library, so it should be very easy for people who has already used Storybook, to use Dashbook."

To activate this feature, edit the config file in parabeac_core, located in parabeac_core/lib/configurations/configurations.json. Set "componentIsolation" to "componentIsolation": "dashbook"

It will look like the following:

You can duplicate and use this demo project here: https://bit.ly/3NVsvfy

Then run parabeac_core as usual and you will have a Flutter project with Dashbook ready to test your component package.

Note: Parabeac only generates dashbook/widgetbook stories & use case code for Figma Components.

You can then run it using:

flutter run project_name/lib/main_dashbook.g.dart

Next? Start adding the logic needed for this component package. Learn here! - https://bit.ly/3DUxb0v

Figma + Flutter Complex Fills, Drop Shadows, SVGs and Borders - parabeac_core v2.5

Ivan Huerta — Wed, 23 Mar 2022 15:02:18 +0000

As parabeac_core matures as a continuous Figma to Flutter generator, we wanted to add more robust support for styling. In the latest release (parabeac_core v2.5) we did exactly that. Some of the support we added were:

Complex Fill Support
- Mixed Solid Color
- Image
- Linear Gradients
Rectangle and Text Drop Shadow Support
Border Support
- Border Radius
- Border Thickness
- Border Color
Image Vectors map to SVG

Let’s walk through how some of this works!

If you’d like to test any of this out, feel free to duplicate this Figma file: https://www.figma.com/file/25pZ3AFZH0rGBwOMoB7l1W/parabeac_core-v2.5-Styling-Tests?node-id=0%3A1

Complex Fill Support

Mixed Color

Remember in grade school when the teacher asked you to mix 2 colors to make a new color? Well that’s exactly what we added support for in Figma. If you mix blue & red, you now get a magenta color in Flutter.

Container(
    width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x70991d66),
  ),
),

Image Fill

Say you wanted to add an image to this mix. Good news! We make this easy by converting this fill into an image with a mixed green fill, so you’ll never have to miss out on the rock staring at you ;)

Image.asset(
  'assets/images/imagewithtint.png',
  package: 'foo',
  width: 197.000,
  height: 120.000,
  fit: BoxFit.none,
),

Gradient Fill

For the first time we’re adding support for Gradients, you can use Linear Gradient and we’ll convert the code directly. Diamond and Radial gradients are not supported directly yet but we do generate an image for them so that the output is still correct.

Linear Gradient:

Container(
  width: 197.000,
  height: 124.000,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment(1.0000000596046466, -0.999999849557967),
      end: Alignment(-1.0, 1.0000002100466796),
      colors: <Color>[
        Color(0xffff0000),
        Color(0x00c4c4c4),
      ],
      stops: [
        0.0,
        1.0,
      ],
      tileMode: TileMode.clamp,
    ),
  ),
),

Radial/Diamond Gradients get converted to images for now.

Rectangle and Text Drop Shadow Support

Now by adding a drop shadow in Figma to Rectangles and Text, we print that out directly to the code, see below:

(Text)

AutoSizeText(
  'Howdy',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 12.0,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.0,
    color: Colors.black,
    shadows: [
      Shadow(
        color: Color(0xe5000000),
        offset: Offset(0.0, 4.0),
        blurRadius: 4.0,
      ),
    ],
  ),
  textAlign: TextAlign.left,
)),

(Rectangle)

Container(
  width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x99378c59),
    border: Border.all(
      color: Color(0xff0085ff),
      width: 3.0,
    ),
    boxShadow: [
      BoxShadow(
        color: Color(0x40000000),
        spreadRadius: 4.0,
        blurRadius: 4.0,
        offset: Offset(-5.0, 4.0),
      ),
    ],
  ),
),

Border Support

Previously, our border support was limited, but we now support border color, border radius, and border thickness. Here’s how it works:

Container(
  width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x99378c59),
    borderRadius: BorderRadius.all(Radius.circular(5.0)),
    border: Border.all(
      color: Color(0xff0085ff),
      width: 3.0,
    ),
  ),
),

Image Vectors Map To SVG

Lastly, previously complex shapes convert to images, but when scaling these images, they tend to be low quality images. With our latest update, these are now turned into & used as SVGs so that you have pixel-perfect scaling!

If you’re reading this, thanks for checking this out! We’d love to hear your thoughts & feedback. Be sure to join our community on Discord or email us for support at support@parabeac.com😎

Figma to Widgetbook - parabeac_core v2.4

Ivan Huerta — Fri, 25 Feb 2022 23:00:19 +0000

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

Calling All Africa Flutter Developers & Figma Designers!

Ivan Huerta — Sat, 12 Feb 2022 08:06:57 +0000

In partnership with our Parabeac Africa Chapter led by Will Odia, we are throwing our first challenge where you can win up to $300 USD by building an app prototype or component package using Figma, Flutter & Parabeac! You can use parabeac_core which is our open-source tool that converts Figma files into Flutter code or Parabeac Nest which is a web app that enables you to take the design file, generate code, and merge it into a Github repo.

To participate in the challenge, create an app prototype or a component package using Parabeac and submit your video(s) here: https://airtable.com/shrq1fHwJtTs1mu9v
There are two challenges available:

Video Submission: Judged by Parabeac team members; We will select 1st ($300), 2nd, ($200) & 3rd ($100) place winners based on the video submitted and a review of the codebase. (3 min max)

TikTok Submission ($100): The video with the most views highlighting the prototype/package built with Parabeac will be the winner. (Be sure to use the #parabeac hashtag)

Be sure to watch this video to help give you ideas on submissions!
https://www.youtube.com/watch?v=FmopfwIzVIU&t=2

Good luck!

Generating Isolated Component Packages for Flutter

Ivan Huerta — Thu, 03 Feb 2022 01:10:45 +0000

Our open-source Figma to Flutter converter has been used across various projects. While many developers will include UI directly in their Flutter project, we learned that for other companies and projects, the best use case of Parabeac was generating components, particularly for projects looking to scale. With the uptrend of tools like Storybook & Component Isolation that help test & scale UI, we decided to add changes to parabeac_core that enables this development workflow.

So what does a component package look like?

It's relatively simple, but the main idea is to completely isolate your UI code from your application code. The code & assets generated from parabeac_core are now prepared to be used as a package.

To use the component package in your Flutter app, you'll want to:

Add Base BLoC to the component package
Push to Github
Import into Flutter Project
Override BLoC with application logic in the Flutter Project

You can import the component package as easy as doing the following the pubspec.yaml:

example_project:
    git: git@github.com:<gh_username>/example_component_package.git

You can learn how to create your own component package by following the steps in our developer guide here: https://docs.parabeac.com/docs/how-to-create-a-component-package

Thanks for reading! We'd love to hear your feedback so that we can continue improving the project. Leave a comment or reach out to us on our Discord server!

BLoC, Provider, & Riverpod Support- Parabeac-Core v1.3

Ivan Huerta — Tue, 19 Jan 2021 17:46:43 +0000

We continue to receive great feedback from the Parabeac Core community on how to make our design to Flutter code converter better. Our community told us that they need the code output to configure with their preferred state management architecture. We are happy now to make that happen by converting designs into the boilerplate needed to get started with a state management system. Allowing developers to further focus on business logic rather than cleaning code & moving files after a code generation is made.

Parabeac-Core State Management Support

Parabeac's design to Flutter code converter now supports the most popular state management systems: BLoC, Provider and Riverpod (soon).

When Flutter was released, its core team guided developers implementing an app to follow the BLoC structural pattern to help with scalability. This has changed since then and is now pushing Provider. Lastly, many in the Flutter developer community view Riverpod as the likely evolution from Provider.
Recently, we polled the Flutter community on exactly which state management they preferred. Not surprisingly BLoC was the choice of the largest share (47%) more than doubling that of Provider (20%). Riverpod (5%) had a small but still noticeable share. Based on these numbers and the trends we are hearing from our community, we chose to invest some extra work in supporting all three state management systems: BLoC, Provider, and Riverpod.

This new functionality allows developers to customize how the code is being generated for their design pattern of choice.

How it Works

We'll go over how it works on both the design & development sides of things!

Describing States in Sketch/Figma

In the following image, we decided to change the "Click Me Button" to contain states. These states will be 'default', 'orange', & 'green'. You describe these in Sketch/Figma by creating a Symbol and naming them with the convention <name-of-UI-element>/<state-name>.

So in this case the symbols will be named 'mainBtn/default', 'mainBtn/orange', and 'mainBtn/green' like the following.

The last step in Sketch/Figma is to rename the instance, we'll rename to 'ClickMeBtn'.

It's that easy to start describing states, and it is often a convention that designers use to describe the same element in different ways!

How to Configure the State Management System

The first step to having Parabeac-Core convert with the state management system of choice is is specifying the desired state management configuration. To edit the state management configuration, you need to open the "configuration.json" file under the configuration folder. In there, there is going to be a field called "state-management". This is the location where we can specify our configuration of choice.

As of right now, these are the options:

"bloc" - BLoC state management configuration
"provider" - Provider state management configuration
"none" - No state management configuration
Soon: "riverpod" - Riverpod State Management Configuration

BLoC Support

To use BLoC, enter "bloc" in the configurations.json file and run Parabeac-Core.

To further understand what Parabeac-Core does, we decided to show some examples of how the boilerplate is created and how easy it is for a developer to add their business logic afterwards. After conversion, you can see the BLoC folder generated under the "view" folder. Within this folder, you can see the different states, the event's skeleton, and the BLoC itself.

To use these states, we can define the possible states within the states file like the following.

The "BlueBtnClicked" event represents an event where a user taps on the button and the button turns blue. The same logic is similar for the rest of the events.

Within the "bloc" file, the developer can map each of the events to any of the available states.

This method is now making the connections between the available states.

The "states file" contains the generated states you defined in Sketch/Figma.

Each of the classes map directly to the state designed in Sketch/Figma. We have the "MainBtnDefaultState", "MainBtnOrangeState", and the "MainBtnGreenState".

Lastly, as the developer we can now add actions.

If you see the "onTap" function, we "add" an event depending on the current state. The causes the button to appear blue, then orange, then green, and repeat.

Provider Support

To use Provider instead of BLoC, all you have to do is go back to the configuration file and change the field to "provider" and run Parabeac-Core.

Once generated, we can see that we get a new folder, the "models" folder. This folder contains the different states we defined; each model represents a UI element with different states.

The developer can then define the actions that will transition the states. We added the following --

With a small change to main() we are good to go with Provider.

Riverpod Support

We want to release with what we have to get this out to developers to play with as quickly as possible. Given the architecture that was built, it is relatively easy to add a new state management system and we hope to have Riverpod as an iterative release within the next 2 weeks. Stay tuned!

Other

You can also create your own! Check out this wiki page to learn how to make your own or reach out to us in our discord community for help on making one!

Wrapping Up

We aim to constantly increase the impact Parabeac Core can have within our community. Since every developer team has their own architecture preferences, we have created a flexible infrastructure so the community can use BLoC, Provider, Riverpod, or easily create & add their own to Parabeac Core.

Your feedback has been critical to our early success. Let us know how we are doing!

Most Popular Flutter State Management Systems

Ivan Huerta — Wed, 18 Nov 2020 18:05:17 +0000

At Parabeac, we started off as a Flutter exclusive dev shop & over the years we became very interested in automation. In particular, design to code tools really grabbed our attention. However, we became discouraged by the quality of code given to us from many of the tools out there & it became very apparent that a design to code converter must be driven by the developer community. So we decided to build our own tool exclusively for Flutter & open-sourced it.

After talking to many other professional Flutter development teams, it was obvious that building with some state management system was important because it keeps code consistent, testable & maintainable. We created a small survey on Reddit to find out which systems were the most popular.

What we learned

Developers submitted 8+ systems they used professionally, and this presents another specific challenge for design to code converters to be truly useful. Another reason why Parabeac-Core is open-source because once the source code has a basis for state management, developers can create & contribute their own. We have already began working on supporting state management when exporting but we wanted to know which system to support first. So thank you to all the developers who contributed to our survey! As promised, here's the results. We’d love to continue hearing your thoughts on your favorite state management systems!

Summarization of the data

BLoC has still remained the most popular system for both professional & personal development despite the Flutter team’s recommendation, Provider.
Provider is the second most popular for both professional & personal use, but given Google’s endorsement we believe it will likely surpass BLoC at some point. Provider is closing the gap specifically on personal development, we believe this is likely because companies tend to move slower than individual people.
Riverpod being the 3rd most popular on personal use, they were the 5th most popular on professional use. We were surprised to see that, “no state management system” was the 3rd most popular for professional use.
GetX came in 4th for professional use. Outside of the survey, we were surprised to see how vocal their users were on Reddit as well as how polarized other developers felt about GetX.

Figma to Flutter: Parabeac-Core v1.2

Ivan Huerta — Mon, 19 Oct 2020 18:43:15 +0000

We're so excited to release Parabeac-Core v1.2! We've been hard at work getting support for Figma out as many developers have been requesting this. Meanwhile, we have been blown away by the support of many of the developers in our community. Even though this is only our 3rd release, we get to announce the features & bug fixes the community has been able to add! See below:

Fun issue we ran into - It seemed like Figma decided to change their API to using http2 in the middle of our development. :))

Support for Figma to Flutter Code
Support for WSL2 (Windows)
Various Code Refactors
Fresh Eggs - DatePicker + TextFields

Additions 2–4 were all driven by the community!

Support for Figma to Flutter Code

So many developers have asked us to support Figma. Given Figma is free for individuals, we're so happy to have support for Figma now. We'll be working on design to code fidelity & testing on Parabeac-Core for the next couple of weeks to improve the quality of output for both Sketch & Figma. Most of the features we have for Sketch are available on Figma now.

Support for WSL2 (Windows)

Thanks to our amazing contributors, Parabeac-Core has Windows support through the Windows Subsystem for Linux (WSL2)! We added a walkthrough guide on how to set up WSL2 with Ubuntu and install the necessary dependencies to run parabeac-core. We're excited to expand into more devices and to hear from the Windows community! Check out the guide here! Thanks to @roel-de-vries, @Gulianrdgd, @snwagbata for putting together the guide!

Various Code Refactors & Improvements

Shout out to

@haardikdharma for taking on several issues & cleaning up the codebase!
@snwagbata for adding ArgParser support so it's very easy to add & parse more CLI arguments!
@roel-de-vries for creating & fixing the issues he found!

Fresh Eggs

Parabeac-Core has two new eggs that you can use, thanks to the contribributors who made them!

Text Field - Said Ajo-Montano

With this egg you can now create text fields to be exported from Sketch/Figma to Flutter. You can also set the type of keyboard you want in case you are creating an 'email' textfield or 'password' textfield.

Date Picker - Aswin Gopinathan

With this egg, you can create a button that instantiates a Date Picker! Aswin is putting together a guide on how to use it, so stay tuned!

Upcoming

I just want to quickly thank again all the community support we've gotten in the past month, we're rewarding early contributors with a limited edition Parabeac T-Shirt. (Which came out sick) You can see more info on our Hacktoberfest post here. We'll be working hard on improving the design to code fidelity & doing some refactors around eggs & other items. We really want the code export to be able to support different state management systems that developers use. Thanks for reading!

Hacktoberfest: Parabeac - Open-source design to Flutter code

Ivan Huerta — Thu, 01 Oct 2020 05:34:27 +0000

Hacktoberfest 2020!

Parabeac is so excited to be participating in Hacktoberfest. We created this small post to share what we're working on & we'd love to have anyone interested to join us on our Discord community.

We'll also be hosting a meetup for anyone interested to help get started with Parabeac-Core!

Along with #Hacktoberfest offering it's own swag, Parabeac is giving 100 first contributor shirts to our top contributors for the month!

What is Parabeac-Core?

Parabeac-Core is an open-source repository that converts design files into Flutter code.

Parabeac/Parabeac-Core

It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Unique Features

There are a couple of unique features that make this tool powerful. This is clearly an early project but there are some really neat things going on. We'd love your help to make these features AWESOME!

Parabeac Eggs

Eggs are probably the most exciting & creative things you can contribute to for Parabeac-Core. Eggs are able to override the basic interpretation of a design file & inject direct Flutter implementations into the conversion. For example, we use this to support AppBar & BottomNavigationBar. You can do this through the use of naming semantics where you name a Sketch element with .*appbar or .*tabbar & following their protocol. You could theoretically do things like create a Google Sign up button, which have logic baked into it. You're also able to inject instance variables into the state of the Stateful widget. We have plenty of egg ideas if you want to create them or if you have ideas, we'd love to hear them!

Reusable Code

Wouldn't you hate to see a designer use the same element over & over again, & your code does exactly that? Yeah, that's lame. It so happens to be that designers have very similar logic that developers have when creating reusable items. When designers create 'Symbols' they're actually creating reusable design elements. Parabeac-Core can interpret this & create functions that the developer can reuse. We currently need help supporting parameters as we began the implementation but haven't finished, let us know if you want to pick up where we left it!

Dynamic Sizing

When writing Flutter code, it is common to use tools like MediaQuery so that your UI can scale on different screen sizes. Luckily, Parabeac-Core supports this as well as flex-based layouts with Rows & Columns. We have some contributors who are working on improving this so that it scales from a mobile application to a web or desktop app as well. You're welcome to join the party!

Navigation / Prototyping

In tools like Sketch, you can prototype your application where you click a button and it takes you to a new screen. We interpret this automatically & inject Navigator()s into the code. However, we have some ideas on how to improve this in case you'd like to contribute to this.

Happy Hacking!!!

Hacktoberfest: Parabeac - Open-source design to Flutter code

Ivan Huerta — Wed, 30 Sep 2020 21:43:54 +0000

Parabeac is so excited to be participating in Hacktoberfest. We created this small post to share what we're working on & we'd love to have anyone interested to join us on our Discord community. For some context, Parabeac-Core is an open-source repository that converts design files into Flutter code.

Parabeac/Parabeac-Core

It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Unique Features

Parabeac Eggs

Reusable Code

Dynamic Sizing

Navigation / Prototyping

Happy Hacking!!!

Parabeac-Core v1.1 - Prototyping to Flutter code

Ivan Huerta — Thu, 17 Sep 2020 19:09:34 +0000

We just released Parabeac-Core v1.1 & we added some really cool stuff! See below:

Sketch prototyping
Parabeac Design Language (PBDL)
Metrics
Miscellaneous Bug Fixes

Sketch Prototyping

We added support for prototyping, now you can prototype & create navigation in Sketch & have it directly exported to Flutter. The gif below is an example of prototyping & navigating to the other screens made in the Sketch file!

Parabeac Design Language (PBDL)

When we launched, user's quickly told us how much they wanted Figma, but mapping in-between design schemas can be a challenge. So we created a standard, Parabeac Design Language so that any design file could be mapped to PBDL. This makes it very easy to add support for other design files. If we don't support the design program you use, let us know in the comments, make an issue on Github, or reach out to us in the Discord community!

Metrics

We added metrics for us to understand how users are using Parabeac-Core so we know where to focus on. The data we track keeps our users anonymous & we appreciate developers who leave this option on but if you don't feel comfortable, you're welcome to turn them off.

https://github.com/Parabeac/Parabeac-Core

Parabeac-Core is an open-source project that takes design files & converts them into Flutter code. You can read why we open-sourced this project & the importance of this project being driven by the designer & developer community: https://dev.to/parabeac/why-we-open-sourced-our-company-3a0i