Editor's note: The Designs to Layouts Figma plugin is Matti's personal project, not an official Vaadin tool.
Visual design is a critical aspect of a modern software project that permeates the entire process. Unfortunately, there is a tool mismatch: designers tend to use tools such as Sketch or, more recently, Figma, whereas developers prefer IDEs and possibly more code-oriented UI design tools. While the designer works in an environment of relative freedom, the developer, who must implement the designs, is primarily concerned with bringing them within the constraints of the target UI framework.
Designs to Layouts (DtL) is a work-in-progress Figma plugin that aims to ease this process by automating layout creation from designs. It will enable the designer to hand over not only the visual design but also working code that already implements a substantial portion of the design. While the plugin supports the Vaadin framework and Vaadin Java components, it is not an officially supported product.
How the plugin works
The first step in complying with the constrained layout methods of UI frameworks is to produce the tree structure that the UI represents. At this stage, some interaction is required from the designer: layout components (simple rectangles) are placed around groups of vertically or horizontally-organized components. The algorithm used in DtL can then form a tree of components from the design for each frame on the page.
The next step is to reproduce the positioning of the design. Absolute positioning would be simple, but is often undesirable as it does not scale according to display size. DtL attempts to reproduce the layout using Flexbox. It employs a brute-force approach to find the correct CSS properties for the containing layout, as well as the components contained within that layout.
These two steps are intertwined during the layout creation process. What results is an intermediate representation (IR), which is a program for a tiny interpreter that performs a symbolic transformation to the program. As the IR is highly abstract, it makes it possible to transform the design into various representations. Java is the first target, but there are already working examples for LitElement, plain JavaScript, Preact, Svelte, and Angular.
How to use the plugin
The plugin is only half of the story. The other half is the design system: a set of components for Figma that is configured so that it can be used to produce designs. This configuration entails inserting the tag name of the component into the description field of each component. Eventually it will be an HTML (or some other markup) snippet to allow the insertion of attributes, text, and other data.
Using this design system and the aforementioned layout component, the designer draws the UI. Once this is done, the plugin is invoked and a preview is created. The preview matches the output of the target framework. If the layouts are satisfactory and no element displays in the incorrect place, the layouts can be downloaded as a working project for the target framework. Currently, the Vaadin Java framework is the only supported target.
To try out the plugin, go to https://github.com/mjvesa/dtl and follow the instructions to install a development version. The repository also contains an example design that has been constructed so that it can be converted without any further modifications.