Content parameters

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

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 a named version

Now let’s integrate the updated component into your codebase. To ensure that developers use the latest version of your component, create a new named version:

  1. Go to File > Save to version history, and then enter a title and description of your new version.

    Example Title: Hello World Card V3

    Example Description: Added parameters

    Save to version history option in the menu

Update the component in Android Studio

Let’s update the component:

  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. (You will get a build error — we will get to that in a moment.)

    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

    However, you are now getting a build error, No value passed for parameter 'title', because the code in MainActivity calling HelloCard does not include a value for the new title parameter. We need to fix MainActivity to pass in a value to HelloCard’s title parameter.

  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?) {
            super.onCreate(savedInstanceState)
            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)
    @Composable
    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!