Download pre-configured Figma file
Let's start by creating a component in Figma. For this tutorial we'll be using an existing Figma file to use as an example. This file contains an autolayout frame with an image and title. Make sure you are 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”
Click Share with developer in the lower right hand corner of the dialog to move to the next screen.
Share with developer flow
Now that you have created a UI package, prepare your component to share it with the development team.
Create a new named version of the file of the component file. Using named versions of the component prevents unwanted changes from affecting the production components.
Enter a name and description for this first version of the component, then click Save.
Next, create a shareable component link and copy it to the clipboard by typing CMD-L on a Mac or CTRL-L on Windows.
Now, you are ready to hand off your UI component to Android Studio.
Open Android studio to complete the next part of this tutorial.
Convert the designs to code in Android Studio