Handling design variants

In Figma, variants are used to group different variations of the same component together, such as different states or sizes. Relay preserves a component’s variants when it is translated to code. In this section, we’ll see how Relay handles variants in designs.

Starting point

News card with tree variants

We'll start with a Figma file that contains a News Card component with three variants:

  • hero-item is for the most important news article
  • article-item is for a typical article
  • audio-item is for an article that you listen to, instead of read

Copy Figma example

We’ll be using an existing Figma file as an example for this tutorial. Make sure you’re logged into your Figma account.

  1. Download HelloNews.fig to your computer.
  2. In Figma, go to the file browser. Along the left-hand side, hover over Drafts. A + icon will appear — click the + icon, then Import. Select the HelloNews.fig file that you just downloaded. This can take anywhere from 10 seconds to a minute.

  3. Open the imported file in Figma.

Create a UI package

The Relay for Figma plugin adds extra information to our component, so we can work with our developers who will use our component in their code.

  1. Open the Relay for Figma plugin in your file (in menu bar: Plugins > Relay for Figma). Click Get Started.
  2. Select the component and click Create UI Package.

    Create UI Package button on the plugin
  3. With the UI Package selected, add a description to the summary box. For example: “News card component intended to display news items for a list”.

    Summary box on the plugin

Save named version

Now that you have created a UI package, prepare your component to share it with the development team.

  1. Open the Figma Relay plugin, if not already open.
  2. Click Share with developer.
  3. From the Share with developer screen, you can enter a new version name and description in the Save version history section.
  4. Click Save.

    Example Title: Initial New Card

    Example Description: First iteration of the news article items

Download Android Studio project

For the Android Studio part of this tutorial, we will use a pre-configured Android Studio project. This project contains an app that displays news articles in a plain text format.

  1. Download the sample HelloNews.zip file.
  2. Double-click the file to unzip it, which will create a folder called HelloNews. Move it to your home folder.
  3. Go back to Android Studio. Go to File > Open, navigate to your home folder, select HelloNews, and click Open.
  4. When you open the project, Android Studio will ask you if you trust the project. Click Trust Project.

Import into Android Studio

Let’s import our Figma component into the project.

  1. Back in Figma, copy the URL of the News Card Tutorial Figma file. We’ll use this URL to import our components. In the upper right-hand corner of Figma, click on the Share button. In the dialog box that opens, click Copy Link.

    Copy Link option on the file tab
  2. Switch to the HelloNews project in Android Studio. Go to File > New > Import UI Packages… from the Android Studio menu bar.

    Import UI Packages… option under the File menu
  3. Paste the URL of your Figma file and click Next.

    Import UI Packages dialog
    Keychain system dialog
    1. Once the file is done fetching (which may take some time), click Finish.
    Preview of the component
  4. Click Make Project button to build your project. This may take a minute or so.

    Build button in the toolbar

Preview app & component

  1. In Android view, open app/java/com/example/hellonews/ui/home/HomeScreen.kt, you’ll see a preview of the app, which displays several news articles in a plain text format, with print stories above audio stories.

    Preview of the App
  2. Open up app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. This is the generated Jetpack Compose code for our Figma component. From the preview, we can see that three variants of the NewsCard component have been translated from Figma to code. Let’s take a closer look at the code.

    Preview of the NewsCard component
  3. The View enum allows us to choose which variant to use for this component. The name of the enum and its values were derived from the variants of our Figma component. This is used in the view parameter in our NewsCard composable.

    Variants in Figma and corresponding View enum
  4. The NewsCard composable was generated from the UI package. It includes a parameter of type View, which sets the variant of the news card to instantiate.

    package com.example.myapplication.newscard
    
    import ...
    
    // Design to select for NewsCard
    enum class View {
        HeroItem,
        ArticleItem,
        AudioItem
    }
    
    /**
    * News card component intended to display news items for a list.
    *
    * This composable was generated from the UI Package 'news_card'.
    * Generated code; do not edit directly
    */
    @Composable
    fun NewsCard(
        modifier: Modifier = Modifier,
        view: View = View.HeroItem
    ) {...}
    
    

Next up

We are not quite ready to use NewsCard yet. The component doesn’t know how to display different news stories, only the same hardcoded one in Figma. So, if we were to add the component now, all we would get is the same news story repeated. We need a way to specify which parts of NewsCard should be filled with dynamic data.

Content Parameters

In this section, we'll add content parameters to the NewsCard component.