Create UI Package in Figma

Stay organized with collections Save and categorize content based on your preferences.

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.

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

    Relay for Figma
  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

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.

  1. Add a new named version of your Figma file. In the Figma menu, select File > Save to Version History.
  2. Enter a title and description for your new version.

    Example Title: “Hello World Card”

    Example Description: “Initial version of the hello world card”

    Save to version history in Figma

Next step

Convert the designs to code in Android Studio

Next, let's view the designs in code using Android Studio.