Download pre-configured Figma file
Let’s start by creating a component in Figma. We’ll be using an existing Figma file as an example for this tutorial. This file contains an autolayout frame with an image and title. Make sure you’re logged into your Figma account.
- Download this Figma file to your computer: HelloFigma.fig.
In Figma’s file browser, hover over Drafts. A + icon appears. Click +, then Import…, and select the HelloFigma.fig file that you just downloaded.
Open the imported file in Figma.
Create a component
To use the imported design with the Relay for Figma plugin, we’ll first need to convert it to a component. Select the Hello Card frame and from the toolbar, click Create Component.
Create a UI Package
The Relay for Figma plugin adds extra information to the component so you can work with your developers who can use the component in their code.
Open the Relay for Figma plugin in your file (In the Figma menu: Plugins > Relay for Figma).
Select the component and click Create UI Package.
With the UI Package selected, add a description to Summary. For example: “Hello Card component used to display the image and title content”
Save a named version of the Figma file
Creating a named version of our Figma file tells the code to use this version of the component. This prevents unwanted changes from propagating to production code.
- Add a new named version of your Figma file. In the Figma menu, select File > Save to Version History.
Enter a title and description for your new version.
Example Title: “Hello World Card”
Example Description: “Initial version of the hello world card”
Next step
Convert the designs to code in Android Studio
Next, let's view the designs in code using Android Studio.