Overview

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

In this tutorial, we'll walk through the Component Mapping feature in Relay.

Many design systems already have implementations for their components in code that are to be reused across applications. These implementations can have complex behavior built in. Developers can customize the code generation process by providing a mapping between a UI Package and an existing code component, rather than generating new code.

Mapped component overview diagram

Who is this for

Component mapping is an advanced feature. Designers and engineers who build and manage a design system can use this feature to significantly streamline the design–implementation process for everyone who uses the system.

When to use the feature

Mapped components are useful when:

  • There are UI components that require complex behavior that is difficult to prescribe in Figma. For example, a drop-down menu supports opening, closing, selection of items, scrolling, accessibility support, and other behaviors. Other basic UI components, such as sliders, text input, and toggles, have similar complexity. For these components, it is easier to use code components and map Figma components to them.

    Slider, text input, toggles, and drop-down menu as examples of common components with complex behavior

  • The team wants to use existing implementations either made by themselves, or from an external library.

  • The team wants designers to be able to directly configure aspects of the component themselves. For example, suppose an organization has set up a design system that includes a Slider UI Package with two parameters, start and end, and a mapping that maps the slider UI Package to an existing Slider composable with the same two parameters. Now suppose a designer needs a slider from 0 to 50. The designer can use the Slider UI Package and, using Relay for Figma, set start = 0 and end = 50. Then, the developer imports the slider UI Package into their Android Studio project, which uses the mapping to map the Figma slider to the existing Slider composable. The generated code automatically calls the Slider composable with start = 0 and end = 50. The developer doesn’t need to ask the designer what the slider’s range should be.

Using variants

It is common practice to use variants in Figma. Your component might have different variations and states that correspond to different composable functions or parameter configuration in code. In a case like this, you can also write custom code to achieve more complex transformations.

Mapping with variants overview diagram

Download the sample project

We will be using this Android Studio project for the following tutorials. This project contains three main Kotlin files: MyPlayBar.kt, Chip.kt, and MyChip.kt.

  1. Download the sample HelloMapping.zip.
  2. Double-click the file to unzip it, which will create a folder called HelloMapping.
  3. Go to Android Studio. Go to File > Open, navigate to your HelloMapping project, and click Open.

  4. When you open the project, Android Studio will ask you if you trust the project. Click Trust Project.

Next Step

There are two tutorials for mapped components:

  • 1-to-1 mapping — where you’ll learn how to create a simple 1-to-1 mapping between a Figma component and a code component
  • Mapping with variants — where you’ll learn how to create a mapping between a component with variants and a code component using advanced transformation