Skip to content

Plugin and backend to convert Figma designs to Jetpack Compose code

Notifications You must be signed in to change notification settings

CaelumF/FigmaToCompose

Repository files navigation

Designs to Jetpack Compose converter

Easily convert Figma designs directly to Jetpack Compose code. (Not affiliated with either of them)

This project contains a plugin that sends the selected Figma json to localhost:9020, and a kotlin backend that converts this json to Jetpack Compose and sets the clipboard to it

See a video and lacking css at the github io page

Version compatibility

This works surprisingly well even when several versions outdated with the latest JetPack Compose. A few modifiers may be deprecated, but you can use Android Studio to automatically replace them.

The latest Compose version I personally have used it with is: Jetpack Compose: rc-02

Usage:

With the plugin installed, start the server by cloning this repo, cd-ing into it and running:

(currently seems to depend on JVM 8)

For Linux or Mac OSX ./gradlew run --args="-config=application.conf"

For Windows, in the terminal with WSL installed wsl

bash

dos2unix gradlew

./gradlew run --args="-config=application.conf"

When using the plugin with a Windows plugin, disable copy to clipboard or else it will crash from being unable to find an X11 server's clipboard to access, and if it can it's probably not very useful

This requires a JDK installed, if you're doing Android dev it probably already is :)

Now you can open the plugin window in Figma, select a node, and click "Genarate" to get the Jetpack Compose code to display it!

Use cases

Often times designs contain non-repeated distances, colours and proportions. Replicating these designs can be very tedious, and discrepancies in design and implementation can lead to "split realities".

Primarily, this is to cut out taking measurements, reduce design-implementation back and fourth and save time/energy even when the designer and implementer are the same person

Features / mappings

feature Jetpack Compose feature Note Missing / to-do
Frame Constraint Layout Supports start, end, scale, stretch, start-end (maintain margins dp), center auto remove redundant constraints
Nested nodes Composables with nested calls to them This is a nice solution for updating implementation to design
Group Box !Recommend using the dropdown to convert to a Frame and restart plugin as workaround for figma bug Pass parent group's constraints to group's children
Text Text Supports solid colours, font size vertical and horizontal text align Font family, bold, italic, advanced Figma features
Auto layout Row/Column
Vectors Image(vectorResource(...)) Creates a vector painter looking at a drawable with the svg export name on nodes with svg exports Automation for importing svgs from figma
Rectangle Box Includes generic "style mods" (bg, shadow, )
Shadow fill shadow Does not work well for non-rectangles or where shadow is applied to parent of many children Other shapes, find solution for shadows on parents
Corner Radius .clip(CornerRadiusShape)
Gradient fill background(HorizontalGradient(...) Only currently supports horizontal gradients

Development

The backend server accepts Figma's json on a post to / on port 9020. Port configurable from application.conf

Figma plugin development

For Linux

Unfortunately for now a shared clipboard from a Windows or Mac VM or a host running Barrier is needed to "conveniently" use local changes, until Figma supports developing / running unpublished plugins on Linux

Mac or Windows

Within the FigmaPlugin directory lies the code to a plugin that can be imported on Windows or Mac. In Figma client app (not web), go to Plugins -> Development > New Plugin and select the manifest.json

Troubleshooting

ArrayIndexOutOfBounds error in rendering

Check that there are no recursive composables, and make that no Figma components have the same name.

TODO:

See Issues

About

Plugin and backend to convert Figma designs to Jetpack Compose code

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •