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.
Download the pre-configured Android Studio project ZIP file (which is the same project as in the Install Relay page).
Double-click the file to unzip it, which creates a folder called HelloFigma. Move it to your home folder..
Go back to Android Studio. Go to File > Open, navigate to your home folder, select HelloFigma, and click Open.
When you open the project, Android Studio may ask you if you trust the project. Click Trust Project.
In Android Studio, select File > New > Import UI Packages….
In the Import UI Packages dialog, paste the URL of your Figma file and click Next.
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
Click on to build your project.
To view the build result, click the Build tab.
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.
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.
In
app/java/com/example/hellofigma/MainActivity.kt
, add to the import section at the top:import com.example.hellofigma.hellocard.HelloCard
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 } } } } }
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 } }
Make sure a device is selected in the toolbar.
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.
Recommended for you
- Note: link text is displayed when JavaScript is off
- Content parameters
- Make and propagate design updates
- Handling design variants