There are some basic elements you use multiple times a day. It’s hard to imagine designing without them, especially when creating lo-fi prototypes.
That’s why, instead of being scattered throughout UXPin’s libraries, they’re at your fingertips on the left side of the editor. You can access them by clicking on the appropriate icon next to the canvas or by pressing the right shortcut. Those shapes and components are also put in “Basic Elements” library by default.
Basic elements include: Box, Circle, Line, Text, Image, Icon, and Hotspot. “Basic Elements” library contains other useful tools like “Button”, “Checkbox,” and an “Input” form.
If you need more shapes, select “Shapes” element from “Basic Elements” library and go to “Custom” section on the right side of the editor. Here you can browse from additional parallelograms, stars and variations of triangles to quickly get what you need.
To expedite your workflow, access any of those elements with the search function (CTRL/CMD + F).
Extra Options to Customize Basic Shapes
You can alter two very basic elements — Box and Circle — with extra options: border, padding, and radius properties. Those two features can be found in Style section of selected elements:
Styling Shapes With Borders, Corners, and Arrows
Borders can be solid, dotted or dashed. If you need to round up the corners of your elements, including the ones you draw with the Pen Tool, you can set the corner radius in the Radius input.
Many designs use Arrows either to point something out or indicate movement, so this basic element has few extra options like customizable endpoints (meaning you can have a single or double arrow), size, or rotation. All shown here:
You can search for Arrows using CMD/CTRL+F!
Basic shapes are great tools to help you quickly build out prototypes that test ideas before sweating the details. Ready to try it in UXPin? Log in to the app!