![\"Relay](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/01\/graphical-user-interface-application-description.png\")
\n This week, I\u2019d like to share my experience with learning the tool and share some introductory resources. Since Relay is still in alpha, I\u2019m sure we\u2019ll see lots of updates this year, so I highly encourage you to try it out<\/a> and send the Relay team your feedback<\/a>!\n<\/p>\n \n Overall, I found that learning to use Relay was a very doable process. The documentation<\/a> is thorough and contains several codelab-like tutorials:\n<\/p>\n \n Each tutorial has download links for pre-made Figma files and Android Studio projects, which makes it really easy to focus on learning Relay concepts, instead of struggling with setup.\n<\/p>\n \n If you\u2019re exploring Relay as an option for your team, then I would encourage you to go through tutorials together as a designer\/developer duo! That way, both parties can learn what information is needed at different points in the process.\n<\/p>\n \n For more Relay introductory material, you can check out these resources:\n<\/p>\n \n I won\u2019t go into too much detail, since the documentation<\/a> explains everything well, but to use Relay, you need to install three main components:\n<\/p>\n \n Once you have these components set up, the workflow is as follows:\n<\/p>\n \n When a UI package is imported into Android Studio, it will be stored under the \n \n After building the project, Compose code will be created in the \n \n In the generated code, you can get a behind-the-scenes look at how Relay converts Figma properties to composables with different modifier attributes. If you\u2019re interested in learning more about Relay translation logic, I\u2019d recommend checking out the blog post Under the hood of Relay, Android Studio plugin for exporting Figma components to compose<\/a>! The author goes into more depth about how UI package data is stored in JSON files, how Relay uses custom wrappers for all of the basic composables (Column, Text, Image, etc.), and how the generated code compares to writing composables from scratch.\n<\/p>\n \n That’s all for this brief introduction to Relay! We hope you have a chance to start trying out Relay this week, because our next blog post will talk more in depth about Relay tips & tricks and overall impressions from the developer point of view.\n<\/p>\n \n Since this will be a two-part Relay blog post, we won\u2019t be livestreaming this week, but stay tuned for next Friday when we\u2019ll stream about all things Relay \ud83d\ude0a \n<\/p>\n \n To learn more about Relay, check out the documentation<\/a>. You can also provide the Relay team with feedback in Google\u2019s public issue tracker<\/a>.\n<\/p>\n \n If you have any questions, or would like to tell us about your apps, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\nGetting started with Relay<\/h2>\n
\n
\n
Relay workflow<\/h2>\n
\n
\n
\n
\n
ui-packages<\/code> directory and contain all of the image and font assets you need, as well as JSON files describing the components from Figma. All of this UI package information is meant to be checked into source control.\n<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/01\/graphical-user-interface-text-chat-or-text-messa.png\")
ui-packages<\/code> directory is where assets and JSON files are stored.<\/em>\n<\/p>\njava (generated)<\/code> directory. Even though this is Compose code, it is generated every time the project is built, so these files should NOT be checked into source control.\n<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/01\/graphical-user-interface-text-application-descr.png\")
java (generated)<\/code> directory is where Compose code is generated after building the project.<\/em>\n<\/p>\nMore Relay content next week<\/h2>\n
Feedback and resources<\/h2>\n