Tips and Tricks

When learning UXPin, the little things and workarounds can speed up your design process big time. So if you want to work faster and smarter than anyone else, take a deep dive into our design tips and tricks. They will fit right into your day-to-day workflow, saving you tons of seconds that turn into minutes, if not hours.

UI

Switch to Dark Mode

UXPin comes with the dark mode. To switch to dark mode, just go to View Settings in the bottom-right corner of the editor and you'll be able to choose from three options — Light, Dark, and Auto. If you choose Auto, UXPin will follow your macOS settings.

View All Pages at Once

It's useful to be able to see all your pages in one place – that's the Pages Overview is like a home for all your pages in UXPin. In the Editor, use the Alt "O" shortcut or click the Overview icon at the top of the Pages panel.

Hide UI

To toggle the visibility of the entire UI, use the Ctrl "\" shortcut.

Pan Canvas

Holding Space and dragging will pan canvas. This comes especially handy for quick navigation around the canvas when looking at the design from up-close.

Deep Click

Groups clear things up but you often have to click like crazy to select a nested element. Well…not necessarily! The trick is to hold down Ctrl and click the element you want to select, and forget about the endless double-clicking madness.

Change Opacity

You can quickly change the opacity of selected elements using numbers on your keyboard. Hit "2" to get 20%, "3" to get 30%, and so on. Pressing "0" will give you 100%. But if it’s already 100%, then "0" will drop it to 0%.

Resize with Keys

You probably know that you can nudge an element pixel by pixel with arrow keys. But did you know that you can also adjust its size using the same arrows but with Ctrl pressed? And if you hold "Shift" , it will resize by 10px.

Crop and Scroll

In UXPin, there’s a simple way to make parts of your prototypes scrollable either vertically or horizontally. Group the content first, then select Crop selected content in the Properties panel and check Vertical or Horizontal scroll or both.

Copy and Paste Styles

After creating a layer style, you might want other layers to have the same style too. Luckily, there’s no need to recreate everything from scratch — use Ctrl Alt "C" to copy it and  Ctrl Alt "V" to paste it on to those layers.

Paste to Replace

When you want to replace placeholder items, you might want to quickly swap out a selected object on your canvas with one you've copied to your clipboard. Copy the object you want to use, select the items to replace, right-click, and choose "Paste to replace" from the context menu, or use Ctrl "Shift" "R" .

Select within Selection

Things can get tricky when there are several elements that overlap and you only want to select one — typically you end up grabbing other elements along the way. To solve this problem, hold Ctrl when making your selection. It works like a lasso and only scoops up the elements that are entirely contained in the selected area.

In Get Code mode, you can also use Ctrl + click to easily select nested components, ensuring precise control over your selections.

Copy and Paste Interactions

With interactions, things work the same. To copy all interactions from one layer and paste them on to other layers, use Ctrl "Shift" "C" and then Ctrl "Shift" "V" or do it from the context menu where you can also copy a single interaction.

Zoom to Fit and Zoom to Selection

Speed up your workflow by using these zoom shortcuts, and quickly go from detail to bird view. "Shift" "2" zooms to the selected element while "Shift" "1" scales and positions your view to show the entire design. This also gets useful when you want to go to an element selected in the Layers panel without the need to endlessly scroll through the canvas.

Paste Image and Text

Pasting any text from your clipboard right into UXPin will create a text field. The same works for images!

Refresh Data

So you filled your elements with data and want to refresh it? Just use the Ctrl "Shift" "D" shortcut and watch your elements fill out with new content.

Drag Label to Change Values

There's a faster way to change input values than typing – you can just drag the label to increase or decrease the value. Holding down "Shift" when dragging will change the input value by 10.

Lock or Hide All Layers

To lock all layers in a group, just hold down Alt and click on the lock icon. To hide all layers, also hold down Alt and click on the eye icon – the layers will stay hidden even if you pull them outside the group.

Rename Layers

To quickly rename a selected layer, use the Ctrl "R" shortcut and start typing. "Tab" takes you one layer down and "Shift" and "Tab" one layer up.

Ignore Snapping

When moving or resizing elements, you can ignore snapping by holding down Ctrl .

Input Math

Use math in any field with numbers. You can add, subtract, divide, and multiply.

Collapse all Groups

To collapse all groups in the Layers panel at once, use the Ctrl Alt "L" shortcut. This will close all groups in the layers panel.

Expand and Collapse Many Groups

To expand or collapse multiple groups at once, hold down Alt and hit the arrow next to the group’s name. This will open up or close absolutely everything within the chosen group.

Use Emoji in Layer Names

Just as tweets would be incomplete without a sparkling of 😁or 🥳, the names of your layers can also do with some realistic touch. You can also add an emoji to the names of your layers in UXPin. If you’re working on Mac, hit Ctrl "Control" "Space" . On Windows, use the "Windows" key and dot "." .

Hide a Page from Preview

A lot of times, when sharing a design that has lots of pages, we don't necessarily want someone to see all of them. The little trick is that you can, from the Pages panel, hide a page from preview. Click on the eye icon next to the page you want to hide on Preview. This way, it won't be visible when you share your designs.

Access all Fonts Quickly

When working with text and various fonts, it can be handy to be able to view all the available fonts for a selected text element. Just hit the Alt "T" shortcut – this will immediately open the Font dropdown in the Properties panel.

Change Big Nudge

By default, when you press "Shift" and Key Arrows, the element will move by 10px. To change the nudge, go to View Settings in the bottom-right corner and adjust the Big Nudge value.

Place Images into Elements

You can import Images in bulk and then choose exactly where you'd like to place each Image. This allows you to place images within existing objects.

Change Text to Auto-Size

Double click the bottom or top of the text box to set it to a fixed width. To change it to auto-size, double click on its sides.