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.
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.
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.
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
and click the element you want to select, and forget about the endless double-clicking madness.
You can quickly change the opacity of selected elements using numbers on your keyboard. Hit
to get 20%,
to get 30%, and so on. Pressing
will give you 100%. But if it’s already 100%, then
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
pressed? And if you hold
, 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
to copy it and
to paste it on to those layers.
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
when making your selection. It works like a lasso and only scoops up the elements that are entirely contained in the selected area.
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
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.
zooms to the selected element while
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!
So you filled your elements with data and want to refresh it? Just use the
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
when dragging will change the input value by 10.
Lock or Hide All Layers
To lock all layers in a group, just hold down
and click on the lock icon. To hide all layers, also hold down
and click on the eye icon – the layers will stay hidden even if you pull them outside the group.
To toggle the visibility of the entire UI, use the
To quickly rename a selected layer, use the
shortcut and start typing.
takes you one layer down and
one layer up.
When moving or resizing elements, you can ignore snapping by holding down
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
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
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
. On Windows, use the
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.
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
shortcut or click the Overview icon at the top of the Pages panel.
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
shortcut – this will immediately open the Font dropdown in the Properties panel.
Change Big Nudge
By default, when you press
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.