Create UI Packages

UI Packages in Figma

UI Packages define a shared model for Android UI components. UI Packages are created inside Figma and are used to generate production Compose code in Android Studio. A UI Package contains the following information:

  • Layout information
  • UI Package summary
  • Content and interaction parameters
  • Styling information
  • Font and image assets

Create UI Package

Add a summary to the UI Package

To create a UI Package using the Relay for Figma plugin:

  1. Open the plugin and click Get Started.
  2. Select a Figma component you'd like to package.
  3. Click Create UI Package.

To create multiple UI packages at the same time:

  1. Select one or more Figma components.
  2. Click Create UI Packages. This creates a UI package for each selected component.

You can also refactor existing UI Package elements into new packages:

  1. Select a frame or component layer in an existing UI Package.
  2. Click the menu icon.
  3. Select “Create UI package from selection.”

After a UI Package is imported to Android Studio, Relay generates code when your Android project builds.

Add a summary

Relay for Figma with a component selected

After creating, a text field appears so you can add a summary to the UI Package. A summary appears as a comment block above the corresponding composable function in generated code.

You can also edit the summary later:

  1. Select Summary.
  2. Edit the summary in the text field.

Remove UI Packaging

Select the menu icon, and then Remove packaging. This deletes all Relay metadata but does not delete the component in Figma.

“Remove packaging” option in the plugin