Relay

What Is Relay?

Relay is a free design handoff tool in the design-tools category that enables direct import of Figma designs into Android Studio projects. It generates Jetpack Compose code from UI components created in Figma, facilitating collaboration between designers and developers during the handoff process. Relay fits into the design workflow after UI components are designed in Figma, allowing teams to package designs as UI packages that include layout, styling, dynamic content, and interaction details for code generation in Android development.

What Relay Does

• Imports Figma UI components into Android Studio via plugins for Figma and Android Studio, along with a Gradle plugin.
• Generates pixel-perfect Jetpack Compose code from annotated Figma designs, preserving typography, shapes, and flexible layouts.
• Packages UI components in Figma with parameters for dynamic elements like text, images, gestures, and content slots.
• Stores imported UI packages in the project under a ui-packages directory, including assets such as images and fonts.
• Supports updates to UI packages from Figma, allowing developers to apply changes with a button click in Android Studio.
• Handles design system components by mapping to custom implementations and supplying properties like accessibility labels.

How Relay Can Be Used

• Designers annotate UI components in Figma using the Relay plugin, specify parameters for dynamic content and interactions, then save and share the UI package link.
• Developers import the UI package link in Android Studio, select themes like Material 3, and build the project to generate composable functions.
• Teams update designs in Figma and propagate changes to Android projects without manual recreation, maintaining consistency in splash screens, cards, chips, or badges.
• Integrate generated code into layouts, customize with content parameters for icons, titles, or radio buttons, and map variants for different states.
• Use in workflows transitioning to Jetpack Compose, where Figma design systems are adapted for Android-specific implementation.

Who Is Relay For?

Relay serves Android developers and UI designers working with Figma and Jetpack Compose, particularly teams facing handoff challenges in translating designs to code. It suits roles in mobile app development, such as Android engineers building components from shared design systems, and collaborative projects requiring frequent UI updates without misinterpretation of intent. Experience levels range from developers familiar with Android Studio plugins to design teams using Figma for component libraries. Visit Relay