Figma to Real App Quickly — This is Amazing! | Design Weekly

figma to an actual android or ios application is now possible without code yes it's as simple as it sounds all you need to do is design your design in figma and then export it to a very special tool that we're gonna use today called bravo i used it over the weekend and i'm absolutely in love also you can export from bravo to the play store or the app store like this so without further ado let's just get right into it all right so to begin with we will start with figma travel e is the app name that i'm giving and i'm going to start off with an iphone 11 pro or iphone 10 artboard from right here i'm going to change the color of the background to pure black you can keep it white or any other color that you like but in this case i like dark mode so that's what we're going for and now i'm opening a ui kit that i found on the community called travel cards i will have a link in the description as you can see there's this nice little header here which i really like so i'm going to copy this and paste it right here in my artboard right here make sure that it's the same size i'm going to press k k on the keyboard and hold shift and just drag it out so everything resizes to the size of this artboard right here now this is fantastic don't worry about the text here we will be adding some automation so this text changes based on location etc we will now be placing some cards for you know different locations of cape town or in any other location i'm just going to copy this card and place it right here absolutely wonderful now we only have to place one item here since this will be a list of different hotels of cape town i won't be giving it too much functionality because the video will get too long and too complex we also want one page that will basically show us the details of this hotel in this case for the hotel i'll delete the top card and replace the top card with this little card here and i'm gonna make sure that i expand it press k hold shift and do the same trick that i did before of course this is just to expand the image etc yeah that's fine i'll remove the white background of course because i just want it to be dark mode and i will replace i will change the text color to a y i will change the font of course since this is not appropriate for this design nanito sans regular and make sure that the text size is 20 or below in this case great i'll place all these elements right below it the price and everything and i will also have some space for the description and all that but for now i'm just gonna keep this top section here not gonna go too deep into the details the one thing that i would like to place is like a little call button because i feel people would like to talk to the hotel so i'm going to place a call button and we will add a calling functionality also to this it's going to be very simple i'll go to my favorite icon library called remix icons.com and right here i will search for a phone icon this looks good i will copy the svg bring it back here and paste the svg inside this make sure this is white for bravo to put in all the data and everything it needs to recognize the figma design and it's simpler than it sounds and right click here click on frame selection once you're done with that it's created and it's turned into a frame like this so it's named frame one now a lot of you might get lost during all this process so make sure i'll have a link in the description to bravo tags master list inside these tags as you can see we have containers and top bars this is what we need i'll expand this inside this we have a container and we have a top bar and we want a top bar in this case that will hide on scroll so whenever you scroll it will automatically hide so i'll copy this code or this name here and inside this where we wrote container we'll just replace this container with that tag that we had paste so container top bar hide scroll perfect nothing else needs to be done now if i go to cape town this is a text this is text which is fine before london i i'll replace this name which is london to the name of the box that we want we'll say city okay and before sit we will write a small star hold shift and press 8 that will produce a star once that is done star city is what is called same for gregory lane we'll change the united kingdom to country and country we will change we will add another star before country for this card here we want to do the same thing right click frame selection while you have the frame selected hold command or control on the keyboard drag out the frame to the left so that there's enough space to the left of this because this will determine the margins of everything same thing from the top we will make sure that there's enough margin on the top as well you can make this pixel perfect but for now i'm just using my visual aid for this as you can see if i ever duplicate this it will there will be margins enough on the left and right you can reduce the margin by any amount and that will make sure that there's less margin on the left when there are cards being replicated like this i'll call this cards and in this case i will use the term container between square brackets container is fine like this so we are now ready with this uh for the image and text and everything we'll do the same thing in the image make sure there is us i change the name to hotel image and you need to add a star before this great same thing for the text again i will skip this portion but you probably get the gist of it just change it to a name you can remember like hotel name and then add a star or asterisk so whatever you like to call this before the name bravo studio will basically add text here or add data here in the future same thing we need to do with this we need to create we need to turn this into a container by right clicking frame selection call the frame selection a container in this case again and we will use the same principle but we don't need to place star inside this page this detail page we don't need to place any stars so it can be whatever name you've given it and that is fine now we will go to the hero of today called bravo studio now bravo studio is completely free so you can just say get started and it will give you various options you can just sign in with figma google or apple i suggest signing up with figma because it will be easier in the long term it asks you for access to your files which is fine which it needs in this case as you can see i already have some applications that i've tried to practice with i have a wallpaper application that i'll be uploading on play store so make sure you stay tuned for that follow me on twitter and linkedin i will post updates on these apps there i will quickly go ahead and say import figma file i'll close this window go back to figma click on share here click copy link that's about it and paste the same link here in this text box here i'll say import and it will show you a little loading bar that showing that it is now importing your designs from figma to bravo see the name is the same travelly we have two screens that we made uh before we even begin with browser studio i forgot to do one thing in figma you can quickly create a live prototype and then take this prototype from one screen to the other say navigate to on tap hotel details that's fine and instant is fine for now and this will be duplicated or replicated here in bravo studio to refresh the figma designs you can always click on this refresh button on the top right and that will do the needful for you we need to now connect some data to this where do we get data from so for that you don't need to know any code or my sequel or anything you just need to go to a tool called add table and on airtable i'll already have an account make sure you sign up again signing up is free so i quickly need to create a new base here start with a template no i'll start from scratch you can always give the base any color since we're on youtube i'll give it a red which is crazy i can always rename the base to whatever i like i'll give it the same name travelly just like we do in excel i will fill these details here in this case this will be the name of the hotel so i can always change this to name of hotel and it will remember it as that name and in this case i want the hotel name to be punits wonderful villa you can always check what data you would like so in this case we need a city and a country we will fix that later this case there is the name of the hotel and the price so in this case i will change this from nodes to price and if i click on this little arrow on the top right here i can customize the field type so rather than being long text i can turn this into a single line text which is fine attachments are great because attachments will be the ones where we'll place the hotels so i'll go to i'll quickly go to one splash and find a random hotel a beautiful hotel yeah that is what i'm going to type on on splash and splash is absolutely free and i love the tool so i'll save this image quickly go back to the air table and inside attachments i will click on this add attachment button select files to upload and i will basically upload this little image file here once it's uploaded it'll show up here the price i'll set status i'll will change this from uh status to something like now i will add the city and country so basically this will be where this hotel is located another single line text as usual and inside city i'll name it delhi i'll add another field from by clicking plus here and i'll say country so it will basically save the country where it is from now to make multiple records rather than creating new records i'm just gonna copy this entire thing by dragging out say command c or control c and paste it right below it so you have multiple here i can always set the price to something else replace the image change the city whatever you like you can always do so i'm going to go back to the bravo studio app here i'm going to something called data library on the left which is going to import the data i want to click on new collection and it automatically imports a table data from here so i'm going to click on share on air table go to base make sure that there's sharing is private read only link here and just copy this link from here back to our bravo and for the api key all you need to do is go to your profile here go to account and under here you'll have a automatically generated api key copy this go back to bravo paste it here and say complete as you can see it's automatically importing all the details from our air table that we had created so there's no difficulty doing that as you can see table 1 is the name of the table depending on what table name you have you can always change it here as well so in this case if i click on send it will send a little request make sure id is selected and records on top are selected everything else you can always deselect me for the image make sure that the url which is the attachments url is selected you just need to select what is required in this case it's the city the country that is fine everything else i can deselect once i've deselected all the redundant or all the data that i don't want all right so for the next step the details the details is the details page where you'll expand information so in this case i need a few settings go back to list click on send once again and inside here there is something called records id i just want to copy the id which is given in green here go back to details inside parameter i want to type in capital i and d id all in caps and inside here i want to copy this right here this key here this will give you the information that you require you can then go ahead and select the information like the name of the hotel the price uh the image which is the url in this case so that is about it for setting up our database okay now comes the interesting and fun part i've gone back to projects under traveli i have these two screens i'll click on the hotel screen first i'll click on select collection and inside this i have different collections that we had this case travelly is what we're looking for request is the list in this case we will be listing different hotels so that is the list we need to select so list table one list is fine now under name of places as you can see we have name of places there will be a new tab opened here under this under none we want to click on records this could be something else but in most cases it's records in this case we want city of course the name of the city in this case it is city and under country we also want to change it to country make sure that name of places has records opened i quickly update it so that it up stays updated with the application inside hotel details i want to say travelly again now since we're not listing any lists here we are picking up details from the list i'll click on details now inside browarized i'll click on this i don't need to select records in this case i just need to click on the price and the name and everything so in this case it will be hotel and i can quickly click on the hotel i will also click on the image which is the background image in this case and i'll use attachments 0 once again we don't have any other information which is but in your case you can have as much information as you like now after doing everything here you have many other options you can either publish it as an apk you can install it on your android device or you can publish it as an ios app on the play store which is fantastic and you can even add firebase so you can add login details registration and much more that is much in depth if you'd like to see more content like this make sure you comment down below if you want to see a massive application created with this there's something called bravo vision which you will need to install to kind of test this out on your android or or your iphone you can always of course export this as an apk as i showed earlier just get the debug apk and install it on your phone or you can test it out on through the cloud without installing any additional files through ios or android app i'll have a small you know screen playing here with the final results you can go in depth with the masters list the masters list shows you everything that you can do and i'll have the masters list in the description as a link and all the files and resources that are used so that you can follow along and create start creating your own application so that was essentially it for this video it is that easy to create an application or a website these days with just your designs nothing else is required in this case also we didn't have to install anything we didn't have to learn anything it was that easy i have also uploaded a figma to webflow tutorial on how you can convert your figma designs into webflow if you missed that make sure you check it out i'll have a link in the description i'll see you every monday and thursday and even sometimes saturdays i'll see you next time till then have a great week ahead god bless

Channel: Punit Chawla

Views: 49,845

Rating: 4.8984771 out of 5

Keywords: figma to code, figma design, figma ui design, figma, figma to real app, figma to android app, figma android app, figma to ios app, figma to apple, figma ios app, figma app, figma real app, figma to webflow, figma to flutter, figma design tutorial, figma tutorial, punit chawla figma, punit chawla, punit chawla ui design, app design, app ui design, no code, bravo studio, bravo studio app, figma no code, design to code, ui design to code, ui design to real app

Id: w8KVYgjmiiI

Length: 15min 50sec (950 seconds)

Published: Mon Feb 15 2021

Reddit Comments

[u/carloscae]

A really long video showing how you can supposedly create an app from Figma, yet... it doesn’t show the result so you can evaluate if the method is even worth your time.

[u/windsofgod]

seems pretty straight forward directions, shows that were once step closer to figma to app.

[u/LetsRunWithThat]

Thanks for the tutorial!