From Figma to Composables in Android Studio with Ease

5 min readOct 26, 2022

Setup the environment for converting your UI Components from Figma to Composable Functions in Android Studio.

Introduction

In this year’s event of Android Developers Summit, that was happening on October 24th, we have heard a lot of new things related to the future of Android Development. One that caught my attention was the alpha release of a Relay. Relay will allow us to easily implement our UI Components from Figma to Composable functions in Android Studio. Which is amazing!

I have already made a full video about that on my YouTube channel, so you can check that out as well.

Also if you are not familiar with Figma, and you would like to learn UI Design, then I have a great news, because I’ve just published an Online Course for that!

Figma Setup

I will assume that you’re already proficient with Figma. Now the first thing that you need to do, is to convert your UI Layer/Frame, into a component within a Figma. Because we can only use “Figma Components” to generate Composable functions in the Android Studio afterwards. (Components in Figma are marked with a purple diamond icon)

After you have designed your component in Figma, then you need to search for a plugin named “Relay for Figma”. Select your component and run that same plugin. You will see a similar welcome screen to the one below. Just click “Create UI Package” button to proceed.

A new window will appear. From there you will have an option to select which element of your components should be dynamically changed from the composable function. In this case we have only two text elements for the Title and Description. Which means that I’m going to select each one of those text elements inside a component, and then press a plus icon, in order to add a text-content for each one of them. That will be later translated into a composable function parameter in Android Studio.

There are different properties, for different elements you select in Figma. Here I’ve also added a tap-handler, which will represent an onClick lambda within our composable function later.

Next, after you have specified all parameters, you need to share your component with Android Studio. But how can we do that? Well quite easily, by using the Relay gradle plugin in Android Studio. But before that you need to save a version history in Figma. Each time you make change in Figma, you’ll have to save a new version history. It’s quite easy. File > Save to Version History (CTRL+ALT+S). Fill those input fields, and press “Save”.

Layer Naming

Also one important thing to note is that you should always try to keep your layers properly named in Figma. Because those layer names will be used afterwards in Android Studio to represent a Composable Function names as well.

Android Studio Setup

Now the Android Studio part. We do need to install a plugin here as well.

But before that, let’s modify our Gradle Build files a little bit. First open up the App Level Gradle Build file, and add the following:

plugins {
    ...
    id 'com.google.relay'
}android {
    ...
    sourceSets {
        main {
            assets {
                srcDir('src/main/ui-packages')
            }
        }
    }
    ...
}

Next open up the Project Level Gradle Build file, and add the following:

buildscript {
    ...
    dependencies {
        classpath "com.google.relay:relay-gradle-plugin:0.3.00"
    }
}
plugins {
    ...
    id 'com.google.relay' version '0.3.00'
}

That’s it. Now search for a plugin under the name of “Relay for Android Studio”. After you install the plugin, go to Tools > Relay Settings. A new window will appear, where you need to paste your Figma Access Key (Only the first time).

To get the access key, open up the home page of your Figma. Click your profile icon on the top right corner, and then open up the Settings. Scroll all the way down, until you see “Personal access tokens” section.

In the input field, just enter some random name, press enter and then the access key will be generated. Copy that access key back to your Android Studio and press OK. That’s it, now you’re good to go!

Import UI Package

Now the fun part. To convert your UI Component into a Composable function you need to copy the URL of your Figma project. To do that, just open up the Figma project, and in the top left corner you will see a blue “Share” button. Once you click it, then a new window will appear, where you can just press “Copy link” button and then the link will be automatically copied to your clipboard.

Next, open up Android Studio, and select option: File > Import UI Packages…

New window will show up. Just paste that Link from Figma and click “Next”. Wait a little bit, and then a new window similar to this one will appear:

Here you can see all the parameters and interaction handlers that we have specified in Figma. Click “Finish”. Relay gradle Plugin will generate some files inside that path that we have specified earlier in our Gradle Build file: src/main/ui-packages. One more step!

Finally click that green hammer icon called “Make Project”, and then new composable functions will be generated in your project! Congratz!🎉

Now open up the generated Composable Functions, and inspect them! NOTE: You shouldn’t modify those generated Kotlin files, because they are automatically handled by the relay gradle plugin.