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.

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.
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
andend
, and a mapping that maps the slider UI Package to an existingSlider
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, setstart = 0
andend = 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 existingSlider
composable. The generated code automatically calls theSlider
composable withstart = 0
andend = 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.

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.
- Download the sample HelloMapping.zip.
- Double-click the file to unzip it, which will create a folder called HelloMapping.
- Go to Android Studio. Go to File > Open, navigate to your HelloMapping project, and click Open.
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