Imagine if you could build a fully functional app with beautiful design, back-end logic, stripe, and AI integrations, all from a single prompt. Well, with Rocket, that is now a reality as it allows you to do exactly that. It really is like having a full stack product team inside your browser, a top tier UX designer, a senior dev, and a product strategist all working with you in real time. In this video, I'll walk you through the entire Rocket platform step by step so you can start turning your ideas into reality. We'll cover the full process of app building from planning to publishing for both mobile and web. Plus, I'll show off some of Rocket's most exciting features like Figma to Code, which lets you turn your designs directly into functional apps. So, without further ado, let's get right into building. Now, when we get started building the rocket, there's a lot of different ways that we can go about this. Let me quickly run you through all of the different options. Now, the most obvious one is the chat box here. They can actually get started with building our app just by typing it out in natural language. So, you type in your prompt, you press this button here, and it starts building. However, there's a few other options as well. Here on the top, you'll see some of the most common use cases. For example, if you want to build a website, you can click on the website button here and then describe your website. Same for the mobile app, same for the web app. Now, right below, you'll see another two options, which is the attach option and import Figma. For attach, we can attach a screenshot of the app that we're trying to build or maybe a sketch of the layout or a wireframe showing what kind of components that you want to have. And the import Figma button does exactly as it says. You're gonna import your own Figma file and convert it into a functional app. Now, the import Figma feature is absolutely amazing if you're a designer because now you can also be a developer. You can import your Figma designs and turn them into responsive apps. But these options that we can get started with are actually not all. If you see the button on the top here called templates, we can actually get started with a template. If you're trying to build any of these common use cases, you can actually speed up your building by using a template. Let's say we want to build a SAS landing page. If you really like this template, you can click learn more to find out more about it, see what it looks like and what pages are included. And if you like it, you just click use this template and Rocket will proceed with this. And there's a lot of benefits to actually using the template. One of the main benefits is actually the token saving. So if you're trying to build any of these use cases, you can actually see the savings on the top. For example, if you were trying to build a brand website for your business and you use this template, it will cost you zero tokens. However, if you didn't use a template and you just went into Rocket, this is how many tokens you would have used. This way, you can actually choose a common use case and then modify it to your specific needs. Using templates will also save you a lot of time. Now, over time, Rocket will be adding more and more templates. So, whatever your idea might be, chances are there will be a template for it. Now, that's pretty much it on all of the ways that we can get started with, but let me show you a few more things before we actually get building. Now, you'll see here on the top also built the rocket. If you click on that, you can actually see some of the apps that have been built by other users. Make sure to check it out because this is a great place to get some inspiration for your own builds and to see what's possible with Rocket. And here are four common use cases that have been built out with Rocket. First up, you can build out an analytics hub to centralize all of your necessary business information all in one place. For example, here we have an live operations page where we can see all of the necessary data on our operations live in one place. We have an executive overview, a customer success page where we can see detailed breakdown for each one of our customers as well as a product analytics tab. For the second use case, we have a sales compensation management board. Here we can manage all of the necessary data for our sales compensation. We've got a compensation dashboard where we can see individual people, yearly revenue, annual quota. On the right, we have a simulator where we can play out different numbers and see what happens. We've got performance analytics to see the best representatives as well as their performance. We've got a scenario center. We've got bulk operations page, commission structure. We've got a user management page, audit trail, and even integration monitor. Next up, we've got Tax Flow Pro, which is a simple website built with Rocket. And it's even got a client portal where clients can actually log in and interact with the service. Looks super professional, super clean, great solution for those who need a website for managing their service. And here we have a portfolio page quickly showing who this person is, their experience, their portfolio, testimonial section, pricing section, skills and expertise section, and a menu that navigates us around this one page. So, as you can see, the rocket you can build solutions as simple and as complicated as you want. So, let's start building. Lastly, before we get building, you will see this little button here. This button actually allows you to select whether you want your project to be public and show it in the page that I showed you previously or if you want it to be private. You can choose between these two options. So for our building, let's get started with natural language prompting. We can enter a prompt here and then proceed with our build. Now, because prompt is the foundation of our app, we want to make sure that we get the prompt right. To do so, Rocket actually has a guide that will allow you to make sure that your prompts are effective as possible. We'll have a link for that in the description down below. You can click it and then read through this to make sure that the prompts that you're giving to Rocket are as effective as possible. They go through the different strategies. They also have a prompt library. I really recommend checking it out before you get started building. Basically, if you want to make sure that our prompts are as descriptive and as specific to our needs as possible, we don't want the app to be sitting here and trying to guess what we're trying to build. We need to be as clear as we can with our ideas so Rocket really understands what we're trying to build. However, what I did is I actually downloaded all of this documentation and I trained my own Chad GBT agent on it to help me with my prompts. For example, here I just recorded a voice message, sent it to Chad GPT and it put together a prompt of exactly what I need using the clear framework which is concise, logical, explicit, adaptive, and reflective. And this is the prompt that I will get started with. I'm going to tell you to create a fitness goal tracking web app with the following structure. We need a goal tracking section with the list of fitness goals and then I told the information what each goal must include and I added a few other things like for other sections that I want to make sure that we have. So I've entered the prompt. I'm going to press enter and get started with our build. Rocket will take a few seconds to understand our request and it will give us a default framework. So Rocket actually allows you to customize the framework if you click on the button here. However, from your use case, it will be able to understand what you're trying to build and recommend the best framework for it. I'm going to proceed with default framework. So, unlike other platforms, Rocket actually tries its best to make sure that you do not waste any tokens. That's why from the start, it actually tries to specify your framework and will now also ask us a few other questions to make sure that it really understands what we're trying to build. It doesn't just take a prompt and then build a 30-page web app burning for all your tokens. No, Rocket actually helps you be clear on what you're trying to build and does its best in trying to understand that. This way, we can actually build awesome apps and not just some junk. It's really like having a strategist sitting there side by side building this app with you. Now, Rocket have analyzed what we're trying to build. It thought through it and actually came up with the pages that we might need. And now here we can actually select the pages that we can get started with. I'll choose login. I'll choose dashboard, goal management, daily check-in, profile, AI coach, and the profile settings. I will add that later. Now, for our use case, I want to proceed with all of these pages. However, the less pages you choose, the less tokens that you'll use. The amount of tokens that you go through really depends on how many pages you choose to build. So, it's best to really think this through clearly and only build the pages that you need. I've chosen these pages and I'm going to click build my web app. So, while that's loading, let me quickly explain to you how tokens work. On the free plan, you get 2 million tokens. You get 1 million tokens per week, meaning the first million tokens that you use, you'll be able to use the other remaining million the next week. 2 million is more than enough to try out Rocket and to see how it works or to even build some simple MVPs as well as landing pages or websites. However, if you're happy with what you see, you can always upgrade and get a lot more tokens. If you ever run out of tokens, there's also an option to refill. Now, Rocket really tries its best to build out as close to the functional app as possible from your first prompt. That's why the generations in here do take some time. Like for example, here it takes 10 to 25 minutes for the request that we made. However, you do not need to have your page open for it to be generating. You can actually give it a prompt, go for a walk, come back to your computer, and see your fully built app. And as Rocket builds out the app, you can see here on the left side the progress on each page. Now, as each page is built, it'll actually update the icon here so that we can see that it's been finished. It's a nice little touch to be able to see the progress of your app. And if you go to the code section, you can actually see the code being generated in real time, which is pretty fun. I'm not going to lie. Now, as we are building a web app, Rocket actually used React, JavaScript, and Tailwind for our stack. Now also before here when we were prompting if one of our use cases was a common use case Rocket could have also recommended a template to us that we could have proceeded with which is quite nice in case you went to the templates you didn't see what you needed and then you proceeded the prompt here. So if there was actually a template for your use case but you missed it it will actually notify you here and that's it. As you could see it generated all of the screens that we needed without any errors. We got a login and register screen, dashboard, goals management screen, daily check-ins, as well as an AI coach insights. It also gave us a little report of the fi things that it did as well as all of the files that it generated. And it also gave us login credentials to actually see the functionality. Now, you can also see the demo credentials here. Let's try logging in. Amazing. The login functionality works. And now we are within our app. As you can see, the dashboard looks absolutely amazing. I really like the UI. Everything is clean, clear. You don't have to sit there and tweak around things so that they're functional from the start. We have an app that is easy to navigate like it's been designed by a professional UI UX designer. What do we have here? We have everything here that I requested. We have a dashboard. We have a goal section. We have a check-in section and we have a coach section. In the check-in section, we can write out our workout summary, choose our energy level, and then choose the different selections for the mood. Once we're done with that, we can click on update check-in. Oh, and it actually keeps a streak up here as well, which is pretty cool. We also got a calendar functionality, which is pretty cool. We can actually see all of the days that we checked in. Now, let's check out the goals tab. Amazing. Here we have all of the different goals that we're tracking. Some goals that are overdue and some that are completed. We have filters here on the left and the search button. We can click on each individual goal and adjust it. But, as you can see here, we got a small error where like where the model actually doesn't show up on top of the black screen, but we can fix that. a quick prompt. These apps are generated using AI and the AI you'll have you'll always have the small little things that you'll have to tweak. But from the first prompt, I'm honestly impressed. It did a really good job generating exactly what I had in mind. You see, it even has this little animations when we hover over different tabs. Does this little shadow animation. I really like that. It's a nice touch. And here we also have a section where we can go to the checkin and we can go to the goals. Like I'm mostly impressed with the UIUX. Like if I was a user, it'd be so easy to navigate this. Amazing. Now, enough with me going through how amazing this app is. Let me actually run you through some of the other features. So, if you want to modify any of the bits here, we can click on this little button here. And actually, what it allows us to do is it allows us to modify the elements on the screen right away without having to type any prompt. One of the main benefits of this is speed. like you can modify things really fast rather than prompting each bit that you want to modify. Another benefit of this is precision. You can really like modify the elements that you want without having AI trying to guess what you're trying to change. And the last benefit which is the most important is that it doesn't use any tokens. You can make the changes live and save on so many tokens if instead you just went and tried to prompt to change every single bit using LLM. Let me quickly show you how it works. For example, let's say we want to adjust this element here. I'm going to click on it and I can change the background color by playing the colors here. Let's say I want it to be a little bit more blue. I want it to stand out and be blue. I can adjust the opacity here. Quite nice. Um, I really like using the libraries because they have a lot of nice colors here. And by using these, you can make sure that the colors that you use in other sections are the same. But let's say we want to go with this one. And for the responsive editor, outside of just changing settings here on the side, you can also click on specific elements that you want to update. and prompted in natural language on the changes that you want made. This way you can be sure that the changes that you make are as precise as possible. And that's it. We adjusted the color of this entire section. If you like it, we can just press save and it will be live in our app. And that's it. It's now been updated and our change has been saved in our app. Obviously, another way to modify all of this would be to go to code. And here you can interact all of the code directly. You can go through all of the different files that have been generated and modify them. Absolutely amazing. If you're a coder, you can generate an entire app in just 20 minutes and then modify all the code in here yourself. On the top right, we can also press here to actually push our code to GitHub or we can actually download it by pressing the button here. What it does is it zips up all the code. You can download it and you can host it locally if you wanted to modify it from there. If you're a developer, another great feature is also the code diff in the chat. After your prompt has been completed, you will see the files that have been updated and generated and you will see this code diff button at the bottom. If you click on that button, you will actually see all the new code that has been added in green and all the code that has been deleted in red. So you can actually scroll for the code and see what changes have been made. And right next to that code div button, there is also a roll back button. So, if you actually prefer the older version before the updates have been done, you can just click on this roll back button and it will roll back your app to that previous version. But let's get modifying our app. Let's say I want to change this icon on the top. What I can do is I can click on attach here. Then I chose my logo and then I'm going to ask it to change the logo to this file. That's it. It will now use the file that I sent it to update the logo on our web app. So, as you could see, Rocket processed our prompt and changed the logo exactly as I requested it to. Now, let's say I also wanted to change the entire UI. We could do that by just giving a screenshot as well. I clicked on the attach button down here again, attached the screenshot of the app color theme that I like. I'm going to tell it change the UI of the entire app to match the color scheme of the screenshot attached. And that's it. It will now analyze the screenshot, extract the color theme from it, and then apply that to our entire app. So, as you could see, it recognized that the screenshot I sent is a sleek dark theme with purple accents and modern card layouts. Amazing. It recognized exactly what I want from the screenshot, and now it's working on that. But, while it's doing so, let me quickly run you through one more important thing when you're actually building your web apps. and that is that the apps that you generate using Rocket are actually responsive for all screens. You can test that by clicking this button here on the top right. For example, we can click here to see the desktop view. We can click here to see the iPad view. And we can click here to see the mobile view. As you saw, the layout changes and it works perfectly on all devices. And you can also click here to see the app in full screen. Amazing. And also if you wanted to switch between the different pages rather than doing it the then app itself you can do so in the page up here. So you can quickly access other pages like for example the register page etc. Now also if at any time you decide that you want to take your project private or you want to share to the world you can click on this little lock icon up here and change whether it's private or public. Now amazing Rocket has updated the design that the screenshot I provided. I love the way this looks. It pretty much copied the screenshot I sent one to one. Looks absolutely incredible. Now, we do have a small issue here where one of the modules has not been updated, but that's exactly what we have this select to edit function for. We can click on it, then just click on the module and change the colors or we could prompt rocket here to change it. But I'm not going to waste any time on this because we still have some important things that I want to integrate in this app before we finalize the design. Now, at the moment, all we have this app is just a mockup. like there's no functionality because none of this is synced to a database. So let's actually integrate this project with Superbase. I'm literally going to tell Rocket, let's integrate our app with Superbase so that users can sign up and login and that all the goals data is stored in there. And that's it. Click enter. In just a few seconds, Rocket detected our request and it asked us to connect to Superbase. I'm going to click connect. I will have to authorize API access. I have to choose the organization that I want to link here and then click authorize. And now here I'll have to select the project. Uh I don't have a project created. So I'm going to click here to create a new project. I'm going to name it fit tracker dark mode. Uh set a password. Then choose a region and click create new project. Now automatically this project has been linked. And now Rocket is integrating our app with Superbase. It will add user authentication, meaning that users will be able to register and log into this app. And it will make sure that all of the goals and all of the user data is stored in Superbase according to each user. I'll come back in a second once the integration is done. But as you saw so far, it's super straightforward to integrate your database. You literally do it in one prompt and a few clicks. And actually, if you want to manage any of your integrations, you can click on the cog button up here, go to integration and then see all of the different things that are integrated with a new project here. Let's say you decided to change the project than then superbase. You can click disconnect project and then connect another one or you can disconnect superbase entirely. But quick disclaimer regarding the integrations. If you do decide to disconnect Superbase or any other working integrations from your app, maybe you wanted to change the API keys, Rocket will not automatically generate and update the code for you. You will have to go back to the chat and prompt it to update the code and make the functionality work again. So, keep that in mind if you're disconnecting any integrations or changing your API keys. And if you want to add any other integrations, you can just click on any of them and then add your API key or authorize access. Some of the options available in Rocket now is resend that allows you to send, receive, and manage transactional emails. Stripe that will allow you to accept online payments and create like registration for your apps. We've got Google Analytics for managing any of the web analytics for your web apps. AdSense, so we can actually add ads to our apps and actually monetize them. We have Perplexity that allows us to integrate like AI powered search. For example, maybe you're building a CRM and then you want to be able to like enrich the leads using perplexity. That could be one functionality there. We've got Anthropic, which is one of the best models for writing. So, let's say maybe you're building an app for students to write better research proposals. Anthropic could be useful there. And then, of course, we've also got Gemini and Open AI. Really straightforward, the rocket to integrate any of these external apps. Literally just done in a few clicks with these already. You can build some really powerful apps. You've got a lot of AI functionality here as well as payment functionality and analytics and there will be more integrations coming in the near future. Also, in the project settings tab, outside of having integrations, you can also delete your project and you can rename your project. So, you could click here and rename it to whatever you want. After you finish renaming, your project name will be automatically updated. Now, the Superbase integration is complete. After a few minutes, Rocket asks me to push to Superbase. I click that button. It pushed the code to Superbase. And now our app has a working backend, meaning that users can actually sign up and log to our app and they have their own profiles as well as all of the goals get stored for each user. Now, in my case, I had a few small issues where some things wouldn't load. So, I just told Rocket, "Hey, I have this issue. Please fix it." And it fixed it within a few minutes. Let me show you the functioning app that we have now. Once the user is logged in, they have this dashboard where they could see all their goals, their check-ins, their data, and they can click here to add a new goal or check in. I love the animation here, the nice little glow. I think it looks amazing. But let's say if you want to add a new goal, we click here. I think also it looks way better in dark mode. Like that update that we did to the screenshot has been absolutely awesome. But as you can see, we have the goals here. And if we want to add a new one, we can click on the plus button, enter our goal, set the date. Now, this one isn't white, but we can quickly fix that as well if we wanted to. And that's it. After we click create goal, it's now been added. As you could see, the functionality works perfectly. And if you wanted to, we can delete the other ones as well. Works just as intended. And let's say we wanted to filter it. All the filters work as well. Pretty awesome. This was all just from one prompt. Now, we also have this AI coach which we haven't done anything with. It's just a placeholder. So, let's add some AI functionality to our app. I'm going to say on the coach page, let's integrate chat GPT functionality so that the user can chat with AI regarding their goals. Use the placeholder that is already on the page. Now, one thing I also wanted to mention is that we do have some small issues here that we need to fix before publishing. for example. Yeah. So, we have a section here and we have a section here that are not quite the right colors. And it might be tempting for you to overwhelm Rocket and give it like this long prompt to fix all of these things and include this functionality and do this. Um, I do not recommend doing that because it can get confused and if you give it too many things to do, chances are uh there might be an issue. It's much better if you fix one thing at a time. For example, if you're fixing a layout on a specific page and you're fixing specific buttons on there, that's probably okay. You can tell it like fix this button, this button, and this button on this page. However, if you're telling it to fix multiple things on multiple pages, add multiple functionalities. Things are just about to break. Like that's just how it is that every AI system. Instead, we want to use it one step at a time, specific instructions, and you'll get much better results. For our case, I'm going to tell it that I want to include AI functionality here. And after we include that, our app is pretty much ready. Um, I'll show you how to publish shortly after that. So, Rocket added the AI functionality. However, it doesn't have our API key. So, we need to sign up on Open AI platform so that we have an API key. Now, I already have an account. So, I just logged into it. But once you're in account, you can go to dashboard. Then you can go to API keys. Then you can create new key. Give it a name. Create secret key. Click copy. Then enter your key here. And then press continue. Make sure you actually enter it in that field and you don't enter it here in the chat below because this way if you enter it on top, it's actually secure. No one can access your API key. And that's it. Now we just wait a few more minutes so that it integrates that API key into the app. And then we can test it out. And that's it. with just one prompt to integrate OpenAI. We now have a working AI fitness coach. I tested it out and it works perfectly. As you can see, when I send the message, it's not just a simple OpenAI integration where we just texting chat GPT and that's it. Actually, it's incorporating the data from our app. As you can see, it got back to me with our current goals at 60% complete what I've been doing. give us some insights on our recent activity and then give us some coaching on the next steps as well as monitoring our progress. Absolutely amazing. There's even like some prompts here that we can click to send another message. How awesome is that? And that's it. It gives us actionable steps and actually coaches us on the data that's within the app. How awesome is this? There's just one prompt, a few clicks, a few screenshot uploads, and a few API key integrations. We now have a pretty much fully functional app. There's a few things to clean up here that I could prompt it to just fix up the colors here so that it looks nice as well as fixing the colors here. And then we're pretty much ready. And then we can set up the page for the user to manage their settings as well as the options to subscribe to the Stripe integration. And we are pretty much ready. The app is ready to roll. So, what do you do once you're ready? How do you publish your app? Well, if you click the button here to publish, that's it. You can publish to Netlify. Let's link our account and publish this app so that other users can access it by a link. Now, in your profile settings, in integrations, you can also link your Netlify account. If you click on the button here, we'll be taken over to Netlifi where we can log in with GitHub, GitLab, Bitbucket or any other options. I logged in, did my GitHub. I'm going to click authorize. And now my account is connected. This way I can publish my web apps and manage my deployments separate from Rocket. Now keep in mind you can only use Netleifi for managing your web apps as the mobile apps will be deployed using Rocket's master account. And that's literally it. We pressed one button and it's live on Netlifi. Users can interact with it and actually use our app. And if we do any changes, we can click on publish again and then update it on that same link. I just logged into my Netlifi account and here is my published project. I can click on it and manage any kind of deployment settings. Also important to note with Rocket once you're done with your subscription, your app doesn't just magically disappear. When you publish it on Netifi, the app is yours. You can keep it published without having to pay the Rocket subscription. And it's the same with code. You could also go to code and export your code and you own that code forever. So, all right. So, now that I've shown you how to build a web app, let's jump into mobile app building. I'm going to click on the mobile app here and give it a prompt for a similar app and then click enter. Once again, it will take a few seconds to understand our request. It detected that we building a mobile app and chose Flutter. Now, as you can see, Rocket really understands a request and then cers the text tag depending on that. Now, last time we were building a web app. So Rocket used Tailwind as well as React and now because we are building a mobile app, Rocket chose Flutter. Currently, Rocket only builds mobile apps with Flutter. However, React Native will be available in the later future. But the building process here will be similar to the web app. We give it a prompt, we choose the pages, and we proceed with building our mobile app from there on. Same as with the web app, Rocket analyzes our request and then gives us some options for the screens that we should get started with. I'm going to go with the splash screen. login screen, goals dashboard, edit goal screen, details screen, and that's it. We don't need the profile and registration for now. And then I'll click on build. Now I'm back a few minutes later. Rocket generated almost every single screen that we requested. However, it had a failure on one of them, which is okay. We can click retry here and it will generate that page again, most likely ending up in a success. I love the UI that it generates. It was really good on web app and now it's also really good on mobile. Like it's super easy to navigate. doesn't create this messy apps where the user doesn't know what to do. Instead, here everything is super straightforward, exactly as if you had a UIUX designer. Let's try logging in. I'm going to use the mock data here and log in as admin. Awesome. It looks just as good as the web app that we generated. And it's got all of the different sections here as well. The nice little animation to switch between these pages. We can see all our goals, the percentage complete. As you can see, there's different units for each goal. and little different cards that allow us to track what they are. The different icons. I like how it did different colors for them as well. And we can add new goals by pressing the button here. Awesome. It added a few different options here where we can add manual check-ins. We can also do app integration. So, we can connect the other apps. And we have photo progress, which is pretty cool. Like it actually thought through what the user might need and added a few different options there. Here we also can set reminders. Oh, I love this layout. Makes it super simple to set the time frequency as well. Awesome. We can change the units here for our tracking. We can change the date for the deadline categories. We can also add it more if you wanted to. And different goal titles. Oh, it even has suggestions for the different goals. That's pretty cool. So, you remember how here for the goal details screen, actually the page failed to generate? Well, I click retry and in one try, Rocket fixed that page for us and now it works perfectly fine. We have a beautiful page where we can see all our goals detail. We can see the history of all of our tracking. We can see the chart. So, actually how we've been progressing on this goal as well as the different milestones. That looks pretty awesome. It's like different achievements. Now, I'm quite happy that the mobile app in just one prompt, we basically got all of the functionality that we want. Now there's a few other pages we can generate like the progress page, the profile page and a few others so that it's fully ready for the users and we can also add integration same as we did for the web app. We can tell Rocket that we want to sync all of this to Superbase. We can also add an AI chatbot if we wanted to. And once that's all ready, we can publish our mobile app. Now publishing a mobile app is the same as the web app. We can click on this publish button up in the top right. Uh this will actually publish the mobile app to Netlify. This does not publish the app to the Google Play Store or the Apple Play Store. This publishes it to Netlify so people can access this app as a PWA from their phone. I mean, this is a good feature to test out your MVP or to share your app with your friends or other team members. But if you actually want to push this code to the app store and publish it as a real app, you can save this code and then click the link in the description to actually access Rocket's documentation on how to proceed further. For example, for the Android app, you'll have to create a Google Play account. You have to sign up and configure your app for publishing. Upload your build and then go live. You could see the documentation in the details if you click the link as well as for the iOS. And that's pretty much it for building mobile apps on Rocket. It's as straightforward to build mobile apps as it is to build web apps. With a good prompt, you can cover a lot of the functionality and with a few extra tweaks and a few extra integrations, you can have your app ready to go. Now, let's jump into one of the most exciting features of Rocket, and that is Figma to Code. so that you can turn your designs into functional web apps as well as mobile apps in just a few clicks. So before we can actually import our Figma project, we'll have to connect our Figma account. You can click on the connect button here and then click on allow access. And that's it. Now Figma account is connected and we can proceed with importing our file or our file URL. So when we click import Figma, we'll be asked to give it a Figma frame or a file URL. Let me show you how to do that. So basically with Figma we have two options. We could either import the entire Figma file or we could import the specific screen. If I wanted to import the entire file, I click on the share button here and then click copy link. You can then paste that link here and start the import. However, if you wanted to import just a specific screen, you can click on the screen in Figma, then go to copy paste as and then copy link to selection. This way you'll have a URL just for that screen. However, for our case, I'm going to do the entire Figma file. Now, before you proceed with importing your Figma files, make sure to actually read through the Figma design guidelines. We'll include that in the description down below. This way, you can ensure that your design is as compatible with Rocket as possible. But the main gist here is the accepted structures as well as the frame size requirements. Make sure your designs folded in those. Now, I'm going to add my URL here and then click on start import. Now, in just a few seconds, Rocket accessed our Figma file and has shown us here all of our screens. Here, we can actually select the screens that we want to import. Now, as I mentioned before, the amount of tokens that you use on Rocket will depend on how many screens you're generating or how many screens you're importing. So, don't just import every single screen. You want to be smart about it. So, only really import the screens that you really need. For example, here the login and create account are quite similar. You could import just the create account page and then duplicate it the rocket itself later and then adjust it so that it's a login page instead. Now for our use case, we'll just import a few screens just to show you how it works. I've chosen home screen. I'll chosen create account just for the sake of speed. I'll also choose a login page. I'll choose the full detail course screen and I'll choose my profile. I think that's enough for our demonstration. Once you chosen the screens, you can just click on start import. And don't worry if you forgot to import one of the screens that you really need. You can add it later by clicking this button down here. Now, once we've chosen our screens, it will ask us to confirm our text tag. And then it will ask us to choose a state management option. Rocket will now ask how the app should keep track of user actions and screen changes. This is called state management. The options are bloc, get X, provider, riverpod, and without state management. Bloc is good for complex logic and data flows. Get X is more lightweight and fast. Provider is simple and reliable. Riverpod is flexible and scalable. And no state management is best for just widgets or basic apps or prototypes. So make sure you choose the one that suits your use case best. I'm going to choose block. And that's it. Now we can see the process for importing our Figma design. It will scan for the design, download the screen images, optimize the groups and layers, download the design assets, prepare data for code generation, then generate the code, and organize the project structure for us. Now, how many screens you can import from Figma actually depends on the subscription that you have. With the highest level subscription on Rocket, you can import up to 25 screens at a time. On the free plan, you get two screens. This is honestly a massive productivity boost that you can import so many screens at once, meaning you don't have to sit there and import each screen individually. You import the entire project, choose the screens, and you're ready to start generating your app. And but once again, make sure you're not just importing all the screens blindly. Be smart about it. Make sure to import the most important screens. And if you have screens that are very, very similar, you can just import one and then duplicate it later on and adjust it to save on tokens. So, as we can see, all the steps are completed and our Figma files have been imported and generated into a mobile app. You can see all of the pages here. Once again, let's go to the course dashboard. Amazing. As you could see, exactly as our Figma design, we've now got a mobile app. Now, we didn't import the statistics page and messages page, so I'm not going to test this out, but we did import the profile page. So, let's see if that works. Amazing. Profile page works exactly as the Figma file. Awesome. Let's test out some of the other pages as well. Create account screen looks very nice. Course details screen looks good. Login screen looks good. And app navigation menu looks good as well. Amazing. So now let's say we wanted to add a few other screens. We can click on the button here. And to make sure that we're still working in this file, we can click on the button here and make sure that we choose from the same file to add another screen here. If you click here, it will actually start a new project. So if you want to import to this project, make sure to click this top button. It will show us here the screens that already imported. So let's say we also want to add statistics and we want to add the search class related result. Click start import here on the left. And now this extra screens will start importing as well. Now in the near future, Rocket will also add an option to update the screens that you have within this project. Meaning that when you go to your Figma file and then you modify the designs in there, you'll be able to sync it to your Rocket project. This will massively increase productivity for those that are using Figma for their app building because you'll not have to import new screens instead. You can just update the screens that you already have imported and Rocket will show those changes that you made in Figma. It's going to be an awesome feature and it'll be coming within the next few days. Likely if you're seeing this video live, the feature already has been added. That's pretty much it for the Figma section as well. As you can see, it's really straightforward. Same as building a web app, same as building a mobile app, but instead we're just importing the Figma screens. Same as any other project. You can click here on the top right to publish. And once again, you can also add any of the same integrations that we added before, but on this Figma project instead. So, that's pretty much it. That's how simple it is to build apps on Rocket. With just one good prompt and a few tweaks, you can build out any of your ideas. Now, if you want to start testing out Rocket for yourself, make sure to click the link in the description. You can sign up for the free plan and start building for free. And make sure to subscribe to the channel because in our next videos, we'll actually be building out the entire app from scratch to finish. And don't forget to share some of your builds with us on X. You can tag rocket.new as we frequently feature some of the best builds on our socials. I'll see you all in the next