Automatically generate Compose code from Figma designs.
Go directly from Figma design screens:
To Jetpack Compose Android files:
Log In Page
List Page
Settings Page
Supports dynamic component nesting and other plugins and wrappings with minimal native Figma project tags:
And rapidly bootstraps Figma native designs:
We propose a tag based approach to generate native Android components from Figma natives (a tag looks like [example-tag] used in the name of a Figma structure). A project can contain any number of screens, each with their own tagged components or nested components.
To use the project, clone and build the project, and run the generator using the loadFromApi commands, which requires the id of the Figma project (found in the project url) and the personal Figma API token.
Example command line arguments: loadFromApi fakeProjectIdABC123 personalApiToken
Use the following example project to see how you can annotate your own project for generation. You can check out the generated code of this project in /examples
There are several custom components that can be implemented. They use the tags approach seen above. Currently the following are implemented:
-
Button (tag: [button]) - generates a button with the text of the Figma component. It needs to have a text component as a child.
-
Text field (tag: [text-field]) - generates a text field with the text of the Figma component. It needs to have a text component as a child.
-
Row (tag: [row]) - generates a row with the children of the Figma component. It needs to have at least one child.
-
Column (tag: [column]) - generates a column with the children of the Figma component. It needs to have at least one child.
The project was intended to be used with Material Design. Several components are already implemented (buttons, text fields, switches, checkboxes, lists and list items). You can directly fetch the annotated components at this link. The Material Design tags have the following structure: [m3:component-name].