Add parameters

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

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)

background-color

  • Color parameter is generated in code.

padding (autolayout padding)

border-radius

  • Double parameter is generated in code.

Text layer

text-content

color (text color)

  • Color parameter is generated in code.

Image layer

image-content

  • Painter parameter is generated in code.

Adding parameters

  1. Select a component layer.

  2. Click + and select a parameter property.

    Adding a Parameter

Rename parameters

  1. Select a parameter.
  2. Edit the Name field.

Remove parameters

  1. Select a parameter.
  2. Click the Trash Can icon.