caelumf / figmatocompose Goto Github PK

Plugin and backend to convert Figma designs to Jetpack Compose code

TypeScript 1.65% HTML 0.07% Kotlin 93.06% JavaScript 1.77% Svelte 3.44%

figmatocompose's Introduction

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

figmatocompose's People

Contributors

Stargazers

Watchers

figmatocompose's Issues

Server does dot run...

Hello, I am getting the follwing when I try to run the server:

MBP FigmaToCompose-master % ./gradlew run --args="-config=application.conf"

Task :compileKotlin FAILED

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':compileKotlin'.

Error while evaluating property 'filteredArgumentsMap' of task ':compileKotlin'
Could not resolve all files for configuration ':compileClasspath'.
> Could not resolve com.beust:klaxon:5.6.
Required by:
project :
> No matching variant of com.beust:klaxon:5.6 was found. The consumer was configured to find an API of a library compatible with Java 8, preferably in the form of class files, preferably optimized for standard JVMs, and its dependencies declared externally, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' but:
- Variant 'apiElements' capability com.beust:klaxon:5.6 declares an API of a library, packaged as a jar, preferably optimized for standard JVMs, and its dependencies declared externally, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm':
- Incompatible because this component declares a component compatible with Java 11 and the consumer needed a component compatible with Java 8
- Variant 'runtimeElements' capability com.beust:klaxon:5.6 declares a runtime of a library, packaged as a jar, preferably optimized for standard JVMs, and its dependencies declared externally, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm':
- Incompatible because this component declares a component compatible with Java 11 and the consumer needed a component compatible with Java 8

Try:

Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.

Get more help at https://help.gradle.org

BUILD FAILED in 1s
1 actionable task: 1 executed

Please advise?

many mismaches in constraintlayout-compose 1.0.0-alpha05

deps:
compose_version = '1.0.0-beta04'
implementation "androidx.constraintlayout:constraintlayout:2.0.4"
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha05"

Gradient fails with latest version of JetpackCompose

For gradient export it uses HorizontalGradient which doesn't exits in latest version.
Can be replaced with brush = Brush.horizontalGradient

how to use

please create help video

Shadow's opacity parameter doesn't exists in JetpackCompose

I used background alpha for this - not sure if that is good solution

Issues with ScrollableColumn (and probably ScrollableRow) using vSpacingArrangement and hSpacingArrangement

I'm not sure exactly why yet, but the measurement of a Column or Row does not take into consideration the spacing added from vSpacingArrangement, which does not affect the raw output of the converter, but can be problematic when it is adapted to have dynamic content.

Consider replacing vSpacingArrangemnt with something built in to Compose, or fix how it works out for the measurement of a Column or Row

Gettings error when I try to start the server.

java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

Endless running issue with different gradle version

Hi Caelum,

I am a Compose developer, who is also using Figma. Your plugin seems a game change for me.

But when I tried, it couldn't run for me. I cloned the latest version and run with ./gradlew run --args="-config=application.conf" on my Mac. But it failed either with Could not initialize class org.codehaus.groovy.reflection.ReflectionCache, or Could not initialize class org.codehaus.groovy.runtime.InvokerHelper, until I updatd the gradle distribution from gradle-6.2.2-bin to gradle-6.4.1-all.

But I got stuck again at 80% and it never went through as shown in the screenshot. I moved to the latest distribution, gradle-7.0.2-all and tried to rebuild, but still the same, running frozen at 80%.

Regards,
Matt

Exception

Exception in thread "main" java.lang.IllegalArgumentException: Neither port nor sslPort specified. Use command line options -port/-sslPort or configure connectors in application.conf

Is it alive?

Hello, is project alive? The last commit was 8 month ago. What is the overall export quality?