DEVFEST BANJUL 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.

Join my workshop to 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.

Prerequisites:
- Android Studio Electric Eel or later
- A Free Figma account
- Basic knowledge of Android Development

Audience:
- Android developers
- UI/UX designers

Transcript

1. Relay: The future of design-to-code workflows Banjul
3. Who is this session for?
4. Who is this session for? 1. Designers 2. Developers 3. Anyone else who wants to create beautiful and consistent Android apps
5. Prerequisites and Tools Banjul
6. To complete this codelab, you need: 1. A free Figma account.
7. To complete this codelab, you need: 1. A free Figma account. 2. The Java Runtime installed.
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.
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.
10. 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.
11. What if I don’t have these?
13. 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.
15. What is Relay? Banjul
16. A Design-to-code tool for Android UI development. What is Relay?
17. Automatically generates pixel-perfect Jetpack Compose Code from Figma UI. What is Relay?
18. How Does Relay Work? Banjul
19. Designers use the Relay for Figma plugin to annotate and package UI components for developer use. How it Works?
20. Developers use the Relay for Android Studio plugin to import UI Packages and generate pixel-perfect Jetpack Compose code. How it Works?
21. With the Relay for Figma plugin, designers and developers can work together to add content parameters and interaction handlers. How it Works?
22. Banjul Why use Relay?
23. Why use Relay? 1. Designers have more control over UI component quality.
24. Why use Relay? 1. Designers have more control over UI component quality. 2. Saves time and increases efficiency in UI development.
25. 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.
26. Enough of the Theory already
27. Create a New Compose Project In Android Studio Banjul
28. 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.
29. Install Relay Plugin and Basic Setup Banjul
30. Install the Relay for Android Studio plugin Banjul
31. Step 1: In Android Studio, go to Settings -> Plugins. Install the Relay for Android Studio plugin
32. Step 2: Search for "Relay for Android Studio" Install the Relay for Android Studio plugin
33. Step 2 image
34. Step 3: Click on “Install” and accept the Third-Party Plugins Privacy Note. Install the Relay for Android Studio plugin
35. Step 4: After installation, click on the “Restart IDE” button and select “Restart". Install the Relay for Android Studio plugin
36. Step 4 image
37. Add the Relay Gradle plugin to your project Banjul
38. 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" }
39. 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() } }
40. Step 3: Sync your project to apply the changes. Add the Relay Gradle plugin to your project
41. Install the Relay for Figma Plugin Banjul
42. 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
43. Step 2: Click on "Open in Figma" to open the UI component on Figma Install the Relay for Figma Plugin
44. 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
45. Step 3 image
46. Step 4: In the search bar, enter "Relay for Figma" and the Relay for Figma Plugin will appear. Install the Relay for Figma Plugin
47. Step 4 image
48. Step 5: Click on the "Run" button. Install the Relay for Figma Plugin
49. The Relay plugin is now activated on the Figma board.
50. Setup Figma Access Banjul
51. Generate Figma Personal Token Banjul
52. Step 1: Log in to Figma.com or create an account. Generate Figma Personal Token
53. 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
54. Step 3: Scroll down to the "Personal access tokens" section and click on "Generate new token". Generate Figma Personal Token
55. 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
56. Step 4 image
57. 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
58. Step 5 image
59. Add The Figma Access Token To Android Studio Banjul
60. Step 1: In Android Studio, navigate to Tools -> Relay Settings. Add The Figma Access Token To Android Studio
61. 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
62. Install Relay Plugin and Basic Setup
63. Banjul Create a UI Package
64. Step 1: Select the “splash screen” frame from the left sidebar, right-click, and select "Create component". Create a UI Package
65. 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
66. 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
67. Step 4: In the window that appears, enter a description for the component in the summary input text field. Create a UI Package
68. Step 4 image
69. 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
70. Step 5 image
71. Step 6: Click on "Save" Create a UI Package
72. 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
73. Import UI Packages in Android Studio Banjul
74. Step 1: In your project on Android Studio, go to File -> New -> Import UI Packages. Import UI Packages in Android Studio
75. Step 1: In your project on Android Studio, go to File -> New -> Import UI Packages. Import UI Packages in Android Studio
76. 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
77. 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
78. Step 4: Click on "Next" to fetch the UI packages. A loading screen will appear as shown: Import UI Packages in Android Studio
79. 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
80. Step 5 image
81. 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".
82. Step 6 image
83. Generate The Compose Functions Banjul
84. 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
85. 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
86. Step 2 image
87. Use The Generated Compose Function Banjul
88. Step 1: In the MainActivity.kt, inside the setContent{}, replace the function call to Greeting("Android") with SplashScreen() Use The Generated Compose Function
89. Step 1 image
90. 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
91. Step 2 image
92. Step 3: Run your project as you normally would. Use The Generated Compose Function
93. Voila!
94. Add parameters Banjul
95. Parameters are the changeable aspects of a UI Package
96. Relay supports 2 types of Parameters: - Content parameters - Interaction handlers
97. Update UI to Use Content Parameters Banjul
98. 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.
99. Add a Content Parameter to Figma UI Banjul
100. 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
101. 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
102. Step 2 image
103. 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
104. 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
105. 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
106. Step 5 image
107. 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
108. Step 6 image
109. Update UI component in Android Studio Banjul
110. 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
111. Step 2: Right-click on the splash_screen folder and click on "Update UI Package". Update UI component in Android Studio
112. Step 2 image
113. 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
114. Step 3 image
115. 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
116. Step 4 image (i)
117. Step 4 image (ii)
118. Step 5: Run your project as you normally would. Update UI component in Android Studio
119. Voila!
120. Thank You 😊!
121. Follow me on X formerly Twitter: @lamoureSparus