Stay organized with collections
Save and categorize content based on your preferences.
This basic tutorial shows you both the designer and developer workflow for
Relay, providing a complete end-to-end first experience. After the Relay plugin
setup, you can quickly get to the stage where you can see the UI appear in
Android Studio. We encourage you to stick with it!
The tutorial creates a basic card component in Figma, and imports it into
Android Studio where you can view the generated code. You'll learn how to do the
following:
In Figma:
Design a UI component in Figma.
Create a UI Package using the Figma plugin.
Save a named version of the design.
Share the Figma URL with the developers.
In Android Studio:
Using the Figma URL, import the UI Package into a project.
Generate Jetpack Compose code by building the project.
Add a reference to the generated composable in the project’s UI code.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2024-03-25 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2024-03-25 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-03-25 UTC."]]