Parameters are the changeable aspects of a UI Package. The Relay workflow supports two types of parameters: content parameters and interaction handlers.
- Content parameters allow Compose code to dynamically change elements of a UI Package, like content and styling.
- Interaction handlers allow Compose code to respond to user input, such as long presses or double taps.
You can add parameters to the UI Package or its children. Parameter bindings are also shared across Figma variants if their target layers have identical names. Each parameter is transformed into composable function parameters in generated code.
![Parameters in Figma and the generated code](/https/developer.android.com/static/develop/ui/compose/tooling/relay/images/add-parameters/parameters.png)
Parameter properties
The layer type in Figma determines what parameter properties are available:
All layers
tap-handler (specifies a layer can be tapped)
() -> Unit
parameter is generated in code.
doubletap-handler (specifies a layer can be double tapped)
() -> Unit
parameter is generated in code.
longpress-handler (specifies a layer can be long pressed)
() -> Unit
parameter is generated in code.
Frame or group layer
children (layer contents)
Composable
parameter is generated in code.- See Children Parameters for more details.
background-color
Color
parameter is generated in code.
padding (autolayout padding)
PaddingValues
parameter is generated in code.
border-radius
Double
parameter is generated in code.
Text layer
text-content
String
parameter is generated in code if the text has only one style.AnnotatedString
parameter is generated in code if the text has multiple styles.
color (text color)
Color
parameter is generated in code.
Image layer
image-content
Painter
parameter is generated in code.
Adding parameters
- Select a component layer.
Click + and select a parameter property.
Rename parameters
- Select a parameter.
- Edit the Name field.
Remove parameters
- Select a parameter.
- Click the Trash Can icon.
Recommended for you
- Note: link text is displayed when JavaScript is off
- Compose layout basics
- Multiple Styles in Text
- Kotlin for Jetpack Compose