The RapidUI studio has a lot of editing, interactivity, and functionality options, letting you turn your own design into a full-on website. In this guide, we're going to run you through our recommended RapidUI workflow - so you can get running on building that live site!
- Create a new project
To get started in RapidUI, click the + icon, type in your project's name, and click ‘START YOUR PROJECT’. (Read the full Getting Started guide).
- Upload a PSD/Sketch file
After you've created your project, you'll be redirected to the studio -- where the magic happens.
All you have to do is drag and drop your PSD/Sketch file into the RapidUI studio and watch it turn into HTML & CSS. (Read the full design file upload guide, Photoshop design tips, and Sketch design tips).
Additionally, you can use RapidUI's pre-made elements to build your site; these can be found in the ‘Layers’ panel, just click ‘+ ADD NEW’ to open the new elements menu. (Read all about adding objects to your site).
- Make styling adjustments (if needed)
Review your site and make any styling changes you wish. You can always go back to make styling changes; however, once you've set a breakpoint, you'll have to make styling changes per breakpoint. (Read full styling guide or Full breakpoints guide).
- Add life to your design - Interactions & Animations
Now that your design appears on your page, it's time to give it life! RapidUI has many tools for functionality, interactivity, and animations. There are three different ways to turn your designs into live elements:
- Insert premade objects
- Make your website Responsive - manage breakpoints & mobile version
Once you have finished defining your site's functionality, it's time to make it responsive. Check out how your website looks in every resolution, and make specific changes in breakpoints. Create breakpoints where you want to make changes for specific resolutions, and use the ‘Scale Content’ tool in order to make automatic adjustments. Remember - once you've made changes to your site's design at a specific breakpoint, you will have to maintain that breakpoint’s design separately. Try to finish your site's functionality and design before creating breakpoints.
- Publish your site
This is the final stage, which results in uploading your site online. You've uploaded your design file, made it live and interactive, and created responsive versions so it will look perfect in every resolution. Now it's time to publish your site!
Click the ‘Publish’ button (which looks like this - ) and choose whether you want to publish your site using the RapidUI domain, or connect your custom domain.
Congratulations! Your site is now available online :)