{"id":3028,"date":"2023-01-19T12:00:06","date_gmt":"2023-01-19T20:00:06","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=3028"},"modified":"2023-01-19T03:29:21","modified_gmt":"2023-01-19T11:29:21","slug":"jetpack-compose-relay-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-relay-2\/","title":{"rendered":"Relay Leg 2: Tips and tricks"},"content":{"rendered":"

\n Hello Compose developers,\n<\/p>\n

\n Last week, I gave a brief introduction to Relay<\/a>, the new Figma to Compose tool developed by Google. This week, I\u2019ll dive deeper into some tips and tricks I learned when testing out Relay,\n<\/p>\n

\n As a reminder, Relay is in alpha, so please go try it out<\/a> and send the Relay team your feedback<\/a>!\n<\/p>\n

Putting Relay to the test<\/h2>\n

\n After following introductory tutorials, my next step in learning Relay was to test it out in a variety of scenarios. Since I\u2019m not a designer, I decided to try out the tool on some existing Figma designs from the Surface Duo Dual Screen Experience Example<\/a>, the Surface Duo Design Kit<\/a>, and the Material 2 Design Kit<\/a>. By working with these different examples, I learned some tips and tricks about 1) when it\u2019s best to use Relay, and 2) how to map styles successfully.\n<\/p>\n

Choose use cases wisely<\/h3>\n

\n Going into this learning process, I think my biggest misconception about Relay was that it was going to be some magical tool that could translate any and all Figma designs! Because of this, I was skeptical that the tool would work well, especially in special cases (like building responsive UI for foldables and large screens \ud83d\ude09).\n<\/p>\n

\n Essentially, I had assumed that Relay could, and should, be used to translate entire screens worth of designs. As a developer, I often build UI one screen at a time, referring to Figma designs like the \u201cOrder history list\u201d frame shown in Figure 1. After using the tool more, though, I quickly realized that Relay is not meant to be used like that at all. For one, we wouldn\u2019t want to translate elements like the status bar or device frames. On top of that, it would be very complicated for Relay to try and guess which foundational layouts you want to use, like choosing between TwoPaneLayout<\/code> and TwoPane<\/code>, Column<\/code> and LazyColumn<\/code>, etc. \n<\/p>\n

\n \"\"\n<\/p>\n

Figure 1. As developers, we often build UI based on an entire screen of design, like the \u201cOrder history light\u201d frame. However, with Relay, it makes more sense to build individual UI packages, like the \u201clist item order preview\u201d component.<\/em>\n<\/p>\n

\n Instead, I learned that the best use case for Relay is to translate smaller individual UI elements, like the \u201clist item order preview\u201d component in Figure 1. That way, you can incorporate the generated composables into any higher-level layouts or app logic as needed. In fact, I would guess that this is why Relay only allows you to create UI packages from Figma components. I wasn\u2019t very familiar with the distinction between different Figma elements prior to this learning process, but in various design files, I saw that most higher level layers were either frames, groups<\/a>, or components<\/a>, which, according to the documentation, \u201care elements you can reuse across your designs.\u201d So, something like a design mockup for an entire screen may be represented by a frame, but a UI element like a card or button would be represented by a component and thus potentially be a good use case for Relay.\n<\/p>\n

\n However, it\u2019s important to note that, even if a UI element has been marked as a component by a designer, it still may not be a great use case for Relay! Trying out Relay with Material Design kits was helpful for understanding Relay\u2019s workflow, but in practice, these mappings wouldn\u2019t really be helpful for developers. This is because Relay will translate the Figma component literally, instead of just using the desired component from the Material library.\n<\/p>\n

\n For instance, when I translated the navigation rail component from the Surface Duo Design Kit, Relay generated Compose code that was basically a column of vector drawables. Did it match the color and spacing of the designs? Sure, but functionality-wise, it\u2019s not going to achieve what we want, so this could be a case for using Relay component mapping<\/a> or, more likely, just not a case where we would use Relay at all.\n<\/p>\n

\n \"\"\n<\/p>\n

Figure 2. Even if something in a Figma file is a component, it still may not be a good candidate to use with Relay, like this navigation rail component from the Surface Duo Design Kit that is translated as image assets.<\/em>\n<\/p>\n

\n So, to summarize, when trying to decide if you should use Relay, consider:\n<\/p>\n