UI Whiteboard

What is the UI Whiteboard?

The UI Whiteboard found under the 'UI Mode' option of the Navbar, is an intuitive drag and drop interface to prototype UIs or compare components.

How to use?

If you don't have any components saved, go back to component mode and make some components. Save them and come back to UI mode, this section of the application only works if you have a component library built up (at least one component).

If you need help with this step, go back to the Quickstart or Building & Editing Components sections of the docs.

If you have components saved, you should see them in the bottom section of your screen.

Press add to add your component to the whiteboard. If you want to remove the component from the whiteboard, press the remove button or click on the component on the whiteboard and press the red 'X'.

On the bottom left you will notice some controls, if you want to lock the components in place press the lock icon. You can zoom in with your mouse scroll wheel or by press the + and - buttons on the bottom left of the whiteboard.

Click and drag your components to position them to your liking and then export the whiteboard as a screenshot by pressing the camera icon on the top left of the screen! This will save your screenshot to your downloads folder.