A Dart code generator that converts Figma components to Flutter widgets

January 30, 2020 packages, Widgets

Try it

Disclaimer: All of this is purely experimental and under active development (read why I started the project here). If I would have access to Figma rendering source code it would have been a lot easier and quicker (if a Figma employee read this and can share the algorithm, it would be awesome!), but be aware that all the rendering logic is reverse engineered, so you will experience a lot of inconsistencies! Moreover, a few performance and rendering tests have created yet, so please share your experiences through issues.

The easiest way to start is the online tool.

Documentation

Dynamic elements

Example: $checkmark

You can declare a node as dynamic by starting its name with $.

A <WidgetName>Data class is generated alongside the main class, with a property for each dynamic element.

Dynamic properties are exposed and depend on the node type :

NODE
- isVisible: indicates whether the node and its children should be drawn.
TEXT
- text : the content of the text node. The style is the style of the first declared character.

Directive (experimental)

All directives start with # and allow you to control the behavior of your components by integrating Flutter elements.

Disclaimer : widget positionning is not finished yet and may not be located as expected.

`tap` – `RECTANGLE`

Example: #tap(onSelected)

Defines a rectangle as a tappable area (an InkWell) with a callback.

`widget` – `NODE`

Example: #widget(field)

Includes a widget at the node location.

Roadmap

Their is still a lot of work to do, here a quick roadmap of what I have in mind :

Drawing : reproducing Figma drawing logic
- Fills
  - GRADIENT_ANGULAR
  - GRADIENT_DIAMOND
  - EMOJI
  - IMAGE
    - Scale Modes
      - FILL
      - FIT
      - TILE
      - STRETCH
- Effects
  - INNER_SHADOW
  - LAYER_BLUR
  - BACKGROUND_BLUR
- Blend modes (At the moment, all is considered PASS_THROUGH/NORMAL)
- Text rendering (Basic text styling is providing but hasn’t tested enough)
- Styles
Semantics : adding semantics items for accessibility.
Optimization : reducing the number of drawing operations
Widget includes (At the moment, widget location may be approximative and it is still experimental)
Build time generator : creating generators for updating widgets at build time (like built_value).
Unit tests : create automated tests for validating rendering by comparing a Figma export to an app screenshot.