Convert the designs to code in Android Studio

Import design from Figma

Now, we are going to incorporate the UI Package created in Figma into the Android Studio project. To incorporate the UI Package, copy the share URL that we generated in the previous section into Android Studio’s import wizard.

1. Download the pre-configured Android Studio project ZIP file (which is the same project as in the Install Relay page).

2. Double-click the file to unzip it, which creates a folder called HelloFigma. Move it to your home folder..

3. Go back to Android Studio. Go to File > Open, navigate to your home folder, select HelloFigma, and click Open.

4. When you open the project, Android Studio may ask you if you trust the project. Click Trust Project.

5. In Android Studio, select File > New > Import UI Packages….

   

6. In the Import UI Packages dialog, paste the URL of your Figma file and click Next.

   

   

7. Wait for the file to download. When successfully downloaded, the component preview is displayed. Click Create.

   

   Notice that new files have been added to your project — these should be committed to source control as part of your project. In the Android view of your project, you’ll see:

   

   • app/ui-packages/hello_card/*
     All source assets required to describe the component in code. These files are used for code generation in the build step.

   • app/ui-packages/hello_card/hello_card.json
     The JSON file which contains the definition of the component (including its layout and other properties).

   • app/ui-packages/hello_card/fonts/*
     Any font files required to support the component in Jetpack Compose.

   • app/ui-packages/hello_card/*.png or *.jpeg
     Any image assets required to support the component.

   • app/ui-packages/hello_card/VERSION.txt
     The version of the Relay for Android Studio plugin used to import the UI Package.

   • app/ui-packages/hello_card/config.json
     The theme used for previews.

Build & generate code

1. Click on to build your project.

   

2. To view the build result, click the Build tab.

   

3. Generated code is now added to your project. Since this is generated code, it should not be committed to source control as part of your project. In the Android view of your project, you can view:

   

   • app/java (generated)/com/example/hellofigma/hellocard
     Generated Jetpack Compose code and fonts.

   • app/java (generated)/com/google/relay/compose
     Shared runtime code that is used across all UI Packages.

4. Open app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt. This is the generated Jetpack Compose function for the Figma component. You can also preview the component.

   The layout, assets, and styling information are now transferred from Figma to code.

   

   In the code, the summary added in Figma is now translated to a comment above the generated composable.

    /**
    * Hello Card component used to display the image and the title content
    *
    * This composable was generated from the UI package ‘ hello_card’
    * Generated code; do not edit directly
    */
   @Composable
   fun HelloCard(modifier: Modifier = Modifier) {...
   

Integrate component & run app

Now, let’s integrate the component to the main activity.

1. In app/java/com/example/hellofigma/MainActivity.kt, add to the import section at the top:

   import com.example.hellofigma.hellocard.HelloCard
   

2. Further down in the same file, change the following code in the MainActivity class:

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       // Greeting("Android") // Delete this line
                       HelloCard()  // Add this line
                   }
               }
           }
       }
   }
   

3. Further down in the same file, in the composable’s preview, change one line:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. Make sure a device is selected in the toolbar.

5. Run the project by clicking ▶ in the toolbar.

   

   The emulator will boot up, the project will build, and your app will start.

   

   Congratulations! You have successfully incorporated your first Figma component into a Jetpack Compose app!

Next step

Make and propagate design updates

Now that you have an end-to-end working example, let's see how to update the original design and regenerate our code.