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….

    Import UI Packages… option under the File menu
  6. In the Import UI Packages dialog, paste the URL of your Figma file and click Next.

    Import UI Package dialog
    Keychain system dialog
  7. Wait for the file to download. When successfully downloaded, the component preview is displayed. Click Create.

    Preview of the component

    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:

    UI-packages folder in the Android view
    • 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 Make Project button to build your project.

    Make Project button in the toolbar
  2. To view the build result, click the Build tab.

    Build tab at bottom of the Android Studio
  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:

    Generated code in the Android 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.

    Preview of the component

    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.

    Run button in the toolbar

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

    App preview in the emulator

    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.