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.
You can declare a node as dynamic by starting its name with
<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 :
isVisible: indicates whether the node and its children should be drawn.
text: the content of the text node. The style is the style of the first declared character.
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.
Defines a rectangle as a tappable area (an InkWell) with a callback.
Includes a widget at the node location.
Their is still a lot of work to do, here a quick roadmap of what I have in mind :
- Drawing : reproducing Figma drawing logic
- Scale Modes
- Scale Modes
- Blend modes (At the moment, all is considered
- Text rendering (Basic text styling is providing but hasn't tested enough)
- 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
- 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.