Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Relay: The future of design-to-code workflows

Love
November 28, 2023

Relay: The future of design-to-code workflows

Relay is a new tool that enables seamless handoff for Android UI development. It enables you to effortlessly import Figma designs directly into your Jetpack Compose projects. Relay automates the creation of pixel-perfect Jetpack Compose code, liberating developers from manual layout coding and styling concerns. With Relay, you can focus on other critical aspects of application development.

Discover how to harness the power of Relay for importing Figma UI designs. Learn about its dynamic theming and adaptive layout support, and leave with the ability to transform your Figma designs into high-quality Jetpack Compose code. No prior experience with Relay or Compose is required.

Love

November 28, 2023
Tweet

More Decks by Love

Other Decks in Technology

Transcript

  1. Relay: The future of
    design-to-code
    workflows
    Lagos

    View full-size slide

  2. Who is this session for?

    View full-size slide

  3. Who is this session for?
    1. Designers
    2. Developers
    3. Anyone else who wants to create beautiful and
    consistent Android apps

    View full-size slide

  4. Prerequisites
    and Tools
    Lagos

    View full-size slide

  5. To complete this codelab, you need:
    1. A free Figma account.

    View full-size slide

  6. To complete this codelab, you need:
    1. A free Figma account.
    2. The Java Runtime installed.

    View full-size slide

  7. To complete this codelab, you need:
    1. A free Figma account.
    2. The Java Runtime installed.
    3. Jetpack Compose version 1.2 or later.

    View full-size slide

  8. To complete this codelab, you need:
    1. A free Figma account.
    2. The Java Runtime installed.
    3. Jetpack Compose version 1.2 or later.
    4. Gradle Plugin version 8.0 or later.

    View full-size slide

  9. To complete this codelab, you need:
    1. A free Figma account.
    2. The Java Runtime installed.
    3. Jetpack Compose version 1.2 or later.
    4. Gradle Plugin version 8.0 or later.
    5. Android Studio 2022.2.1 Flamingo or later.

    View full-size slide

  10. What if I don’t have these?

    View full-size slide

  11. Learning Outcomes
    1. Install the Relay plugin and perform a basic setup.
    2. Import UI packages to an Android project in Android
    Studio.
    3. Create and Use Content Parameters to dynamically
    change the content of a UI component.

    View full-size slide

  12. What is Relay?
    Lagos

    View full-size slide

  13. A Design-to-code tool for
    Android UI development.
    What is Relay?

    View full-size slide

  14. Automatically generates
    pixel-perfect Jetpack
    Compose Code from Figma
    UI.
    What is Relay?

    View full-size slide

  15. How Does Relay
    Work?
    Lagos

    View full-size slide

  16. Designers use the Relay for
    Figma plugin to annotate and
    package UI components for
    developer use.
    How it Works?

    View full-size slide

  17. Developers use the Relay for
    Android Studio plugin to
    import UI Packages and
    generate pixel-perfect Jetpack
    Compose code.
    How it Works?

    View full-size slide

  18. With the Relay for Figma
    plugin, designers and
    developers can work together
    to add content parameters and
    interaction handlers.
    How it Works?

    View full-size slide

  19. Lagos
    Why use Relay?

    View full-size slide

  20. Why use Relay?
    1. Designers have more control over UI component quality.

    View full-size slide

  21. Why use Relay?
    1. Designers have more control over UI component quality.
    2. Saves time and increases efficiency in UI development.

    View full-size slide

  22. Why use Relay?
    1. Designers have more control over UI component quality.
    2. Saves time and increases efficiency in UI development.
    3. Easier updates and changes to the UI.

    View full-size slide

  23. Enough of the
    Theory already

    View full-size slide

  24. Create a New
    Compose Project In
    Android Studio
    Lagos

    View full-size slide

  25. Create a New Compose Project in
    Android Studio
    1. Launch Android Studio.
    2. Create a new Empty Activity project.
    If you are using an older version of Android
    Studio, create a Material3 Compose project.

    View full-size slide

  26. Install Relay
    Plugin and Basic
    Setup
    Lagos

    View full-size slide

  27. Install the Relay
    for Android Studio
    plugin
    Lagos

    View full-size slide

  28. Step 1: In Android Studio, go to Settings
    -> Plugins.
    Install the Relay for Android Studio plugin

    View full-size slide

  29. Step 2: Search for "Relay for Android Studio"
    Install the Relay for Android Studio plugin

    View full-size slide

  30. Step 2 image

    View full-size slide

  31. Step 3: Click on “Install” and accept the Third-Party
    Plugins Privacy Note.
    Install the Relay for Android Studio plugin

    View full-size slide

  32. Step 4: After installation, click on the “Restart IDE”
    button and select “Restart".
    Install the Relay for Android Studio plugin

    View full-size slide

  33. Step 4 image

    View full-size slide

  34. Add the Relay
    Gradle plugin to
    your project
    Lagos

    View full-size slide

  35. Step 1: In the module-level build.gradle file, add the
    following code to the Plugins section:
    Add the Relay Gradle plugin to your project
    plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.relay") version "0.3.09"
    }

    View full-size slide

  36. Step 2: Ensure your settings.gradle file includes the
    pluginManagement section with the following repositories:
    Add the Relay Gradle plugin to your project
    pluginManagement {
    repositories {
    google()
    mavenCentral()
    gradlePluginPortal()
    }
    }

    View full-size slide

  37. Step 3: Sync your project to apply the changes.
    Add the Relay Gradle plugin to your project

    View full-size slide

  38. Install the Relay
    for Figma Plugin
    Lagos

    View full-size slide

  39. Step 1: Open this link:
    https://bit.ly/relay_ui to access
    the UI component on Figma.
    Scan the QR Code to access the figma
    file
    Install the Relay for Figma Plugin

    View full-size slide

  40. Step 2: Click on "Open in Figma" to open the UI
    component on Figma
    Install the Relay for Figma Plugin

    View full-size slide

  41. Step 3: In the top-left corner of the screen, click on the
    main menu (represented by the Figma icon)
    and go to Plugins -> Find more Plugins.
    Install the Relay for Figma Plugin

    View full-size slide

  42. Step 3 image

    View full-size slide

  43. Step 4: In the search bar, enter "Relay for Figma" and
    the Relay for Figma Plugin will appear.
    Install the Relay for Figma Plugin

    View full-size slide

  44. Step 4 image

    View full-size slide

  45. Step 5: Click on the "Run" button.
    Install the Relay for Figma Plugin

    View full-size slide

  46. The Relay plugin is
    now activated on the
    Figma board.

    View full-size slide

  47. Setup Figma
    Access
    Lagos

    View full-size slide

  48. Generate Figma
    Personal Token
    Lagos

    View full-size slide

  49. Step 1: Log in to Figma.com or create an account.
    Generate Figma Personal Token

    View full-size slide

  50. Step 2: Click on your profile icon at the
    top left corner of the screen.
    From the drop-down menu under
    your profile, click on "Settings".
    Generate Figma Personal Token

    View full-size slide

  51. Step 3: Scroll down to the "Personal access
    tokens" section and click on
    "Generate new token".
    Generate Figma Personal Token

    View full-size slide

  52. Step 4: In the window that appears, enter a token name in
    the text Field. In the "Expiration" Section, you can
    choose how long you want this token to last and
    manage its scope in the Scopes section.
    Generate Figma Personal Token

    View full-size slide

  53. Step 4 image

    View full-size slide

  54. Step 5: Click on "Generate token". On the dialogue
    box that appears, click on "Copy this token" to
    copy the generated token.
    Generate Figma Personal Token

    View full-size slide

  55. Step 5 image

    View full-size slide

  56. Add The Figma
    Access Token To
    Android Studio
    Lagos

    View full-size slide

  57. Step 1: In Android Studio, navigate to Tools -> Relay
    Settings.
    Add The Figma Access Token To
    Android Studio

    View full-size slide

  58. Step 2: In the dialogue that appears, paste the generated
    token into the "Figma Access Token" text field.
    Click on "OK".
    Add The Figma Access Token To
    Android Studio

    View full-size slide

  59. Install Relay
    Plugin and Basic
    Setup

    View full-size slide

  60. Lagos
    Create a UI
    Package

    View full-size slide

  61. Step 1: Select the “splash screen” frame
    from the left sidebar, right-click,
    and select "Create component".
    Create a UI Package

    View full-size slide

  62. Step 2: If the Relay for Figma plugin is not running, open
    it by going to Menu -> Plugins -> Relay for
    Figma.
    Create a UI Package

    View full-size slide

  63. Step 3: Select the “Splash Screen Component” and
    Click on the “Get Started” -> "Create UI
    Package" button on the Relay for Figma Plugin
    window.
    Create a UI Package

    View full-size slide

  64. Step 4: In the window that appears, enter a description
    for the component in the summary input text
    field.
    Create a UI Package

    View full-size slide

  65. Step 4 image

    View full-size slide

  66. Step 5: Click on "Share with developer". In the Share
    with developer window that appears, under the
    “Save version history” section, enter a version
    name for the file and describe the changes
    made(similar to commits).
    Create a UI Package

    View full-size slide

  67. Step 5 image

    View full-size slide

  68. Step 6: Click on "Save"
    Create a UI Package

    View full-size slide

  69. Step 7: Copy the shareable component link by pressing
    CMD+L and CMD+C (Mac) or CTRL+L and
    CTRL+C (Windows). This link will be shared with
    the developer for importing the UI package.
    Create a UI Package

    View full-size slide

  70. Import UI
    Packages in
    Android Studio
    Lagos

    View full-size slide

  71. Step 1: In your project on Android Studio, go to File ->
    New -> Import UI Packages.
    Import UI Packages in Android Studio

    View full-size slide

  72. Step 1: In your project on Android Studio, go to File ->
    New -> Import UI Packages.
    Import UI Packages in Android Studio

    View full-size slide

  73. Step 2: In the Import UI Packages window that opens,
    paste the component link from Figma into the
    Figma source URL input text field.
    Import UI Packages in Android Studio

    View full-size slide

  74. Step 3: In the App theme text field, select
    the desired theme (e.g. Material 3
    theme in this codelab).
    Import UI Packages in Android Studio

    View full-size slide

  75. Step 4: Click on "Next" to fetch the UI
    packages. A loading screen will
    appear as shown:
    Import UI Packages in Android Studio

    View full-size slide

  76. Step 5: Once the fetching is complete and the UI
    packages are fetched, make sure all packages
    are selected on the left panel.
    Click on "Create" to import the packages into
    your Project.
    Import UI Packages in Android Studio

    View full-size slide

  77. Step 5 image

    View full-size slide

  78. Step 6: In the project view, You will see the ui-packages
    folder, inside the app/main folder. This contains the
    imported Figma packages and their JSON format API.
    Import UI Packages in Android Studio
    If you do not see the ui-packages folder, right-click on the
    app folder and select "Reload from Disk".

    View full-size slide

  79. Step 6 image

    View full-size slide

  80. Generate The
    Compose Functions
    Lagos

    View full-size slide

  81. Step 1: On your Android Studio toolbar, click on "Make
    project" . This will generate the composable
    function for the UI package and add it to the
    project folder.
    Generate The Compose Functions

    View full-size slide

  82. Step 2: After a successful build, in the Android view of
    your project, you can see the generated
    composable function SplashScreen.kt in the
    generated java folder.
    Generate The Compose Functions

    View full-size slide

  83. Step 2 image

    View full-size slide

  84. Use The Generated
    Compose Function
    Lagos

    View full-size slide

  85. Step 1: In the MainActivity.kt, inside the setContent{},
    replace the function call to Greeting("Android")
    with SplashScreen()
    Use The Generated Compose Function

    View full-size slide

  86. Step 1 image

    View full-size slide

  87. Step 2: Replace the function call to
    Greeting("Android") with SplashScreen() in the
    DefaultPreview() Composable function in the
    MainActivity.kt class.
    Use The Generated Compose Function

    View full-size slide

  88. Step 2 image

    View full-size slide

  89. Step 3: Run your project as you normally would.
    Use The Generated Compose Function

    View full-size slide

  90. Add parameters
    Lagos

    View full-size slide

  91. Parameters are the
    changeable aspects of a UI
    Package

    View full-size slide

  92. Relay supports 2 types of
    Parameters:
    - Content parameters
    - Interaction handlers

    View full-size slide

  93. Update UI to Use
    Content
    Parameters
    Lagos

    View full-size slide

  94. Update UI to Use Content Parameters
    You will create a content parameter for your name which will
    replace the static string: “There” in the UI.

    View full-size slide

  95. Add a Content
    Parameter to
    Figma UI
    Lagos

    View full-size slide

  96. Step 1: If the Relay for Figma plugin is not running,
    open it by going to Menu -> Plugins -> Relay
    for Figma.
    Add a Content Parameter to Figma UI

    View full-size slide

  97. Step 2: Select the Splash screen component and CMD +
    Click (Mac) or CTRL + Click (Windows) on the text:
    “There” to select the "name" layer. You can also
    select the name layer by clicking on "name" in the
    left sidebar.
    Add a Content Parameter to Figma UI

    View full-size slide

  98. Step 2 image

    View full-size slide

  99. Step 3: On the Relay for Figma window, click the “+”
    icon next to the Parameters section to add a
    parameter and select “text-content” as the
    parameter type.
    Add a Content Parameter to Figma UI

    View full-size slide

  100. Step 4: Enter the name of the content parameter into
    the Name input text field. This represents the
    name of the parameter in the generated
    composable function.
    Add a Content Parameter to Figma UI

    View full-size slide

  101. Step 5: Enter a description that will generate a
    comment in your composable function to
    describe the parameter.
    Add a Content Parameter to Figma UI

    View full-size slide

  102. Step 5 image

    View full-size slide

  103. Step 6: Click on "Share with developer". In the Save
    version history section, enter a version name
    for the file and describe the changes made.
    Click on "Save".
    Add a Content Parameter to Figma UI

    View full-size slide

  104. Step 6 image

    View full-size slide

  105. Update UI
    component in
    Android Studio
    Lagos

    View full-size slide

  106. Step 1: In the ui-packages folder, select the imported
    Figma package you want to update
    (splash_screen folder).
    Update UI component in Android
    Studio

    View full-size slide

  107. Step 2: Right-click on the splash_screen folder and
    click on "Update UI Package".
    Update UI component in Android
    Studio

    View full-size slide

  108. Step 2 image

    View full-size slide

  109. Step 3: After a successful download and import, click
    on “Make project” to rebuild your project and
    update the generated composable functions.
    Update UI component in Android
    Studio

    View full-size slide

  110. Step 3 image

    View full-size slide

  111. Step 4: In the MainActivity, update the onCreate() and
    composables Preview where you called the
    SplashScreen() function by passing an argument
    for the parameter name.
    Update UI component in Android
    Studio

    View full-size slide

  112. Step 4 image (i)

    View full-size slide

  113. Step 4 image (ii)

    View full-size slide

  114. Step 5: Run your project as you normally would.
    Update UI component in Android
    Studio

    View full-size slide

  115. Thank You 😊!

    View full-size slide

  116. Follow me on X
    formerly Twitter:
    @lamoureSparus

    View full-size slide