Share UI Packages

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

When you are ready to share your UI Package with developers, you have multiple options:

  1. Share the entire file: Developers can import all UI Packages in the Figma file.
  2. Share a specific page: Developers can import all UI Packages in a Figma page.
  3. Share a specific package: Developers can only import a single UI Package.
  4. Share a specific Figma version for any of the above.

The procedure is the same for each: Right click the target in Figma and select Copy link.

Copy link option in the version history

After sharing this link with developers, they have the option to choose what UI Packages to import into their Android Studio project. For more details, see Android Studio workflow.

Import UI Packages field in the import dialog

Best practices

Create named versions before sharing

Creating a named version keeps UI Package definitions stable and avoids changes to the Figma file affecting production components.

  1. Add a new named version of your Figma file. In the Figma menu, select File > Save to Version History.

  2. Enter a title and description for your new version.

    Save to version history in Figma

This links the Android project to the latest named version, allowing for seamless updates. If the file has no named versions, updates in Android Studio always pull the latest auto-saved version. However, we recommend using named versions.

Advanced usage

The Relay workflow supports importing different UI Package versions in the same project, but it requires manually forming a Figma file URL.

  1. Copy the direct link to the component you want to import. Select the component layer, right click, and select Copy/Paste as > Copy link. Example:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. Select the version of the component you want to use. Go to File > Show version history and select a version. Then copy the version’s URL by right-clicking and choosing Copy link. Example:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99

  3. Combine the two URLs together to create a versioned URL for the component. You can either replace the node-id value in the versioned link with the one from the component link, or insert the version-id parameter into the link for the component, as long as you end up with both parameters present in the URL. Example:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45