Android Studio workflow

Import a UI Package

Once you create a UI Package in Figma, you can import it into your Android Studio project. When the project is built, Relay generates Jetpack Compose code.

To import a UI Package into an Android Studio project:

  1. Select File > New > Import UI Packages…

    Import UI Packages… option under the File menu

  2. Enter the URL for a Figma file that contains a UI Package.

    Import UI Packages dialog

  3. Click Next.

  4. Select the UI Packages you would like to import. The components that are shown depend on whether you pasted a component, page, or file link. If a UI Package is already imported, it is labeled “UPDATED”. Otherwise, it shows as “NEW.”

    Preview of the components

  5. Click Finish to import the selected packages and their dependencies into the ui-packages folder.

UI Package import screen

The import screen includes the following information:

UI Package import screen
  • A preview image of the component and its variants.
  • A title and description.
  • A list of variants and their properties.
  • A list of content parameters and their types.
  • A list of interaction handlers and their types.

UI Package tool window

UI Package Sidebar

The Android Studio plugin adds a tool window called UI Package. It opens whenever you select a file within a UI Package folder (e.g., app/src/main/ui-packages/mycomponent/). The tool window displays a summary of the UI Package and its contents.

Build your Android Project

When you build an Android Studio project containing a UI Package, the Relay Gradle plugin generates code from the UI Package and compiles it. Font assets are also downloaded and copied into your project.

If you wish to build only the imported UI Packages and not your entire project, you can run these specific Gradle tasks:

  • generateDebugRelayCode or generateReleaseRelayCode generates debug or release versions of code derived from the UI Package.
  • generateRelayRuntimeCode creates the runtime library used by the generated code.

During the build process:

  1. Code is generated from the UI Package and stored in separate folders.
  2. Images and fonts are copied into a common generated resource folder.

The location of the folders are documented in Understand UI Package & Generated Code.

Update a UI Package

When a new version of a design is ready, the designer should create a new named version of the Figma file.

In Android Studio, make sure the Project tool window is in Android view.

  1. Under the ui-packages folder in your module, right-click the UI Package(s) folder you want to update, and then select Update UI Package(s). In the following example, we've selected five UI Packages to update.

    Update 5 UI Packages option in the context menu

  2. You can also right-click on the ui-packages folder to update all UI packages.

    Update All UI Packages option in the context menu