Author: Julia Haleniuk

A lot has happened over the last few months. We’ve shipped a total of 20 improvements and features that mark UXPin 2.0 – from rebuilt Layers and Pages to enhancements to Guides, and more. And since most of them had been requested by you, delivering it all makes us incredibly proud! Let us guide you through.

What does UXPin 2.0 mean?

In fact, we’ve already shipped all the improvements, new features, and bug fixes that were planned for UXPin 2.0 – and chances are you have heard of some (if not all) of them.

There will be no grand product release, but since UXPin now performs better and works faster than ever, we’re having a launch on Product Hunt where you can ask questions, give feedback, and give us a shout out.

See UXPin 2.0 on Product Hunt

Precise Zoom

One of the highlights of the past months were improvements to Zoom, including new zoom options and what we call the Zoom mode. We have also expanded the zoom levels from 2% all the way up to 25600%. Try zooming in with a mouse scroll and you’ll see that the trackpad focuses on where your cursor is.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/zoom.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Get every pixel right with the pixel grid

Also, with the newly added pixel grid, it’s easier than ever to get every pixel just right. The pixel grid is available at zoom levels from 800% and higher. To find out more, read our blog post about the Strikingly Precise Zoom.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/10/Zoom_Changelog_800x600_v3.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Hi, Smart Grid

In May, we released the Smart Grid which makes rearranging and adjusting the spacing between selected elements so much easier. It’s also super helpful when checking the distance between elements.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/Smart_Grid.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Hello, Power Duplicate

Shortly after that, we took things one step further and shipped what we call the Power Duplicate. It’s a major time saver if you want to quickly create a list of elements with various data – so look no further. See how it exactly works in the tutorial.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/Powerduplicate_TW_800x600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Guides got better

Somewhere along the way we’ve decided to tweak up our guides. For the sake of less clicking around, you can now remove all guides at once or choose to remove only the horizontal or vertical guides. So you’ve got more time to spend on things that actually matter. Read more about guides in Docs.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/RemovingGuides_changelog_800x600_v3.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Smart guides got smarter

Smart Guides are one of those features that should be barely noticeable if they work properly. Often when you want to be more precise when moving or resizing elements, you’ll use the keyboard arrows to do that. And that’s when smart guides also started to show! You can read more about these updates here.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/SnapGuide.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Any shape you draw – Pencil tool’s here

Sketching ideas and drawing virtually any shape you can think of has never been easier! With our mighty Pencil tool, you can draw any shapes freehand. Then, fine-tune them the way you want. Plus, everything gets magically smoothed out once you’re done drawing as UXPin simplifies the path.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/PencilTool-Changelog-800×600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Add images in bulk

Gone are the days when you had to place images repetitively one by one. You can now add images in bulk and choose exactly where you want to place each image, one after another.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/NewAddingImages_ChangelogSM_v2_800x600_1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

New text element for happier typing

A few months ago our new text element came with plenty of new options, such as the new auto-size, vertical align, paragraph spacing and an improved auto line-height. And that’s not it – you can enable ligatures, fractions, as well as subscript and superscript.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/newtextelement_800x600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

UI changes

Over the last few months, we have done some major changes to the UI. When you open UXPin, you’ll see that the Top Bar has been reorganized – relevant features, such as Prototype Actions are now together. You’ll also see that there’s generally more space in the Top bar. Plus, the Missing fonts toast now shows in the bottom bar. And if you’re looking for Accessibility Features, go to the bottom right corner.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/ui-changes-1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Project team avatars for better collaboration

In addition to more space and grouped features, we’ve made our collaboration even better. Whenever someone starts working with you on the same prototype, you’ll see their avatar in the Top bar. Just like in Google Docs.

All View Settings in one place

Much like the Top bar, View settings have also gotten an overhaul. We moved them to the bottom right corner of the app and added some new options, including toggles for rules, pixel grid, and hotspots. You can also switch between light, dark, and the auto mode which follows your system settings.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/10/NewMenu_800x600_changelog_v2.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Keep your tools handy in Quick Tools

Making Quick Tools faster to work with and easier to get used to, took us some time to rearrange them. The Shapes that you use most often are in one section, including two new shapes, the Start and Polygon. Also, Libraries, such as Bootstrap and Foundation are now in Design System Libraries under UXPin Libraries along with Material Design, iOS, and User Flows.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/09/1_QuickTools-1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Layers are faster than ever

Rewriting the Layers and Pages gave both panels over-the-top performance we’ve all been waiting for. They also shipped with the most frequently requested features. Eventually, we merged both panels into one section for easier access.

Layers shipped with a number of improvements, making them work up to 20 times faster than they used to. For instance, if scrolling to the end of the panel took 15 seconds before, it now takes 10 seconds.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/10/Layers_release_Changelog_800x600_v1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Pages rebuilt from the ground up

As for Pages, you’ll notice a significant difference in the way you manage them now from reordering, to deleting, through duplicating several pages at once. Also, switching between Pages and Design System Libraries now happens from the bottom bar.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/BP_pages.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Hide the UI

Apart from all the above, we’ve also made it possible to toggle the entire UXPin UI with a single shortcut. So if you ever felt like viewing your design without the surrounding panels, just hit Cmd \ on Mac and Ctrl \ on Windows to hide them in the blink of an eye.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/BP_zen-mode.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Bye Symbols, hello Components

Components were the runner up on the list of the most frequently requested features. Back in July we said so long Symbols and welcomed Components. The new way of editing the Master Component to (almost) unlimited overrides make your design workflow a much more streamlined, enjoyable, and time-saving one. Read all about Components in the tutorial.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/MasterSymbol_Vid_PromoRelease_TW.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Sketch import

If Components were the runner-up, then Sketch import was without a doubt on top of the list of requests. Thanks to it, you can simply drag and drop your files right into UXPin and on any computer, with or without Sketch. Then, you just pick up where you left off and edit every single layer of your design. We like to compare it to “breathing new life into your designs, taking them from static artboards to beautifully interactive prototypes with ease”. See how it exactly works in the Sketch import tutorial.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/07/Sketch_import.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Tell the story of your design with User Flows

User flows can take many various forms, depending on the type of website or app you are building. Thanks to User Flows with ready-to-use components, you can now quickly create rich, perfectly styled flows and tell the story of your prototype fast.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/UserFlows_DesignSystem_800x600_1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Video and Audio

With the Video and Audio elements available in the Quick Tools menu, you can enrich prototypes with interactive videos and use sound for better guidance. See for yourself  how it works.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/MediaComponent_TW_800x600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

A staggering amount of 200+ fixes and improvements

In the meantime, we’ve managed to smash and add over 200 fixes and improvements. Here are the top ones:

Fonts

• [fixed] Fonts didn’t load when component overrode the font-family property in a child element.

• [fixed] Missing fonts modal was visible when you used missing fonts on deleted elements.
• [fixed] Missing font toast would show on an empty canvas.
• [fixed] Issue with recognizing local fonts on Windows.
• The Comfortaa and Oswald fonts looked different in UXPin than in the Google fonts preview.
• [improved] We will try to match local fonts that are not installed on the computer with Google Fonts and replace them if available.

Guides

• [improvement] Guides snapping sensitivity based on zoom.
• [improvement] Reduced the possibility of accidentally moving a guide when resizing the element.

• [fixed] Switching between pages, breakpoints or Component (Master) edit mode on zoom level different than 100% resulted in misplaced guides.

Zoom

• [fixed] Canvas was not rendered correctly on very high zoom levels when you moved panned the canvas with space and drag.
• [fixed] Canvas position was not kept on page switch especially on low zoom levels.
• [fixed] The Canvas would disappear when you used the Fit All shortcut to see your entire design.
• [fixed] Visible rulers when zooming in/out.
• [fixed] Polygon looked weird when you changed the number of vertices at a higher zoom level.
• [fixed] Guides created on a zoom level other than 100% displayed the wrong positions.
• [fixed] Zoom didn’t center to elements that were off-canvas.

SVG elements

• [fixed] In some cases, you couldn’t drag and drop SVG assets on the canvas.
• Issues with downloading some SVG files from the Spec mode.

Pen tool

• [improved] Zooming in or out while drawing a path.
• [improved] Possibility to cut away lines from closed shapes.

Components

• [fixed] Pressing Delete in a button inside a Component broke the Component. When you pressed Space you could also see the cursor to jump and skip letters.
• [fixed] You could drag and drop images while editing Component Instances.
• [fixed] The breakpoints bar was visible and the canvas was jumping when you edited the Master Component.
• [fixed] Undoing deleted Components did not restore nested Components.
• [fixed] Data about nested components was lost when cutting the last available instance of the component and pasting it.

Properties Panel

• Clicking through the padding and radius inputs would crash the Properties Panel.
• You couldn’t use TAB to move to the height input after changing the value in the width input (with lock enabled).
• Values for position and size couldn’t be pasted with copy-and-paste shortcuts into their inputs in the Properties panel.

States

• Nested states changed calculations – should result in 100% consistency in state changes between editor and preview.
• Elements would rotate incorrectly when switching between States.

Layers

• Ungrouping elements removed interaction indicators.
• Cropped groups did not duplicate on the canvas when using the Power Duplicate.

Iterations

• Moving a prototype between projects sometimes removed all iterations.
• Missing Variables in the previously created iterations.

Spec mode

• Properties of the base state would show in the Spec mode for all states within a symbol.

Desktop App

• [fixed] Added compatibility with macOS Catalina.
• [fixed] user was log out every time after quitting desktop app.

Other

• [fixed] Sometimes, it was impossible to delete interactions from a copied element.
• [fixed] When added on canvas, elements weren’t visible in dropdown while the Interaction was still open.
• [improved] Added new options to the context menu.
• [improved] Batch ungroup.
• [improved] Faster thumbnails in Design System Library generation.
• [improved] Resizing from the canvas ignores lock.
• [improved] What’s New has been moved to Help in the bottom right panel of the Editor.
• [improved] With the release of Video and Audio elements, we added 4 new options to customize the player: Autoplay, Controls, Loop, and Mute. Also, there are 3 new interactions: Play, Pause, and Stop.
• [improved] New Rename shortcut. Press Cmd/Ctrl + R for a selected element and change its name in the Top bar.

What’s next?

Since we don’t plan to slow down, here’s what you can expect in the next releases after UXPin 2.0:

• Improvements to Interactions and States
• Baseline and column grid
• New color picker
• Pages overview
• Hiding pages from preview
• UXPin projects import

After improving Layers last month, we’re excited to launch the improved Pages panel and a reorganized Top Bar. While Pages come with a set of features and performance improvements, the new Top Bar has now more space and keeps related things together.

Pages and Layers in one panel

Up until now, Layers and Pages were two separate sections in Quick Tools. From now on, you can access both in the left corner of the bottom bar with a single click.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/BP_pages.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

You can collapse the Pages panel by dragging the horizontal line that separates Layers from Pages all the way up or double-clicking on it. When the panel is collapsed, a down arrow will appear next to your current page name. Clicking the arrow icon expands the Sitemap, where you can quickly switch between pages. So if you’re dealing with a large project with plenty of pages, you’re going to love this one! Read more about it in Docs.

A whole new context menu 

Right-clicking on a page name in the panel opens the new contextual menu with a full set of features for the page you’ve selected – add a page, delete, open in a new tab, duplicate and rename. To rename a page even faster, double-click on a page name in the panel and start typing.

Delightful experience and better performance

Another great way to show how much we’ve improved the performance of pages is to compare adding, reordering and duplicating pages before and after the changes. 

To add a new page right below your current page, just right-click on the page name and choose Add Page. This adds a new page immediately below your current page and opens it. Previously, adding new pages was possible only from the top of the Pages panel. Plus, you always had to name the page before it was sent through the network and appeared on the list.

You’ll also notice a big difference when you reorder your page by dragging and dropping them on top of each other. Before the change, you’d have to wait before the pages get grouped. Now, it happens in the blink of an eye.

When it comes to duplicating pages, we’ve made it work a lot faster than before. You can now duplicate multiple pages at once. Gone are the days when you had to do it separately for each. Better still, if a page has child pages, duplicating it will copy the entire tree at once.

On top of that, there are two new ways of selecting multiple pages. Shift-click selects the first page, last page and all pages in between, whereas Cmd-clicking allows you to pick selected pages.

Hide the entire UI

If you want to view your design without the UI, you can now toggle the visibility of the entire UXPin UI by using the Cmd \ shortcut (Ctrl \ on Windows).

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/11/BP_zen-mode.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Reorganized Top Bar

Just as mentioned in the headline, with this update our Top Bar has been a bit reorganized. We’ve shuffled things around a bit by putting together options that are related. Here’s what’s changed:

• You can now access Prototype Actions in the middle of the Top Bar. That’s where you can create a new iteration of your prototype, export and rename it. The name of the iteration you’re currently editing shows in the rectangle next to Prototype Actions. Click it to access the list with all your iterations where you can retrieve them, delete or rename iterations with a double click.
• Documentation and Design modes are now on the left side of the bar.
• From now on, when working on the same prototype with your team, you will see their avatars in the Top Bar – just like in Google Docs. See more on Docs.
• And if you’re looking for Accessibility Features, they are now in the bottom right corner of UXPin.

While constantly working on more improvements, we wanted to take some time to share with you some other exciting product updates that are taking place. Upgrades to Guides, the Pencil Tool, and adding images in bulk are what has been shipped this time.

Guides just got smarter

Smart guides and guides are one of those features that should be barely noticeable if they work properly. So we’ve decided to make them smarter with this update! You can now remove all guides at once or choose to remove only the horizontal or vertical guides. Just right-click anywhere on the canvas and select one of the options from the context menu. So you’ve got more time to spend on things that actually matter! Read more on Docs.

Better still, you can also check the distance from a selected element to a guide. Just hold Alt and hover over that guide. Plus, guides now snap to elements and canvas edges!

Now a word on smart guides. Often when you want to be more precise, you’ll use keyboard arrows to move elements. From now on, smart guides also show when you move or resize elements with keyboard arrows. Find out more about it on Docs.

Add images in bulk

You can now add multiple images at once and choose exactly where you want to place each of them. Click anywhere on the canvas to add an image with its original size or click-and-drag to define the size. If you selected more images, you will also see how many images you have left to place on the canvas. See exactly how it works on Docs.

Draw any shape with the Pencil Tool

With the recently introduced Pencil Tool, drawing shapes and quickly sketching ideas feels like a breeze. You can draw any shapes freehand and it’s great for quickly sketching and jotting down rough ideas. Then, fine-tune them the way you want. Plus, everything gets magically smoothed out once you’re done drawing as UXPin simplifies the path. Read the tutorial on Docs to find out more.