Skip to main content

Preparing your Figma File

Parabeac is designed to take into account every design detail available to us through the design file's API. By using Parabeac, you can generate more accurate UI implementations because we take into account these details that can often be missed during designer/developer handoff. By doing this though, it does rely on the designer to be intentional about how every aspect of the design is being created. Below are a few topics to cover when preparing your design file for Parabeac.

  • Frames vs. Components
  • Constraints
  • Autolayout
  • Adding the ability for logic with <custom> Tags

Frames vs. Components

As intented by design programs like Figma, frames are stand alone UI elements and components are reusable UI components. Parabeac generates frames & components accordingly.

For developers, this means that you can call a frame normally. Often times frames will be screens, components will be individual sections of screens and can be reused by providing a LayoutBuilder().

Constraints

Parabeac interprets the use of constraints exactly and supports every permutation available. As designers, we need to be careful with this. If we do not set the constraints correctly, the UI will look incorrect when in fact, it's exactly correct.

Constraints

You can test out constraint capabilities by comparing it to te following Figma file that lays out every permutation of constraints available:

https://www.figma.com/file/1LeNCfa8Yu5kTJhWcWh2PL/Figma-Constraint-Permutations?node-id=0%3A1

Autolayout

Parabeac also supports the use of Autolayout. This is particularly important for the usage of scroll views. (See our guide here on how to create Scroll Views)

AutoLayout Image

You can test out autolayout capabilities by comparing it to the following Figma file that lays out every permutation of autolayout available:

https://www.figma.com/file/7nuRmwVIeBgmTQPA4XhbiK/Figma-Autolayout-Permutations?node-id=431%3A298

Adding the ability to add logic with <custom> Tags.

Parabeac generates static UI files represented by .g.dart. However, this is not very useful unless we can make the static UI contain functionality. In our Hello World example, we recreate the "Hello World" Flutter application.

Parabeac Counter App

The intention is that when a user clicks the plus button,(Counter Button) the text item that has '0' as it's value should increment by 1. The way we accomplish this alongside static UI code is with <custom> tags.

In the example widget tree below, we label both the button & the value holder with a <custom> tag so that they can talk to a state management provider like CounterCubit in the example.

Parabeac Counter App Widget Tree