Simplify your life. Or at least your editor. We’ve recently made some changes and redesigned in-app experience to make it simpler, more intuitive and easier to use.
The editor is organized into four parts: the top bar, the canvas, and two sidebars with various menus. For those who have been using UXPin for a while, the most visible change will be the redesigned left sidebar which is now a quick add menu.
The top and bottom bars
In the top bar you’ll find the following options:
- Go back to your UXPin dashboard
- Pages – ability to go to other pages and create a new one (when sitemap in the left panel is closed)
- Undo/redo functionality
- Modes: Design, Documentation, Preview
- Zoom indicator
- Sharing & exporting options
- Auto save indicator
The modes allow you to break up the process into three parts and focus on what’s important at a given moment without getting sidetracked.
- The “Design” mode is where the magic happens. This is where you’ll create wireframes and add interactions. Here you have access to the vertical quick add menu on the left, the canvas itself, as well as your properties, interactions, and specification in the right panel.
- “Documentation” mode is where our Free Flow Documentation feature lives. It allows you to add annotations to elements and explain the intended behavior. If you’d like to learn more about Freel Flow documentation, please take a look at this article.
- The last option will take you to the “Preview” mode where you’ll be able to add and review comments, see the simulation of your prototype, review spec mode and documentation. Go ahead and share that preview link with other members of your team and external stakeholders as well.
At the very bottom of the UXPin Editor, there’s the bottom bar with the information about the number of days left until the end of your free trial. Then, there’s the auto save indicator. In the right corner, you have a question mark icon that gives you instant access to all the useful shortcuts in UXPin and our video tutorials which you can watch inside the Editor.
The heart of our of the editor is the canvas: where you actually build prototypes. Dragging elements from the left sidebar into this section will let you assemble designs, piece by piece. Move them around with a simple click and drag, or position them precisely. Selecting an item will bring up different controls in the right sidebar, depending on the element’s nature.
Quick add menu
The vertical bar on the left side of the editor is a “quick add menu”. Most options that used to be a part of another menu are right there – at your fingertips. Thanks to that you now have a more streamlined product, easier to use and a larger canvas area by default which makes it easier to work.
Let’s take a closer look at all the options.
The left panel can be expanded to give you a better view of some options. The available views are: Libraries + Images + Smart Elements or Sitemap + Layers. You can also display just the Sitemap which can be really useful for those with a complex sitemap structure.
The layers panel can be displayed on their own or detached as a floating panel if you prefer.
Clicking on “more settings…” will open up a modal with available view options. Those allow you to customize the look of your editor. You can choose between light and dark mode, set the canvas pattern to none, dotted or grid and choose the workbench color. You can also hide or show the properties panel or enable/disable smart guides and snapping.
Finally, if you click on “More actions” you’ll see some choices pertaining to account management like adding a user, integration settings and logging out as well as a link to iterations.
We hope you’ll love the new simplified editor as much as we do and find it easier and more intuitive to use. If you have any questions or feedback you can always reach us to email@example.com.