Create UI Package in Figma

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.

  1. Download this Figma file to your computer: HelloFigma.fig.

  2. In Figma's file browser, hover over Drafts. A + icon appears. Click +, then Import…, and select the HelloFigma.fig file that you just downloaded.

  3. 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 component icon in the toolbar

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.

  1. Open the Relay for Figma plugin in your file (In the Figma menu: Plugins > Relay for Figma). Click Get Started.

    Create UI Package button in the plugin

  2. Select the component and click Create UI Package.

    Create UI Package button in the plugin

  3. With the UI Package selected, add a description to Summary. For example: “Hello Card component used to display the image and title content”

    Summary box in the plugin

  4. 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.

Summary box in the plugin

  1. Enter a name and description for this first version of the component, then click Save.

    Summary box in the plugin

  2. Next, create a shareable component link and copy it to the clipboard by typing CMD-L on a Mac or CTRL-L on Windows.

    Summary box in the plugin

Next step

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