Convert Figma Designs to Jetpack Compose Code With This FREE Plugin 😱

hey guys and welcome back to a new video in this video I will show you a very cool plug-in Ford figma figma is a UI building tool so usually you just build and create your mock-ups there which you then afterwards Implement in your app so usually you have some kind of designer for that the developer then gets the mock-ups and implements these in code but now with this new plugin which is called relay we can effectively create figma UI components directly inside figma and then have a Gradle plugin which converts these UI components from figma to Jetpack compose codes so what you see here these two buttons that we will create are just generated UI components in jpeg compose so figma generated these for us and all we really needed to do is to yeah add this here to our UI so you will learn how you can create different variants of such UI components here for example a primary and a secondary button you you will learn how you can replace different parts of these to for example decide what kind of Icon you will show here also what kind of text that will show you will be able to set a non-click listen you can see how my toast will appear if we click on that so all that it happens inside of the generated code so we don't need to write a single line of code for that it's still in a very early stage that plugin and there are quite a few limitations but for these buttons I will show you how you can actually create that and that will be a lot of fun so the first thing we want to do is we want to jump into figma and I hope you have a figma account if not then you can create that for free just on figma.com and in here where we have our designs we want to create a new design file and here in this design we could give this a name of let's say action buttons or so like this and here we want to create our different buttons now simply inside figma we can first of all create a little frame um this one here so just a frame and on the right side we can then select a device we want to put our UI components into I will choose Android large here and then we will get a little Android device frame so and now we can actually create our two buttons here that will not be something very special just simple UI components in figma we can select this Square tool here to yeah create a rectangle which we can then give rounded Corners so let's just drag that here something like this we can then central line that and on the right hand we can give this a rounded Corners you can see we can simply drag here until we have a full round Corner radius we of course want to give this a background color so we can go to fill click on this color and I will give this 0 0 f 15E which is my typical green color feel free to choose anything else of course um then what else do we want to do we want to give this a little bit of a shadow so we can go to effects and add a drop shadow here that's already looking quite fine and what's important when we use this relay plugin here for figma which generates this code is that we give all of our UI components quite clear names because these names that we give these components like rectangle run here for example this will also be the names of the composables that figma will generate for us so here we rather want to choose something like a button background or so then the next thing I want to do is of course add some text that we can then choose the button to have so we click on this text text tool here click inside of our button and we can add some kind of yeah hello world texture so this will be replaceable anyways so we can just leave it like that we can then set up the text here a little bit we can can choose a different font which I will choose source code Pro since we are developers we want to give this text a little bit of a gray color so I'll choose 16 16 actually you need to select this text like this um yeah now it has this dark gray color and we want to let's change it to let's say semi bold and just make it a bit larger so we can Center this here hold down alt and drag this here to make it a bit bigger um actually you know what let's leave it like that because we should do that here now this won't change the text size let's set it to 20. and then we also want to add our icon next to that and since that icon will be replaceable so we will be able to choose any type of composable for that it doesn't really matter what kind of Icon we choose here in figma so what I actually did is I went to plugins so this figma icon plugins and here I have this material symbols plugin you can click find more plugins if you don't have that yet and then search for material symbols and with that you simply get access to yeah just the material symbols from Google as I said it doesn't matter here we can search for check for example pick this check icon put it here inside of our button and we also need to make sure that it is actually inside our frame so we take this check and move it in here and then we can align this somewhere next to our text we can then select these and move them into the center of our button cool so that is our very first button if we take a look on the left side one thing I want to change here is this um this hello world name here because we don't want the composable to be called hello world instead we want this to just be called text or so so we can rename this to text and now what do we need to do to tell figma the the relay plugin that this is now one UI component well what we need to do is we need to select all these views all these components and then click on this little create component icon here so if we do this then you can see we have this little Violet or purple component category which you can now rename to action buttons so this is how our final composable will be caught so if we were now to run this plugin then it would simply create one UI component called action button for us which combines these three UI components in form of composables however since we want to have two variants of our button we also want to have a secondary call to action button which is simply yeah which has a stroke but not any fill and no shadow we can select this button and actually click on ADD variant here that way it will duplicate that and you can see we have a default variant and a variant two now we can rename these to let's say um this one will be a secondary and this one will be primary oops primer primary and let's select the second that we want and now we want to adjust that to actually fulfill our UI requirements for our secondary button so we can select we can double click on this background because we want to get rid of this fill color so we click on this little minus here to remove the color and we want to add a stroke so we click plus let's make the stroke width set to 2 and we also give it the same type of green color which shows for our other button we then go to effects and remove the drop shadow here and we can then also color our icon and our text for the icon doesn't it doesn't really matter because we will replace this anyways but for the text it does matter so we can double click on that scroll down and for the fill we also choose our green color and let's also color the icon so we click on that and select the green color and now we have our two UI components here in figma for actually it's just one UI component with a different variants and this will now generate one action button composable which is our parent component here in figma but it will have these two variants so there will be some kind of design parameter which figment will generate for us so we can choose okay we want the primary button or we want the secondary button so that will be an enumclass in the end and that way we can very easily then later on choose which variant we actually want in our app so now that we have our design what is the next step to make figma generate the code for us the next step is that we need to add a figma plugin which again is called relay for that you probably don't have that yet you go to this figma icon go to plugins and you can see I already have it relay for figma but if you don't have it you can click on find more plugins and then simply search for Relay For figma and save that here for your figma setup after that you want to run this and then this window will open up and this this plugin will basically now allow us to Define for example properties that we want to have in our code for example that this text should be a variable that we want to be able to change the text of the button that we want this icon to be replaceable so now you can see select a component on canvas and click on the button below to package it so we can select a reaction button and then click create UI package let's do that and now we get this window and here we now need to set up these parameters so the first thing I want to do is when I click on this plus icon and we first of all need to select the component which we want to add a parameter to for example this text and then we can set the text content of that as a variable so we select text content we give this a name how it will be called as a parameter I'll just choose text here we can give this a description I will leave that out here since it's quite obvious like this so we have that for the text already and then we can click on the check mark and add children so that is what we use if we want this this check mark to be replaceable so then we will just get a Lambda function which we can put our very own composable instead of this icon so we select that and here we will just choose icon like this and this will by the way be automatically applied to the same component or the same UI UI component of all variants so make sure to actually that these are actually code the same so if you call this primary check in the secondary check it won't work it will only then add it to the very end you currently select it but if these are called the same then it will apply these to all cool and if we then select our button so our secondary button here we also want to add a tab Handler so basically an on click Handler which we can then call on click on click like this there we go and now we have our button with all the parameters we want to be able to pass on click listener text and an icon and now we are actually ready to generate some code for this so what is this step for that we again want to go to this figma icon I'm going to go to file and we want to save this to version history so you can think of this similar as git just a version control system that you can save this current version of your UI design in figma you need to do that so the plugin will actually then fetch your figma account so it will directly pull this design from your figma account and then generate the composables based on that so we can give it a title edit action buttons for example I won't add a description here and we click save there we go and then we are now done for the figma part the next part would be that we jump into Android studio and now we need to set up Android Studio to support yeah using this plugin here it's important uh right now when I'm creating the video that it only works with the stable versions of Android Studio I'm not sure what is the the minimum version it supports but the I'm using dolphin here and I also have the beta version of electric eel installed and on electric electric eel it does not appear in the plugins Marketplace yet so it seems like it will be there when it's stable but yeah just make sure that you use the latest stable version of Android studio and then you will be good you open the preferences if you don't find this you can go to here Android Studio preferences and then we're going to go to plugins Marketplace and here you want to search for Relay for Android Studio I already have that installed you simply click on install here relaunch Android studio and then you will be good then the next thing we need to do is we need to kind of Link our figma account to this Android Studio plugin we just installed and the way we do this is we go to tools and here we have this new icon relay settings we click on that and here we need to enter our figma access token where do we get this from well we need to go to our figma account you actually need to go back I think let's go back here back to files go to your icon in the top right here user icon go to settings and then you scroll down to personal access tokens and here you can then add a token description for example um relay plugin then press enter and it will generate a token for you that you need to copy you will only be able to see this once and you then copy this token and put it in Android Studio so you after you copy this you go to Android studio and paste this here as figma access token cool so if you've done that then you can click OK and then go to your Gradle scripts build.gradle app and here you want to add this plugin com.google.relay and this version currently maybe there is already a later version when you watch this but you can then click synchronize now and this Gradle plugin will then make sure that the yeah that will actually generate the compose code for you after it fetched your designs so now we want to go back to Chrome to our figma website open our design again our action buttons and here we want to click on share and then we want to click copy link so we want to copy a link to this design go back to another Studio go to file new I want to click import UI packages so that way we now import our UI package so in this case our action buttons click on that and here we need to then add this link we just copied we can also translate the figma styles to compose theme yeah let's do that let's choose the material to design kit configuration and we click next then it will fetch and download these UI packages this does not generate the compose code yet it will just download these you can see we have our two buttons here we'll just download these in a way that the plugin understands and the plugin will then convert these Json files and what it all downloaded here to our composables finally so we can click finish and then you will notice that here is a new UI packages package in your apps directory and these are all the files that it's downloaded from figma all we really need to do now is we need to rebuild our project so let's actually first click clean for me it sometimes did not recognize that after rebuild that's why battle cleaned before then we click rebuild and hopefully after that we should be able to see our action button here in Jetpack compose so my rebuilding is finished and if I take a look here I don't get the action buttons yet and that happened quite often to me but if we go to our project View take a look in our app directory um Source main you know that doesn't seem to be a build directory um maybe we click build here so make project maybe that will generate our files I'm not sure why it did not generate these classes maybe we need to refresh here so right right click reload from disk yeah here's our build directory in generated Source relay relay main here we actually now have our action button UI components so if we open that this is now the generated code that the figma plugin generated for us is of course hardly readable but it does not need to be readable for us since it's just generated code we we don't intend to change this anyways so we can close this and we can now use this here in our actual compose design so let's add a column modifier fill Max size let's say from Max with and give this a bit of padding padding 16 DP import DP and now we can add our action button composable as you can see now it's recognized the text for that will be let's say hello world and then we have the option to pass a modifier which we want to pass so a modifier for Max width we want to be able to choose the design as I said so design is equal to design primary or secondary to yeah just choose the variant of that button let's just make that one primary and then we want to add an on click listener and here we can just show a toast or so so hello world Toes that length long and show like this and there is one parameter missing which is of course the icon we want to pass so I can is equal to um icon you can pass a composable icons default check for example and let's not choose a Content description like this and if we now copy this and also apply this for our secondary CTA so let's have a bit of spacing height 6 in DP and we paste this down below hello world again or let's say um secondary CTA this time is designed secondary and here we could choose something else like close for example and then if we launch this let's see how that looks like you can see that does not really look like we expect so it it has some similarities with our button but it we actually wanted to only fill the size of our green background the shadow is a way too large and the text Sticks somewhere else how can we fix that we need to fix that in figma and that is also quite a good opportunity to show you how you can update your UI components so in case you change your figma design so let's go back to Chrome and then here if we double click on our button then we get this Auto layout section here and we can use this to tell figma how we want this or buttons to be laid out so that's similar as an Android you have match parent wrap content and all that stuff so we can also Define something like that in figma so if we click a plus here for auto layout then we can make sure it's centered and we then also get these additional attribute where we can select horizontal resizing and vertical resizing so here both are set to hug which will kind of just try to shrink these down to as little space as possible so in this case it would just fill the space it needs similar to wrap content we also have fixed with that yeah I think that's pretty obvious that it's always a fixed size and we also want to click on our text because here we have we get fixed in in horizontal and also fixed in vertical but vertically we want hack contents as well so that it really only only occupies the space that it needs because otherwise the plug-in for some reason just makes to fill the whole height which it just did in our layout we then also want to do this for our other button so here for the secondary one add Auto layout Center the button make sure both is set to hack click the text and yeah that seems quite good and I think here I did not choose hack in like horizontally let's say how content as well and I think this should be enough to fix the issue we had so how do we now get these changes inside Android Studio well we again go to figma file and save another so if there's another time to our version history so we say adjusted Auto layout for example save this go to render studio and here we now need to go to our UI packages this package one here right click and click update all UI packages in this module and then it will simply fetch our designs from figma again and update our UI packages and after we then rebuilt our project let's go to build clean project rebuild project we should be able to hopefully see some working UI components so if we Now launch this and hopefully don't get any errors then take a look here in our it looks just as we want of course our icon here is in the wrong color as I said since we dynamically set that content we need to also yeah add a tint to that icon so we can say actually not that one and the other one here we want to add tint and here we just add the same color as we did in our figma design like this if we then relaunch this we should be getting two very nice buttons and there we go yeah that looks quite cool if we click this button we get our toast if we click the other button we also get a toast and that works just fine so that's quite cool how we can now create um on yeah how we can now generate UI code jab a compose code from figma designs what is now my view on this plugin and should you use that for your production apps should you use that for all your figma designs what are the drawbacks what are the limitations so as for now as I said this is in a very early stage I would not use it because it has really a lot of limitations for example you you see that we don't really have this ripple effect when we click this button so this um yeah this bubble that expands and usually you want to have that for clickable elements and the reason why that does not exist is if we take a look here in our action button and scroll down where that on click listener is assigned um where is that not here it's up here somewhere in this top level primary if we take a look here scroll down here we make it tappable it does not add an on click listener instead it makes it tapable if you take a look here then you can see it simply adds pointer input so it sets an untapped listen instead of an on click listener the on clicklist now comes with that ripple effect the on tablet listener does not and it's I'm not sure why it uses untaplessness for single tabs I mean for double Taps and long presses it's clear because I think for that you need this gesture listener but for single tabs it's really not necessary so that's just one example and of course you can imagine that the more complex your layout gets the more complex the behavior of a composable gets um the more well yeah then it will just not be possible at least at the moment to do that with figma for example at least as far as I don't know if you want to make something like for example a password text field where you can toggle the visibility of password and where you are able to enter some texts I don't think that's currently possible with that plugin that it actually generates an actual text field with your design um and I can imagine there are a lot a lot a lot more use cases which you can't do with this plugin yet that does not mean that I don't like this plugin it's a really cool idea it's a yeah right now what it does it does quite well and I think if the Google team actually keeps on developing this and makes it more and more industry standard this can at least save developers a lot of time I don't think that we don't need UI developers anymore because there will always be some kind of adjustments about I think especially for very generic UI components like such a button or some image cards for example with some text and descriptions that is something that you can very easily generate with this plugin so it really depends on how this will go on and in future and how this will yeah how the Google team keeps on developing this but I think this can become quite promising in future what do you actually think about that let me know that down below would be cool to have some kind of discussion here and if you like this video then you will definitely also like my more advanced courses in which I can go much more into detail than in my YouTube videos you'll find them down below in the first link in this video's description apart from that I wish you an excellent rest of your week see you back in the next video bye bye

Channel: Philipp Lackner

Views: 36,403

Keywords: relay, plugin, android studio, figma, design, convert, conversion, xml, kotlin, compose

Id: byOmrmXG4yQ

Length: 25min 39sec (1539 seconds)

Published: Wed Nov 02 2022