Skip to content
A Dart code generator that converts Figma components to Flutter widgets.
Dart
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cli Refactoring, integrated `path_parsing` library. Aug 2, 2018
docs Centered workflow. Aug 2, 2018
generator Added generator project. Jul 28, 2018
generator_annotations Updated code, added declarations, widget generation. Jul 29, 2018
sample Refactoring, integrated `path_parsing` library. Aug 2, 2018
src Refactoring, integrated `path_parsing` library. Aug 2, 2018
website Refactoring, integrated `path_parsing` library. Aug 2, 2018
.gitignore Initial commit Jul 27, 2018
LICENSE Initial commit Jul 27, 2018
README.md
publish.sh Updated code, added declarations, widget generation. Jul 29, 2018

README.md

logo

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.

workflow

Documentation

Dynamic elements

dynamic

Example: $checkmark

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

A <WidgetName>Data class is generated alonside 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

tap

Example: #tap(onSelected)

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

widget - NODE

tap

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.

Features and bugs

Please file feature requests and bugs at the issue tracker.

You can’t perform that action at this time.