UI Components from Figma to Composable Functions - Introducing with Relay

foreign I have a great news for you in this year's event of an Android developer Summit which was happening on October 24th 2022 of course we have heard a lot of new things about the future of Android development one of those that caught my attention the most was the alpha release of a real a so what is a relay and why it is so important for us developers and designers well because the time has finally come from now on we will be able to transform our actual UI design from figma to a real composable function within the Android Studio automatically without too much work now if you are not familiar with the figma itself then you've got a problem but no worries I can help you with that because I have just released a new course about the figma now is the right time for you to learn UI design that course is available on my own platform as well as the udemy you can check the video description for more information uh anyhow and now I'm just gonna quickly uh show you everything you need to do uh in order to set up the environment so that you can later easily transform and convert your UI design from figma to a composable functions in Android studio now one thing to note here is that the relay is actually in Alpha so it's not stable yet which means that in the future we may encounter some big changes as well so so they are still working on it right also uh be sure to like this video and comment down below if you want to see more videos of me showing you how to transform your UI design into a composable functions automatically so uh first let's start with the figma right so let me just here uncover all those layers okay so the actual plugin that you need to uh use here within a figma is called a relay for figma right so that's the name of this plugin which we need to use let me just remove this actual component from there and this is the actual frame which I have designed here so so of course if you're not familiar with the figma I suggest you to go and check out my latest scores anyhow as you can see here we have won a card frame and that frame contains a new frame named the text elements now within this text elements frame we have a two text elements title and description right now this actual uh card component contains a padding of a 24 on each and every side also the spacing between those two text elements is a 16. of course this component is a fully scalable and responsive as you can see this is how it will react whenever we try to decrease its actual width there we go now the first thing which we need to do here from figma is to convert our actual layer into a component so after you convert that into a component then we can just open up this relay for a figma plugin just around this plugin and here this is the actual interface or welcome screen that you're going to see now select this component and press create UI package now from this a window right here we can Define parameters that our composable function will actually have within the Android Studio so in this case we have only let me just go back so in this case we have only two text elements so only those two elements will be dynamically changed so I'm going to now select this actual title from a figma and I'm going to click this plus button then uh so here we have a couple of different options but in this case we only want to dynamically change the actual text of this element so just choose the hero text content we can name this parameter to say a title and we can add here even some description but for now I'm going to leave that as it is I'll just now select this second element and just click a plus button also the same thing so text content let's rename this name to suggest description press enter there we go and now we have defined the two different parameters that our composable function will actually have we can also select our whole card component and then we can press plus and you will see here a couple of different additional properties as well in this case I'm going to now select the tab Handler so it's just on click listener let's specify here on a click press enter there we go so now we have defined the two different parameters the first one will be an on click Lambda and those two will be just a simple uh strings that the actual composable function will contain so now you might be wondering why it is so important to name all your layers properly because once you actually convert this design into your composable function in Android studio and then your composable functions will take the names of those layers from your afigma project right and now that we have specified all those parameters and now we can share that with the developer so if you press this button then you will see that first we need to save this project as a version history so let's just um here now say this a project as a version history so let's save this to a version history let's for example say here a card and here initial release for example right so press save and now after that we have created here a one a UI package for our card component the next thing we need to copy the URL of this actual project so let's click this share button click this copy link button there you go and now let's go back to our Android Studio so uh before we continue with the Android Studio there are a couple of things that we need to add in our gradable files so in our Gradle build file application module I'm going to specify this plugin and name the Google dot or com.rule.relay then we need to add here this Source set which is basically just a pointer to a certain directory in which some of those components will be generated right so are you a package there you go just uh so just be sure to add this Source set Block in this Android block as well and down below we don't have anything more let's just uh go to our project level uh griddle build file and here you will see that we have a specified a plugin named the Google or com.google.relay and the actual version the current version is a 0.3.0 and also a class path as well so that's everything you need to add in your gradable files so one class path this plugin this plugin right here and this block of code as well now the next thing after you do that you need to also install a one plugin within the Android Studio so let's open up this settings first then our plugins and here you need to search for a relay for Android Studio plugin right so after you install this plugin then you need to go to a tools then a relay settings and here you need to add the actual figma access token so how can you generate a figma access token well very easily so you need to add your actual figma access token and that way you will be able to access those files from that project that we have already created right so let's go back to figma for a moment uh we need to go to our actual uh home page right there let's go to our profile here then uh settings and down below we need to scroll until we find that actual uh access token so here as you can see I have already created one but you will have here an option to create a new token right so here just add some random text in this case I have specified the Android studio and then press enter after you press enter Then a new window here will appear or just a new text where you can copy that the same access token but you will have only one chance to copy that access token and no more so after you have copied data access a token and then go back to the Android studio and paste that token right here after that just press OK and you are good to go so let's repeat that once again the first thing which you need to do here you need to go to the actual project of yours right and you need to convert your actual layer into a component be sure to specify the proper layer names and after you do that you need to open up the relay plugin and create a packaging for that same component which we have already did right after that you need to go to the Android Studio add all those Google relay plugins specify this as a source set and here as well you need to install the relay for Android Studio plugin and specify that API or access token and then after that you're good to go now after all of that set up a workflow within the figma and the Android Studio we can finally import our Packaging from a figma of course so let's go to the file then a new and then import the UI packages okay so here we need to open up our main activity if you say this a grade out option so now go to the new and then import UI packages and here you need to paste that actual link of your project that we have copied from figma right so just paste that right here I'm not going to explain you those options down below for now so just press next I'll wait a little bit and then now add this plugin will automatically recognize that actual component that we have created within the figma right so that's our card component from figma and here we can see all those information that we have specified previously in figma so the name of our component is our card we don't have any variants for now we have only two content parameters a title and description of a text type or a string and we have one on click Lambda or a Handler for our whole card right so in this case we have only one component and that's why only this one is actually uh checked so after that just press finish now immediately after that inside this UI packages directory you're going to see here the same name of your component on that nested directory right and uh that actual directory contains some of those information like this Json file in which we can see all those same things from our actual component then of course lots of different parameters that actually exist within our component there you go but that's not all so after you get generated all those files you need to press this button right here make project so press that and just wait a little bit until this is a great completes this actual task and after that here are new files will be generated with all those composable functions there we go so if you don't see here some new files then a right click here and press reload from disk and then you will see here that now we have some new folders now in this folder right here we have our card so that's our actual card uh kotlin file which contains all those composable functions that were generated from our UI component from figma so now we can inspect this actual uh coding file and all those composer functions to see how our component actually looks like now from that design project before you have seen that we have a 24 padding basically on each and every side right so let's confirm that here as well as you can see this file should not be uh edited or modified because uh it's automatically generated by the UI package or this uh relay plugin as you can see here our card component now contains all those parameters like the title and description and this on click Lambda as well now this modifier is a default parameter which is added basically to each and every composer function which is a great thing so uh inside those composer functions you may see some different uh composables than the ones that you have worked with before for example here we have this at top level a composable function which basically uh represents a container and inside that container we are passing this actual content composable right now you can see that this actual container contains a background color which is the exact background color that we have specified for this component right you can also see that this component contains a radius level of a 12 and here we can see that the same value of 12 there we go we have those are padding values on each and every side which is a 24. we have this modifier tappable to which we are passing our own click Lambda there we go so that's how that top level composable function actually looks like so let's go back as you can see here we are passing just our own click uh Lambda and the modifier and within this setup level we have this text elements composable function which basically represents a container in which we have those two uh text elements so as you can see the text elements is the same name of this subframe and that the same name is applied as a new container composable function in Android Studio as well so this is that the text elements uh composable function it accepts the content Lambda and we are just passing data content Lambda to this relay container which actually contains those two text elements here we also can see this item spacing between those actual two text Elements which is a correct value right let's now go back here so the next thing we have our title and description so those are the same names as our actual layers within a figma so title and description and each one of those represents a separate composel function in our project so now as you can see here uh this title contains this relay text composable function which is basically just a little uh different implementation of the same text composable that we have already seen before as you can see here we can also see the actual color of this text we can see the actual font size which is the same thing so 20 as you can see our actual Title Here contains the same text size of a 20. we can see also down below some other different things as well this is our description composer function which has a data same text as you can see here with that same color we are passing this description parameter as well so here you will notice that basically uh the code which was generated by this relay plugin contains some of those composel functions which are actually specific for this plugin right so if we open up this relay container composer function you will see that it contains a lot of different parameters and some other different composel functions which are also specific for our relay plugin right so we don't have a row we have a relay row and we have some other different similar composable functions anyhow we also have this relay base composable which actually contains the railway surface and if we check this relay surface you will see that it actually contains basically a relay a box and that box contains a layout so those are just some specific composite functions which are which are mandatory for this relay plugin to actually work anyhow and now we can just try to call basically this card composable from our main activity so here I have already specified those uh cards let me just import them so this one there you go and I have also passed a couple of different parameters here as well so I have here three cards and to each one of those I have passed the title and description parameter as well and in those other two I have also specified this a third on click Lambda which will be triggered whenever we press or click on one of those cards so finally let's run the Android emulator and let's see how our component will look like okay so there you go as you can see our component is actually uh fully scalable and responsive so this is the first card we have a title that says title and a little bit uh longer description then in this second one we have a little bit uh shorter description and in that case the actual height of this component is uh also reduced because we have specified that this component will have a padding of a 24 on a eternary side right and our component will follow those rules so basically our component is a fully scalable the way we have designed that inside the figma as well okay and there you go so now you have seen uh how easy it is to actually uh generate uh all those composable functions from just a one component design that you have created within a figma now of course a data setup part may take a time when you are working for the first time but after you set up all of that then it will be a lot easier for you to just uh basically copy that the link from your project and import that UI package to your Android Studio in order to generate those components so now I'm going to show you how you can also update those components quite easily so let's say that we want to change for example the actual wave of this font for the title we can just maybe change that to a black right so what we need to do now after we update that element we need to also save our file to a version history so let's name here for example card and here we can write we have updated the title uh ways so now press save there we go and after that we can also just go back to the Android Studio we can locate this UI packages directory and on our card we can press right click and then update your package right so let's press that so uh sometimes you may see here this kind of error and I'm not sure why that actually happens sometimes it works sometimes it doesn't right but nevertheless the relay is still in Alpha and they need to work on this plug-in uh firmware so you may encounter some more errors but don't worry now what we can do here we can just go to the uh build then a clean project there you go and after you clean your project we can go to the card and remove this card now and after that we can also try again to actually uh import data UI package so that's actually a workaround so let's just go again uh file new import to a package let's just copy that same link so there you go just paste that here go next click finish there we go now we have received here our new card so let's just uh click here make projects so we can uh rebuild basically our project and generate all those new files okay and after that you can just go here and you will see that now we have received again all those files back so let's run our application once again and you will see that now our title should have a different font weight there you go so as simple as that so as I already mentioned before this relay plugin is still in Alpha and all the things that we are actually using right now can be changing the future so that's all optional however you don't need to worry about that because I will do my best to create new videos with all the newest updates from a relay plugin so that's basically everything I wanted to share with you in this video so so if you want to see more interesting things about this relay plugin then yeah be sure to like this video and comment down below for this video that will be all [Music]

Channel: Stevdza-San

Views: 35,364

Keywords: android, jetpack, compose, android studio, app, kotlin, application, mobile, ui design, ui, function, composable, relay, developer, android development, figma, design, app design, plugin, convert, transfer, transform, from, to, automatically, component, introduction, packaging, package, easy, guide, tutorial, how to, alpha, release, developers, designer, handoff

Id: CMXXHLwA2io

Length: 20min 22sec (1222 seconds)

Published: Wed Oct 26 2022