Content parameters

When implemented, the content of most components is not static — it changes depending on the data that is provided to a component. To reflect this in your designs, you can use content parameters. Content parameters let you specify which part of a design contains data, without hardcoding the actual data.

Title parameter in the plugin

Add a content parameter

  1. In your Figma file, select the component and open the Relay for Figma plugin (Plugins > Relay for Figma).

    The Figma plugin with the hello card selected
  2. In the main Figma window, select the Title layer with + click on Mac, or Ctrl + click on Windows and Linux. Then, in the plugin, click + next to “Parameters” and select text-content to add a parameter for the layer.

    The parameter selection menu in the Figma plugin
  3. To change the name of the Title text content parameter, enter it in Name. For this tutorial, enter Title.

    The parameter details in the Figma plugin

    Besides editing the name, you can select different property types, or add a description to generate a comment in code. Work with your developers to find the most suitable naming scheme. The names of the content parameters translate to the names of the parameters in the generated composable.

Save named version

Let’s now mark this version as ready to be imported into code.

  1. Open the Figma Relay plugin, if not already open.
  2. Click Share with developer.
  3. On the Share with developer screen, enter a name and description for the version.

    Example Title: Hello World Card V3

    Example Description: Added parameters

Update the component in Android Studio

Let’s update the component in Android Studio.

  1. In Android Studio, make sure the Project tool window is in Android view. Then, right-click on app/ui-packages/hello_card/, and click Update UI Package.

    Update UI Package option in the context menu
  2. Click on Make Project button to build your project again.

    Build button in the toolbar

    If you open app/java/com/example/hellofigma/hellocard/HelloCard.kt, you’ll notice that a parameter has been added: title. The name of the parameter is the name of the content parameter that we specified in Figma:

    Title parameter in Figma and in the generated code
  3. Open app/java/com/example/hellofigma/MainActivity.kt.

  4. Change one line in the MainActivity class to add a value to the title parameter:

    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            setContent {
                HelloFigmaTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(color = MaterialTheme.colors.background) {
                        HelloCard(title="Balloon World!") // Change this line
  5. Further down in the same file, in the composable’s preview, change one line:

    @Preview(showBackground = true)
    fun DefaultPreview() {
        HelloFigmaTheme {
            HelloCard(title="Balloon World!") // Change this line
  6. Build your project again, and see the updated component in the preview! Note that the new parameter value is now visible.

    Preview of the Hello card with updated text style
  7. Run the app to see the same updates in the emulator.

    Hooray! You've learned the basics of the Relay workflow.

Next step

That concludes the basic tutorial. While you have seen many of the features of the Relay workflow, there are several other features available. If you're interested in learning how to use features like interaction handlers, working with components that have multiple Figma variants and more, jump in to the advanced tutorial!