When starting any new web project, the most time-consuming part is building the initial layout. What if you could skip through the hassle of starting from scratch on your next project?
That’s exactly what our new release is all about. With the UI Builder power-up, you can now jumpstart your UI development by creating the boilerplate with a simple block stacking interface, just like building with lego blocks. You can choose between Bootstrap and the Tailwind library for building your UI. We have quite a few layouts of the different sections like header, hero, features, pricing, etc (and many more) for you to choose from. Just choose the style for each section and add the blocks and your boilerplate is ready!
You can now export the HTML and CSS for the created layout and start editing only the content and the images to have the website ready. Or, you can save this layout as a wireframe to have it as a base/ template for your further edits and pass the wireframe to the developer once you are done with the design.
Here is a short walkthrough for our UI builders and how you can use them!
- Choose the Bootstrap5 UI builder or the Tailwind3 UI builder from the Add Pinned Powerups section inside your Design space.
- Click on ‘Add Block’ to view the available blocks - The sections are listed on the left and when you click on each section, the available layouts of that section will be displayed and you can choose the one that fits your design.
- You can easily change the layout of a page by stacking blocks in different ways. Experiment with different block layouts to see which looks best.
- You can create multiple pages in the same manner and check for their responsiveness by switching between desktop, tab and mobile views.
Click on export to download the code or save as wireframe to edit further.
Well, that’s not all. You can create your own custom blocks with our in-built editor that has an instant preview option and a code validator. You can create and share components within your team making collaboration even better between developers & designers.
If you liked this power-up, you can invite your friends outside MockFlow too to try it free with the public version (with a few limitations).