When you open the UXPin Editor, you will see that the UI is made up of a Toolbar to the left, the Properties panel to the right, a Top bar and a Bottom bar.
The Top bar features all the tools and functions you use while designing. What you see in it largely depends on what you select on the canvas.
To the Right, you have the Properties panel which allows you to adjust the properties of any element on your design.
In the Toolbar to the Left you have access to all the most frequently used tools.
In the middle you have the Canvas which is where you design.
And last but not least, the Bottom bar with the auto-save indicator and help section with shortcuts, video tutorials, Power tips, and new updates in UXPin .
In UXPin, you can change various view options. In the top left corner of the Editor, open the menu and go to View options. This is where you can:
- Switch between light and dark mode.
- Set the canvas pattern to dotted, grid or none, choose the workbench color.
- Show or hide the Properties panel on hover, when an element is selected or directly next to a selected element.
- Hide or show the interactions indicator.
Pages and Layers
If you add any Pages, they will be visible in the Sitemap at the top the left-hand panel. You can switch between pages, rename, remove and duplicate them. To organize your pages hierarchically on the sitemap, drag and drop one page to another to create a subfolder.
Creating and Deleting Layers
A layer is created when an element is added to the editor. It constitutes a new layer and is listed in the left panel immediately.
You can delete remove an element either directly from the editor or the panel. Just click the layer and remove it with the delete key.
To move a layer, go to the layers panel and drag and drop the layer in the desired area. You can also use the order feature at the top of the right panel to move layers to the front, back, forward, or behind. This is a great way to move layers when they are hidden.
Grouped elements become one layer in the panel which is marked with a folder icon, so you can easily find it.
To lock a layer, select the element(s) and either click the padlock icon in the right panel or
to lock them
Hiding and Showing Layers
To hide a layer, click the eye icon next to the layer name in the panel. When it’s hidden, you can only access it in the panel.
You can also set the layer's opacity to 0% instead of using the small eye icon. This is a great workaround so that elements will be transparent but still selectable.
The Quick tools bar contains the tools you probably use most often when designing, and these are Rectangle, Oval, Line, Path, Text, Image, Icon, and Hotspot.
Guides let you divide your canvas into sections to distribute your elements evenly. Grab one of the rulers next to the canvas, move the mouse cursor and drop the guide anywhere you want.
In the Properties panel you can change the properties of any element on your design and edit canvas properties. It’s divided into sections and the type of layer you select will determine which sections are available in the Properties Panel at a given time. For example, when you select a Text element, you will be able to edit it in the Typography section, when you select an image, you will be able to adjust its radius or edit it in the Image section.
The properties that are active for a selected layer will be in black, while the properties that are irrelevant for that layer will remain gray.
Other properties and features which you can access from the Properties panel:
In UXPin, you can perform math in any value inputs with numbers. You can add, subtract, divide, and multiply. Select a layer or multiple layers and use +, –, *, or / in any of the numerical fields.
For radius and padding, you can set a different value for each corner or edge — just click the square icon next to the value.
As long as you can manually type in values for your elements, scrubbable inputs are simply more fun. In UXPin, you can scrub values by dragging labels in the Properties panel.
- Place your element on the canvas.
- Select the element and hover over a label with a numeric value input.
- Drag the cursor right and left to increase or decrease that value.
Alternatively, if there is no label, just click through the input and press
. And if you drag with Shift, the value changes by 10px.
The cursor goes beyond the screen even if it reaches its end (desktop app and Google Chrome).