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

The post All shipped: The 20 improvements that make UXPin 2.0 appeared first on Studio by UXPin.

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.

The post New Pages Panel and UI Changes appeared first on Studio by UXPin.

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.

The post Improved Guides, Pencil Tool, and Adding Images in Bulk appeared first on Studio by UXPin.

UXPin’s presence on YouTube will be growing more and more with each coming month. Not only have we decided to open up our library of fantastic webinars with top experts from the industry, but also decided that we want to communicate with you more often Live in a very visual way.

Virtual Summit 2019

The next step we want to take in our journey is to invite you to our Virtual Summit that will take place on November 19th on our YouTube channel. If you want to secure your spot and be notified about the event you can subscribe by navigating to our dedicated page:

Virtual Summit 2019

“A good product isn’t just about features” – the motto behind the conference is not just an empty phrase for us. We have dedicated ourselves to improve how you experience our tool, as an addition to how feature-rich it is.

If you want to learn more about why we decided to embark on the UXPin 2.0 journey and what has happened so far, you can take a look at our list of posts that will explain everything in more detail:

UXPin 2.0 on Studio

UXPin is not your average prototyping tool for linking static screens or artboards with transitions. It gives you everything needed to design prototypes that work as if they were the finished product. Give us a try:

The post UXPin on YouTube appeared first on Studio by UXPin.

Switch the theme between Light, Dark or Auto

We moved our view settings to the bottom right corner of the app and added some new options. That way, you can now access all the important settings easier with less clicking around. You can also read about it in our view settings tutorial.

In the Theme section, you will see a new “Auto” setting. It works with Chrome 76 or Safari 12.1 or later on devices updated at least to macOS Mojave. Select “Auto” and UXPin will match your OS system settings. The workbench color follows the color of your theme but you can still switch it to transparent with the Transparent Workbench toggle. We’ve said goodbye to the Canvas pattern option where you could switch between dotted or grid. Also, Integrations are now available only from the Settings’ menu on the Dashboard.

New toggles for rulers, pixel grid, and hotspots

Next, knowing that not everyone uses rulers on a daily basis, we have added the possibility to show or hide them in the view settings. Toggling interaction indicators is now possible only with the toggle and not the Alt I shortcut like before. Working on large, complex prototypes often means a busy canvas with plenty of hotspots. That, in turn, can make it less clear. Luckily, you can now toggle them on and off.

Last but not least, you can now decide whether you want the pixel grid to show or not. Once you select the checkbox, it shows at zoom levels of 800% and higher.

The post Overhauled View Settings for easier access appeared first on Studio by UXPin.

Just so you know, we’re planning a re-launch of our app this November. It’s called UXPin 2.0 because not only the tool itself is changing, but our approach to product development is somewhat new. Or to be honest, back to where we started.

We’ve decided to forget the competitive race, stop hustling over new big features for a while, and focus on the UX. You can read the detailed UXPin 2.0 release note on our blog.

Because our CEO, Marcin Treder, is a designer too and he uses the UXPin app to design stuff on a daily basis, obviously he’s got his own top improvements from our roadmap that he has been eager to check out. He’s already shared his story behind the UXPin 2.0 idea on Medium. However, the latest product changes are all about the user experience and thus, some of them are very subtle. So now it’s “show, don’t tell” time!

Make sure you didn’t miss anything – watch Marcin sharing the highlights live on October 24!

The post Showing the hidden treasures of UXPin 2.0 – LIVE! appeared first on Studio by UXPin.

Introducing up to 20X faster Layers

We’ve rebuilt Layers making them up to 20X faster. Apart from being speedier, they also come with the context menu and the possibility to filter layers and setting a color for each layer. You can also expand Components like groups in the Layers panel, toggle visibility and lock each element. On top of that, we’ve added two new shortcuts for the sake of less clicking and faster workflow. You can collapse all groups at once with Alt Cmd L. And reverse the order of layers order with Alt Cmd R. This is especially useful when you want to change the order of inputs on your prototype and how they focus on pressing tab.

Smoothly zoom in from high-level

Apart from all the improvements that we have already described in our post about the Zoom, we have extended the zoom levels from 2% to 25600% for you to zoom in smoothly from high-level.

Also, the pixel grid is now a thing. It shows at zoom levels from 800% and up and allows you to get every pixel just right. When placing or moving objects, they will snap to the grid. This prevents misaligned pixel errors when exporting elements. Last but not least, with the new shortcut, finding a selected layer just got faster! You can now center to selected elements using the Shift 3 shortcut.

New shapes and an expandable menu

We’ve simplified the Quick Tools menu by rearranging elements and adding new ones to it. We’ve made it easier to work and find what you need faster with less clicking around. With all the frequently used Shapes in one place and ready-to-use components under Forms, using Quick Tools feel like a breeze. That also includes Libraries, such as Bootstrap and Foundation being moved to Design System Libraries under UXPin Libraries. Read more about our improved Quick Tools.

Power Duplicate

This is your new best friend if you’re looking to save time, and we call it Power Duplicate. Select an element and hold Alt. Then, drag the blue handle in any direction duplicating the selection as many times as you need. And the best news is that it works with data filling elements with refreshed content. Find out more in our Power Duplicate tutorial.

Happier snapping with overhauled guides

Smart guides and guides are one of those features that should be hardly noticeable as you design. That’s why we’ve totally overhauled their behavior. Smart guides are more visible and show when you move or resize elements with keyboard arrows. That way, it’s even easier to position elements exactly where you want. When it comes to guides, you can now check the distance from a selected element to a guide – just hold Alt and hover over that guide. Finally, guides now snap to elements and canvas edges.

What’s improved

• When you move elements, distance values now show in small pink rectangles perfectly centered between elements, making them more visible than before.
• You can now remove guides on both axes, x and y.
• The default icon is now the cog icon. Also, the icons section remembers the recently selected icon library.
• Selecting layers in the Layers panel with Shift pressed selects all layers in between.
• We simplified the look of the Typography section in the Properties Panel. Additional options are now available after you open More Options.

What’s fixed

Zoom

• Fixed a bug where you could see rulers when zooming in/out.
• Polygon looked weird when you changed the number of vertices at a higher zoom level.
• Guides created on a zoom level other than 100% displayed the wrong positions.

Canvas

• The Canvas would move to a random place when you zoomed out.
• The Canvas would disappear when you used the Fit All shortcut to see your entire design.

Components

• 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 a bug where you could drag and drop images while editing Component Instances.
• The breakpoints bar was visible when you edited the Master Component.

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).

States

• Nested states changed calculations – should result in 100% consistency in state changes between editor and preview.

Layers

• Ungrouping elements removed interaction indicators.

Iterations

• Moving a prototype between projects sometimes removed all iterations.

The post What’s New in August & September appeared first on Studio by UXPin.

And that’s why we’re committed to improving the UXPin experience and making it as enjoyable as possible for everyone. We’re taking it one day at a time, working on the little things that matter before the official launch of UXPin 2.0 on November 19th on Product Hunt. Before that, we’ll be sharing with you all the exciting updates. Today, we want to focus on our zoom which we’ve recently improved to be more precise and work in a lot more predictable way

Zoom mode to make things easier

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

One of the most exciting parts of the zoom is what we call the Zoom mode. Hold Z to enter that mode and click to zoom in or press Alt and click to zoom out. Or, keep the “Z” button down and select an area you want to fit the viewport to.

Zoom centers on cursor for striking precision

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

Before the changes, zooming simply wouldn’t focus your working area on the cursor. As you can imagine or remember, this required panning around the canvas to get where you want to be. It’s a tiny thing, but it’s annoying to have to zoom, then scroll to get to where you want to zoom in on. Now, zooming in with the mouse scroll or the trackpad focuses on where your cursor is. And it works the same when you zoom in and out in the zoom mode.

Extended zoom levels, pixel grid and more

You can now view your design at extended zoom levels from 2% to 25600%. 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.

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

Other options include the Zoom In and Zoom Out to adjust the zoom at pre-determined increments: 2, 3, 5, 10, 25, 33, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1200, 1600, 3200, 6400, 12800, 25600. Then, you can zoom the canvas to a specific percentage, 50%, 100%, and 200%. Fit to All enables you to see the entire design and Fit to Selection zooms to the currently selected element.

And last but not least, checking Zoom to Selection checkbox at the bottom of the dropdown menu will center the selected elements on the viewport when zooming.

As you can see we are hard at work to make the experience of using UXPin as friendly and as streamlined as possible. Zoom, as well as a steady stream of other improvements, all fall under the banner of UXPin 2.0, the initiative where we focus on you. If you want to learn more, leave your email and we will keep you up to date.

The post The Strikingly Precise Zoom appeared first on Studio by UXPin.

Among many other changes, we’ve done a lot of work to improve the left-hand toolbar, which we call Quick Tools, by rearranging elements and adding new ones to it. Once you start using it, you’ll see that it’s a lot more intuitive and just overall more natural to get used to. See what changes we made to our ever-improving editor.

New Shapes and an expandable menu

To make life easier for all of us, we’ve put the shapes which you probably use most often under one, expandable menu – Shapes. When you open it, you’ll see two new shapes, Polygon and Star. You can read all about it, in this tutorial.

Box and Rectangle – alike but very different

When it comes to the difference between Box and Rectangle, there’s more to it than meets the eye. To avoid any confusion, let’s get right to explaining what sets them apart. As with most things, the devil is in the details. It’s possible to add text to the Box, but since the Rectangle is a vector shape, you can customize by dragging the vector points or adding new ones.

Libraries are in Design System Libraries

Libraries, such as Bootstrap and Foundation are now in Design System Libraries under UXPin Libraries along with Material Design, iOS and User Flows. Previously, you could access them from More elements which we removed.

Easier and smooth access to elements

We’ve made it easier to work and to find what you need faster with less clicking around. With all the frequently used Shapes in one place and ready-to-use components under Forms, using them should all feel faster and smoother.

All this and even more improvements are coming to UXPin 2.0. Leave your email to keep up to date with all the little fixes we have for you.

The post Better Quick Tools are here – more intuitive and faster than ever appeared first on Studio by UXPin.

The code behind Layers has been rewritten to ensure that whatever the asset and element load is, your work experience in UXPin does not suffer from stutters or delays. With that said, let us take you on a more detailed, technical journey to exemplify what has exactly changed and how it influences your work.

A detailed performance comparison

Our dev team took the time to run a series of tests on both versions of layers, the old one and the new one. These tests aimed to clearly show what has changed, since visually in the editor it might be unnoticed.

The comparison was done manually using Chrome DevTools with 774 layers in the layers panel – all visible without nesting. On the canvas there were 1482 elements (as counted using document.querySelectorAll(‘.ng-element’).

Drag and Drop

In the Old Layers, the LayersTree component had to be refreshed with every drag of an element on the canvas. Because of the already complicated structure of layers, it could take about 250ms to 500ms to update depending on the position of an element in the layers tree.

On the other hand, New Layers take a more streamlined approach and due to the simplified structure of the component and a flat structure in redux, the update takes much less time – down to about 60ms. It is also worth considering that much of this time is spent rendering the view.

Scrolling to the end of the layers list

With the Old Layers, this action within the parameters of our test took about 15s, with rendering taking a large portion of that time (4s). This was due to lazy-loading, which meant that layers created elements with every scroll.

The New Layers take much less time to scroll through (about 10s), saving you time. The implementation of New Layers assumes that single elements are updated as you scroll and their quantity stays the same.

Selecting the last element in the layers list

Before the change, selecting the last element on the list was very time-consuming as all elements from the layers list would load. As you can see on the screen, this action used to take 1.45s – and this surely got noticed by many of our users. 

New Layers render only visible elements. As a result, selecting the last element is simply much faster. The action itself lasts about 70ms, most of which is rendering.

Comparing Old Layers and New Layers using performance tests

With dragging and dropping elements on the canvas, we also wanted to measure how the frame rate was influenced when working on a large project. With the test parameters described above, the average framerate went up significantly with the New Layers implemented.

The difference is akin to what might be the case of switching off the layers panel with the old system. So the difference when working on large and lengthy projects is clearly visible and it benefits the user experience immensely.

Other improvements that have seen a significant decrease in time are opening the layers panel (a gain of at least 60ms) and selecting elements on the canvas.

With the latter, the time of selecting an element on canvas has also improved. Choosing a group (i.e. an element that is directly on canvas) takes about 300ms less (429ms vs 733ms) and is only 100ms longer than with a closed layers panel. Selecting the input (i.e. the element which is nested) takes around 300ms less (586ms vs 864ms) and is only around 100ms longer than with closed layers panel.

This change signifies what we consider to be UXPin 2.0 – a long hard look at what we can improve to make your experience better. If you want to learn more leave an email and we’ll keep you up to date.

The post New Layers in UXPin – as fast as they come appeared first on Studio by UXPin.

UXPin 2.0 is coming on November 19, 2019. This is a marking moment for UXPin product design. The time has come for us to change our approach to how we develop the tool. Because a product is not just a collection of features. We decided to stop adding heavy-duty features and focus on making what we already have more user-friendly and faster. How did we get here? We’ve been adding feature after feature. It’s been a fun ride and we’re super excited to see the effects. But the high-paced competitive race is making companies take shortcuts. When you’re busy building, sometimes you miss the details. That’s why we decided to draw a line under our product roadmap, rally the troops and put all efforts into improving the user experience. And as a final result, give you the new UXPin 2.0 – fast and smooth this time. Sign up for updates if you’re curious about the specifics.

Becoming the design tool that cares about UX

UXPin has changed a lot. From a lo-fi mockup and wireframing tool to the all-in-one collaborative design tool. You can prototype the life-like interactive projects in our tool now. So what is our mission in the home stretch of the UXPin 2.0 project, is to fix all the niggly things to make your work more efficient. After all, you’re spending long hours creating absolutely astonishing things in the tool. We wouldn’t like to be a pain in the… erm… neck. The ambition is to let you create prototypes a thousand times faster. We’ve spotted a few usability improvements our devs are sooooo happy to add! Right now, as you’re reading this text, they are looking for more details to polish in UXPin.

Along with many feature additions and updates we’ve done so far, we’re introducing all the little changes that make a hell of a difference. In the next few weeks, we’re about to release the app performance and usability fixes like improvements to zoom, layers, quick tools, moving elements on the canvas, and so on. This will hopefully make your work easier. Some of the changes have already been seen and appreciated but there’s still a lot to come!

What UXPin 2.0 is made of

We’re going to update this article to let you know what exactly is changing because some of the improvements are not that visible right away. Take a look at UXpin 2.0 flag features and keep up to date with what we’re about to do as there are pure wonders to come, we promise!

Better Quick Tools

Among many other changes, we’ve done a lot of work to improve the left-hand toolbar, which we call Quick Tools, by rearranging elements and adding new ones to it. Learn more.

• New shapes and expandable menu,
• Box and rectangle changes,
• Easier access to elements.

The Strikingly Precise Zoom

Our zoom, which we’ve recently improved to be more precise, works in a lot more predictable way. Learn more.

• Zoom centers on cursor for striking precision,
• Zoom to element,
• Pixel Grid.

New Layers

One thing we decided to look through and improve is speed – and our New Layers exemplify this perfectly. Learn more.

• Faster drag and drop functionality,
• Better scrolling and management of layers,
• Faster app performance.

Conditional Interactions

Conditional interactions give your prototypes a layer of logic and a set of rules that make your everyday work easier. Learn more on docs.

• Collect data and pass it to the next page of your prototype,
• Store and re-use user entered data,
• Tailor your prototypes for user testing.

States

In UXPin each element can have several states with a different set of properties and interaction. Learn more on docs.

• Define an alternative set of properties for every state,
• Use states to create animated components,
• Easily track changes and vartiation between states.

Power Duplicate

Select an element on the canvas and drag to duplicate the selection. It works with elements filled with data. Learn more on docs.

• Duplicate based on adjustable grid,
• Fill elements with data automatically,
• Speed up prototyping by cutting down on repetitive work.

Be the first to know

As we’re adding the finishing touches to UXPin 2.0 we’re open to your feedback more than ever. Feel free to run tests, check the performance of our app and compare it soon. Feel free to let us know in comments if you see any possible improvements. But most of all, subscribe for updates!

The post Why UXPin 2.0 will be more than a collection of features appeared first on Studio by UXPin.