Hit your target and extend your game with new prototyping tools from Moqups

You’re in the zone.

Ideas are flowing and productivity’s peaking. All you want is to extend your game – to play a little longer in that rarified state.

The last thing you want is to break focus by switching apps, migrating files, or adjusting to a new interface.

That’s why our users have been urging us to extend the capabilities of Moqups.

They want to stay within the creative context of our platform, from the earliest stages of ideation, through to the final steps of prototyping and presentation.

Last year, to help make that workflow possible, we introduced Diagramming. We made it easier to capture concepts, structure ideas, and clarify communication throughout the entire design process.

Now, we are focused on expanding our prototyping capability. We’ve made it simpler and quicker to simulate user interactions – so that you can focus on productive work, not on time-consuming workarounds.

Interactions Panel

The first change you’ll notice is the new Interactions Panel. It consolidates Hotspots and Interactions and is the future home for all new prototyping functionality.

To open the Interactions Panel, click the Interactions Tab at the top of the right sidebar.

Moqups Interactions Panel

Workspace settings have also been unified under a single menu. Just click on the Workspace button, in the top toolbar, to toggle rulers, guides, and snapping –  and to configure page settings such as size and background color.

Object Interactions

The big news is that we’ve gone well beyond simple page interactions by adding a whole new suite of object interactions.

If you want to simulate user navigation, then Page interactions are the perfect tool. But if you need to prototype the behavior of specific UI elements – in response to various triggers – then page interactions are insufficient to the task.

Previously, you had to create an individual page for every single stage of the interaction’s state – and then use page interactions to link those multiple pages together.

Now, you can work on a single page, and add multiple interactions to a single object – or even groups of objects.

Because you no longer have to jump back and forth between pages, your workflow gets simpler and faster. And, without multiple pages for each interaction, your page tree becomes cleaner and easier to scan.

With these new capabilities, you can Show, Hide, Toggle Visibility, and Scroll to Objects in response to specific events: Click or Tap, Double-Click, Right-Click, Mouse Over and Mouse Out.

This makes it easy to simulate all kinds of interactions, including:

  • Drop down menus
  • Opening and closing a window or modal dialog in response to a button click
  • Showing a context menu on right click
  • Scrolling to a particular area, or element, on the click of a navigation link
  • A radio, checkbox or switch control that can be toggled

To add an object interaction:

  1. Click the Interactions Tab to open the panel
  2. Go to the Add Interaction section
  3. Select the object or group to which you want to add the interaction
  4. Choose a trigger from the ON drop-down
  5. In the DO drop-down, select an action from the Object Interactions list
  6. Click the Target button to turn on Target Selection Mode
  7. To select your target, click any object or group, either on the Page or in the Outline Panel
  8. Click Done to apply the interaction

Once you’ve applied an interaction, it shows in the Interactions list at the top of the panel. As you add additional interactions to the same object, you’ll see them listed there as well. You can easily edit or delete any interaction from the list – or duplicate it for quick reuse.

Note: You can toggle the visibility of your target on and off within the Outline Panel. This is useful if you want that target-object’s initial state to be invisible.

The addition of object interactions means that experienced users can prototype further and faster in Moqups. And those who are new to prototyping will discover a process that is both accessible and intuitive.

And we’re upping our own game too. Upcoming releases will focus on expanding our prototyping functionality, and improving the experience on mobile devices. That’s our next target!

Try Moqups now for free →

Introducing Powerful Page & Folder Management Tools

A place for everything and everything in its place

We know how quickly projects can expand in both scope and complexity, extending to hundreds – or even thousands – of pages. Even a one-page concept can result in dozens of iterations as collaborators provide their feedback and suggestions.

And it can be a challenge to keep track of that many pages, search through them quickly, edit them efficiently, and present them clearly to stakeholders.

Our goal is to help your team structure their projects effectively – and focus on the creative work, not the challenge of organization!

That’s why we’ve redesigned our Pages Panel to include organizational tools that are both powerful and intuitive :


With folder-based hierarchies, we’ve made it easy to keep your evolving projects organized. To create a new folder, just click on the Create a New Folder icon – and then drag it where you need it!


Multiple Page Selection

You can now perform bulk operations on multiple pages at once. Drag and drop to move, reorder, delete, export and more. You’re no longer limited to managing only one page at a time.

To select a sequential series of pages or folders, click the first item; then hold down Shift and click on the last item in the list. To select multiple pages or folders, hold down the Command/Ctrl key, and click on individual items to choose them.


New Folder With Selection

After selecting multiple pages, group them together within a new folder by simply right-clicking and choosing New Folder With Selection. We think you’ll like this elegant little time-saver!


Hide Work In Progress

Nesting pages and folders is a handy way of coping with multiple versions and iterations. However, when sharing and showcasing your work, you may have pages, or even whole folders, with material that’s not quite ready for prime-time. Or, you may want to eliminate visual distractions by presenting with a clean Pages sidebar. To hide pages or folders (as well as their their nested contents) just click on the Eye icon to the right of their name. This will also make them invisible in Preview mode, and in any export of the project.


Page Trash

Don’t panic. If you – or any of your collaborators – accidentally delete some important pages, they can easily be recovered from the Trash.


When you click on the More icon in the Pages toolbar, you’ll automatically see a counter of your trashed items – right beside View Trash. Selecting that option will open the Trash window. There, you can select the pages you want to rescue, and just hit Restore Pages.


Streamlined and Harmonized UI

We’ve streamlined the design of the Pages panel in order to accommodate all these new functionalities – and to make the UI both cleaner and more intuitive. In order to unify the designs of all our Panel interfaces, we’ll soon by applying the same look to the Outline, Templates, Images and Icons Panels.  So, stay tuned!

Try Moqups now for free →

Everything You Need To Know About Comments: A Video Tutorial

If you are a faithful reader of our blog, you’ll know that, since we introduced Comments with the release of Moqups 2, we’ve posted several times  about new upgrades to our discussion platform.

And because so many of you are using Comments for essential design conversations, we’ve been swamped by your insightful suggestions. This feedback has motivated us to keep tweaking its functionality – making the platform cleaner, quicker, and more intuitive.

These changes aren’t so big that we dare to call them ‘releases’ or even ‘upgrades.’ Instead, they’re the kind of improvements that you might not even notice:

  • Elegant animations when comments are added
  • Counters for unread comments for each page in the sidebar
  • Filter and show conversations by read, unread, and resolved
  • Handy mute-notification icons
  • And… other subtle updates

You’ll discover most of these changes quite naturally, as you navigate through your team’s many discussion threads. We hope that some will make you smile – and that all of them will speed your workflow, to make your team’s discussions both distraction and barrier-free.

We have a bunch of further refinements in the pipeline. However, since we’ve had lots of requests for a comprehensive summary, we’ve decided to release a new video – Everything You Need To Know About Comments – for both experts and newbies alike.

As the title suggests, the tutorial covers every aspect of the platform’s features and functionality. Not surprisingly, it is also our longest video so far. So, grab some popcorn, settle in, and please enjoy the show:

A Late Summer Harvest of New Features: Diagram Connector Labels, Background Color for Pages and a Full Screen Viewer

Check out our bountiful crop of sweet updates – and pick your own to try!

Connector Labels for Diagrams

Moqups diagram connector labels

Two months ago, in response to the overwhelming demand, we added professional-grade Diagramming functionality to Moqups. We wanted our users to be able to create, extend, and update diagrams at every stage of the design process — all from within the Moqups ecosystem.

At that time, we knew our Diagramming tool didn’t have all the features we wanted to include but, because so many people were itching to give it a try, we released it as soon as it was solid. Since then, though, we have continued to refine and develop its functionality, adding a number of enhanced features that will extend its usefulness — and make our users’ experience both quicker and simpler.

The first is the ability to add labels directly to connector lines themselves. This is an essential component for workflow diagrams, especially when you need to indicate Yes or No decisions. Labels are also useful for delineating connector lines in complex diagrams, making it easier to identify them — and to navigate.

To add one or more labels to any connector, simply double-click on the connector line. And, once you add a connector label, it will automatically remain attached to that line — and adjust intelligently as you modify and update your diagram.

And you can quickly reuse your labels by cloning them. Copy-and-paste, or just drag a label while holding down the Alt/Option key — just as you would do with any other Moqups objects.

We’ve also designed a terrific feature to speed your workflow — one that’s actually missing from many of the most dedicated diagramming solutions on the market: The ability to detach and reconnect labels. Just click and pull any label away from a line; the label will automatically detach and, as you drag it towards a different line, it will seamlessly and intelligently snap into place.

Take me to Moqups 2 →

Background Color for Pages

This has been one of our most requested additions. So… we are pleased to announce that you can finally add color to the background of a page! Click on the Workspace icon in the top-left corner of the toolbar to reveal the Background Color option. The color-picker will set the background color for the page that you’ve currently selected — and for all new pages that you create within that project. Just to the right of the color picker, you’ll find the Apply to all pages link; this allows you to retroactively apply that color to the background of any pre-existing pages — a quick way to update your project and keep things consistent.

Take me to Moqups 2 →

Full Screen Mode for Viewer

When you present your projects, you don’t want your audience distracted by the menus and toolbars in the Moqups interface. You just want them focused on your work! Our new Full Screen mode helps that happen by showcasing your designs clearly and cleanly.

Enter the Viewer — by clicking the Preview button — and you’ll see the Full Screen icon in the top right of the toolbar. Click the icon to hide the Moqups interface and enter Full Screen mode. If you want to go even further, and hide the entire browser window, just hold down the Alt key while clicking the Full Screen icon. This will allow your project to fill the entire screen during your presentation. Just hit the Esc key when you’re done to exit Full Screen mode.

Moqups full screen viewer

Take me to Moqups 2 →

Open Links in Full Screen & On a Specific Page

We’ve also added a couple of nifty options that should prove useful when sharing your work:

You can now create a link that opens directly on a specific page. Just navigate to that page and click on the Sharing icon in the top toolbar; in the pop-up, you’ll see the Start with the current page checkbox. If you select that option, the Project link will adapt immediately.

And, right below the Start with current page option, you’ll see that we’ve also made it possible for you to create links that open directly into Full Screen as well.

These two features should help streamline communication with both team members and collaborators — and keep everybody’s attention focused.

Moqups Project Links start at current page and fullscreen

Navigate Between Conversations With Arrow Keys

Now, you can quickly navigate between conversations using the left and right arrow keys — without even touching your mouse. Once you’ve opened a conversation, the right key will take you to the next conversation, and the left arrow to the previous one.

Fixes, Additions & Improvements

  • Fixed: Custom guides disappeared randomly when using an external monitor
  • Fixed: Snapping while holding the Shift key is less erratic
  • Added: Experimental option to change the default method of selecting objects – from selection by intersection to selection by enclosure. For now, you can find this option in the Under The Hood section in the Workspace sidebar.
  • Added: Updated the list of available fonts to include dozens of newly available Google Fonts
  • Improved: The expanded/collapsed state of page hierarchies is now maintained across log-in sessions. This is the first in a series of significant page management improvements that we’ll roll out with upcoming releases.
  • Improved: Hide selection handles while manipulating objects in the Style Inspector
  • Improved: Reduced nesting levels for many compound stencils, making them easier to access and customize

Take me to Moqups 2 →

Diagramming: Charting New Territory in Moqups 2

We’ve written a short illustrated fable on Medium, that explains how users drove the development of our new Diagramming tool. Check it out!

Diagramming was once a tool used primarily by System Architects and Business Analysts. But now, almost every kind of project begins with someone — or some team being tasked with creating diagrams.

At Moqups, we know that these diagrams can be as varied as the people who make them. They might be flowcharts, giving shape and clarity to the complex user-interactions and workflows within your software. Or sitemaps, offering bird’s-eye views of your website’s information architecture — before you move on to the graphic design phase. They can be use-case diagrams that help anticipate your clients’ needs. Or even something simpler — a decision tree to make  abstract choices concrete, or just a few lines and arrows to help your audience visualize the flow of your app.

But whatever their form, these diagrams are essential to a project’s success. They aren’t just part of the initial planning process. At every stage of development and implementation, teams rely on those diagrams and need them immediately at hand — for reference, guidance and documentation. And, as projects evolve, diagrams must as well. A good diagram can — and should — be a key part of any project’s rhythm and flow.

However, many users don’t need the full capabilities of a complicated  diagramming tool — or the distraction of complex UML — just to create a useful sitemap. They just need an elegant solution that fits comfortably into their existing workflow.

That’s why we’ve built a clean, intuitive Diagramming tool – with exactly the functionality you want – right into Moqups 2. Let’s take a look:

Creating diagrams in Moqups 2

To enter Diagramming mode, click the Diagram button in the top-toolbar (or press ‘D’). You’ll immediately see groups of pale blue dots (connecting points) appear around the edges of the objects on the page. 

To draw a line between any two objects, click on one of these dots, and drag the cursor towards the second object. As the line approaches a connecting point, it will snap and “stick” –  showing that it’s attached. And, it will remain connected, even as you move, resize or rotate objects!

We’ve crafted intelligent algorithms that help draw connectors around objects, so they won’t get tangled up. 

To exit Diagramming mode, just click anywhere on an empty surface on the page (or hit ‘D’ or Esc).

Depending on which connector style you choose, you’ll also be able to fine tune the shape of the connector lines by adjusting the vertical and horizontal offset-handles.

If you want to customize your connectors – by changing the line-style, or the start-and-end markers, just go to the Connector Style section of the Styles Panel (on the right sidebar). From there, you can pick alternative line-styles: orthogonal, orthogonal rounded, curved or straight. You can also choose from a variety of start-and-end markers.

Customizing the diagram connector styles in Moqups 2

Last but not least, we’ve added new flowchart stencils – under the “Flowchart Diagrams” category – in the Stencils Panel (on the left sidebar). These dedicated stencils should be enough to get you started but, of course, you can connect any Moqups object, stencil or image –  even one of your own templates!


Now, you can easily create – and improvise – any kind of diagram you need.
We really hope you’ll love this new feature in Moqups… because we believe that diagramming is for everyone.

Take me to Moqups 2 →

P.S. If you happen to be GIF-phobic (or is it pronounced ‘gifobic’?) – check out our video:

Communicate Clearly Without Clutter: Manage feedback by resolving comments

The Gist

Moqups was designed with collaboration in mind because we figured that your team is probably a lot like ours: a group of creative professionals using comment threads to share feedback — both synchronous and asynchronous. That’s why we’re gratified that so many of you are using the Comment feature — and why we’re excited to see a huge spike in conversations within Moqups 2. We’re sure that you’ll love it…

We understand that as teams get larger, and projects more complex, real-time feedback becomes increasingly essential to the design workflow. But, as more collaborators join the conversation, the speed and volume of comments also accelerates. The result can be a swarm of information where it’s tough to distinguish between obsolete threads and current — sometimes urgent — messages.

If that’s your challenge, fear not! We’ve come to your rescue with new functionality that helps you clear away the clutter, and makes conversations cleaner and easier for your team.

Now, you can Resolve, or Resolve & Reply to comments, notify your team about those changes, Reopen resolved threads and, finally, clean up your page by hiding the resolved threads.

Let’s take a look at these features in action:

Mark Comments as Resolved

Once an existing comment has been read — and appropriate action taken — you can resolve the comment thread by clicking the Resolve button. The blue, numbered comment icon will be marked with a √ . We’ve even added a little animation to reflect the satisfaction of crossing another task off your list!


Take me to Moqups 2 →

Reply To And Resolve Comments At The Same Time

When you type into the comment field, the button automatically changes from Resolve to Resolve & Reply. This way, you can send a note to your colleagues to explain your action.


Take me to Moqups 2 →

Reopen Resolved Comments (and Reply)

But if you need to reanimate a previously discussion? No problem! Just click on the Reopen button to make that thread active again — and type in the comment field to Reopen & Reply.

Take me to Moqups 2 →

Filter To Show Unresolved, Resolved or All Comments

By default, you will now see only comments and threads that are Unresolved (i.e. active). But, just click on the Show drop-down menu and you can also choose to see All, or just Resolved comments. This will help you see the big picture: not only what’s unresolved, but what your team has accomplished — and the progress they’ve made!


Take me to Moqups 2 →

Notify Collaborators using Moqups, Email or Slack

As you’d expect, whenever you Resolve or Reopen a thread, your team members and collaborators will automatically get notified by email — and in the popular Slack team messaging app. If you haven’t already enabled Slack integration within Moqups 2, just go to Account SettingsNotifications → and then follow the instructions from there.

Slack notifications

Take me to Moqups 2 →

Outline panel, @username mentions in comments and more

Outline panel

We’ve made it much easier to navigate through the structure of complex projects. This is particularly useful if you have many elements on your pages.  Also, it should make it much easier to work with those compound stencils from the Material Design, Bootstrap or iOS kits.

But there’s more to it! You can now assign meaningful names to the items on your page. Doing this helps you easily find them later on and stay organized as the complexity of your pages will grow. Your colleagues will also appreciate it.

Do you have work in progress that you need to hide because you’re not ready to show it yet? You can hide it by toggling the visibility of your stencils. It even works for groups!

Here’s the summary of this new feature:

  • Click the Outline icon on the left sidebar to open the new panel (or press ALT+3)
  • To select objects, click the items in the outline tree. If the selection is a group, you can expand it by clicking the left arrow icon and access its inner structure
  • Hovering the items in the outline tree will highlight the corresponding objects on the page with a blue border
  • Double click the items in the outline to rename them
  • To toggle the visibility of your items, hover them in the outline panel and then click the small eye icon
  • Search for specific objects from the top search input


Take me to Moqups 2 →

@mentions in comments

Do you need to draw the attention of your collaborators or team members on a specific comment thread? Do this by mentioning them in a comment. You’ve already used this functionality on those time wasting social networks. To mention someone, type the @ character, followed by the first letter of their name, username or email. An autocompletion popup with suggestions should show up once a match is found. You can also trigger it by clicking the small “@” button on the bottom right of the comment popup. Once you send the comment with @username mentions, those users will get an email notification.


Select text in view mode

Selecting text in the viewer was not possible until now. This made it hard to share copywriting content with your peers. This functionality was conflicting with the interactivity features (e.g. hotspots), so we had to disable it. To fix this issue, we’ve added a Select text mode in the viewer. Click the button with the cursor icon on the top toolbar of the viewer to enable this mode. Once toggled, all the texts on the project will be selectable so you can copy them to the clipboard.


Inspector align toolbar

We’ve added a toolbar for getting a speed boost when aligning your objects. No more extra clicks. We made sure it stays sticky if the inspector needs scrolling, so you’ll always have it handy when you need it. One of our customers was persuasive enough to make us start a hackathon and deliver this within a day. Thank you!


Hide contents outside page

It’s now possible to clip the content that’s sitting outside the page bounds. We’ve noticed that some users find it useful to have objects sitting outside the page for easy reusing, while others like the app to automatically hide the excess content. What to do, what to do? This is now an option in the workspace settings, below the page size inputs. Yet another heavily requested feature that we implemented during a productive coding spree.


Take me to Moqups 2 →