Overview

Card component with image and title

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:

  1. Design a UI component in Figma.
  2. Create a UI Package using the Figma plugin.
  3. Save a named version of the design.
  4. Share the Figma URL with the developers.

In Android Studio:

  1. Using the Figma URL, import the UI Package into a project.
  2. Generate Jetpack Compose code by building the project.
  3. Add a reference to the generated composable in the project’s UI code.
  4. Run the project.

Next step

First, let's make our design and create a UI Package in Figma.