Our New Google Chrome Extension

Enable Color Eyedropper, Take Full-Page Screenshots, and More

Updated: We’ve released this extension for Firefox as well. You can add it to Firefox here.

We’re proud to introduce our Chrome Extension. It bundles together a bunch of oft-requested features that should make your workflow a little smoother and faster:

  • Enable the Color Eyedropper to sample and match colors
  • Capture page screenshots directly to your Moqups library
  • Jump to your Dashboard and create projects with one click


Read on to see what you can do with our new extension, take a peek behind the scenes at our development process, and find out why these features are only available on the Chrome browser… for now!

Want to install the extension?

  1. Visit the Chrome Web Store or, from within the Moqups app, just click on the eyedropper in the color-picker and follow the link.
  2. After installing the extension, the blue Moqups button will appear to the right of the browser’s address bar.
  3. To enable the eyedropper, you’ll need to refresh any tabs that have the Moqups app currently open.

Page_30 (1)

Install Our Chrome Extension

The technical adventure behind our color-eyedropper

Color eyedroppers are everywhere. After all, most graphic-design apps include the ability to sample and apply colors. They’re essential for matching colors, especially when you are bringing in outside assets in the form of graphics, images, illustrations, or screenshots.

So, why didn’t we deliver this basic functionality sooner – and why are we relying on a Chrome extension to provide it now? Two words: security and technology.

3. Color Eyedropper

Most software designed to render complex 2D graphics in the browser relies on either SVG/HTML or Canvas to display those graphics. But, both SVG/HTML and Canvas have their specific limitations. 

Like Google Slides and the web-version of Apple’s Keynote, Moqups chose SVG/HTML to display our projects. This has enabled us to support rich-text content, provide great out-of-the-box typography (especially for non-latin characters), and offer a more realistic preview experience. 

However, one of the disadvantages of SVG/HTML is that the pixel-level access required to sample colors is either blocked, or heavily restricted, by browser makers. This is because of security issues. Without these restrictions, malicious third party scripts, embedded within pages, could gain unauthorized access to your sensitive information. 

So, we had to find a different approach.

Creating a Chrome Extension offered us a secure and practical solution – enabling us to capture images of any website, and providing the pixel level access we dearly needed to sample colors.

Using our new eyedropper

The eyedropper lets you target any color on the page and apply it instantly to your design elements. Once you’ve installed the Moqups extension – and refreshed your Moqups tabs – the eyedropper will be automatically enabled. You’ll find it in the lower-right corner of the Format Panel’s color picker.

4. Eyedropper

Using the eyedropper is simple:

  1. Click the eyedropper icon to open an inspector window in the upper-right corner of the screen.
  2. As you move the crosshair-cursor around the page, the window will display a close up view of the pixels beneath, as well as both their RGB and Hex values.
  3. Click to select the color beneath the cursor.

How the eyedropper makes screenshots possible

The eyedropper works by taking temporary screenshots of the page in order to extract the color-values under the mouse cursor. Although these screenshots are just an intermediary step in the color-selection process, we quickly realized they also had a value of their own.

By repurposing them creatively, we could make it possible for you to take website screenshots – and upload them directly to your Moqups image library. Even better, we could provide you with the ability to take full-page screenshots by having the extension stitch together a bunch of smaller shots to create one giant image.

Screenshots are a central part of almost everyone’s workflow – whether you are doing competitive research, creating mood boards, looking for inspiration, or giving feedback to your team. 

With our new extension you no longer have to go through the tedious process of taking screenshots, hunting for them in your Downloads folder, renaming them, and then manually uploading them to Moqups. Now, you can quickly grab a visible area, a selection, or the entire web page, and instantly add it to your Team Images library.  

5. Take full-page screenshots

Taking screenshots is quick and easy:

  1. Click the Moqups extension icon to the right of the browser’s address bar
  2. Select one of the Capture Page Screenshot options
      • Visible Area will capture only what’s currently visible in your browser window
      • Selected Area will let you click and drag to choose a specific part of the window
      • Entire Page will grab the entire webpage
  3. Your screenshot will open in a new browser tab; here, you can name it, save it directly to your Team Images library in Moqups – or cancel if you want to try again!
  4. Once you’ve clicked the ‘Save to Moqups’ button, and the image has been uploaded, just click the ‘Done! Go to Moqups’ button to jump right to your project.

Create new projects, and jump directly to the Dashboard

To help make your workflow even smoother, we added one more feature to the extension:

You can now create a new project, or open one from your Dashboard, just by clicking the Moqups button. This comes in handy when you’re jumping between browser tabs, or grabbing screenshots to build your mood boards, mockups, or storyboards.

6. Extension Project

What’s next?

We’re definitely not stopping with just Chrome and Firefox. We’re also looking at supporting Safari – although that may be a tougher nut to crack since it offers only a limited set of extension-API capabilities.
But, in the meantime, please help us make our Chrome and Firefox extensions even better by sending any feedback or bug reports to support@moqups.com.

Create a free account →

Introducing Our New Visual & Customizable Table Stencil

Mock up data grids intuitively and visually – and leave the quirky syntax behind!

Data is the raw material of the global economy – guiding the reinvention of established companies, and driving the strategy of new ones. And that information’s power is compounded when it is easily shared, analyzed, visualized, understood and acted upon.

One of our highest priorities is data visualization and representation in all its forms, and last month, we introduced new chart and graph features and templates. Now it’s Tables’ turn.

1. Hero Image

Although grids and tables aren’t technically data visualizations, they’re often combined with charts and graphs – and often created by the same teams. Whereas charts tend to show the overview, shape, and summary of data, tables present detailed information in as close to its raw form as possible

Great tables have several advantages. They can provide access to precise numbers and specific information in large, dense data sets. And, they allow users to scan, compare, and analyze data in multiple directions – in the order of their choice – and take action based on those insights.

The Rationale Behind Our New Table

Grid and tables are an essential part of our users’ workflow, especially if their focus is on enterprise products. In complex apps for logistics, project management, sales, customer relations, or human resources, the majority of screens may contain – or simply be – a grid or table.

The problem was, our old Grid stencil worked fine for small tables with only three or four rows and columns. But, if you wanted to mock up complex data grids, a syntax-based stencil just wasn’t up to the task.

Improving the Grid has consistently been one of the most frequently recurring topics on our support channels – and your message was clear: We needed a better grid solution. So, our rationale for creating a new Table stencil was, quite simply, our users’ voice. The only question was how to solve the problem.

The Grid’s syntax based approach wasn’t easily scalable – we would have had to invent new syntax for every new formatting option. But that would only complicate your workflow, and be the very antithesis of our mission: Moqups should offer the most productive ways to visualize ideas of any kind – and visualize at the speed of thought! Visual-ize. 

The answer was clear. We had to go visual.

2. Table Overview

Our first approach was to try using open-source libraries in order to save a few dev cycles and release this to you sooner. But, once we evaluated those options, we realized that we had a Goldilocks problem – they were either too specialized or too generic for our needs. So we would have to handcraft a solution. It took us a few sprints – but it’s finally here.

It was a fun, but intensive exercise. Although we often felt as though we were reinventing Excel, the process allowed us to prepare the underlying architecture for rapid iteration and the expansion of features. 

And, since this new stencil is a central piece of our future development, it’s been built with all kinds of future interoperability in mind – like the ability to share data to other stencils such as charts, import data dynamically from external sources, and much more. But, right now, it’s all about simplifying your workflow and making you more productive. 

The new Table stencil offers a completely visual editing experience and provides a new set of features that allow you to customize pretty much every aspect of a single or multiple table cells. And, it tries to mimic the functionality of popular spreadsheet editors so your muscle memory should feel at home in the new environment!

So, let’s take it for a test drive and see what you can do.

Learn more about Moqups →

Adding, Resizing, and Customizing Borders

You’ll find the new Table in the Stencils Panel. Add it to the page by dragging and dropping and, as you resize and rescale, hold down Shift if you want to maintain its aspect ratio.

3. Add and resize table

Before diving into detailed editing, you might want to use the dedicated section in the Format Panel to make some initial styling decisions about the table as a whole. Here you can choose to show or hide borders, adjust cell padding, select font family and size, set border attributes, or add a drop shadow:

4. Table - Format Panel

If you want to get rid of our placeholder text – and begin with a tabula rasa – before adding your own data, just click the Edit Data button (or double-click on the table) to reveal the Table headers and toolbar. Then use ‘Select all’ button in the upper-left corner (or Cmd+A) and hit delete on your keyboard.

5. Select All button

Insert, resize, and customize columns, rows, and cells

Once you’re in edit mode, the dots along the headers let you insert rows and columns in that particular position. To delete a row or column, select the appropriate header, and click the trash bin in the table’s toolbar.

6. Insert_delete column_row

To resize rows and columns, use the lines between their headers. If you want to set the rows and columns to equal sizes, just click the ‘Distribute Cell Sizes’ button.

7. Resize and distribute cells

Once you have selected a row or column’s header, you can use the toolbar to adjust the text’s horizontal and vertical alignment:

8. Text alignment

The toolbar also lets you select the font color and background color for individual and groups of cells. Color can help guide the reader’s eye to interesting information, and make it easier for them to navigate your data. This also comes in handy if you want to create in-table heatmaps – where higher numbers correspond to darker or more saturated cell backgrounds.

9. Text_cell colour

The bottom toolbar is also where you can merge and split cells:

10. Merge Cells

Use the rich-text editor to format text and add links

With a cell selected, press Enter/Return or double-click to edit the text. If you simply want to replace the text, then just start typing!

While you’re in edit mode, you can use the Quick Format toolbar to format, color or highlight selected text, or to add links.

11. Rich Text Edit

Lighting-fast keyboard shortcuts

Finally, a couple of tips for you power-users! While in edit mode, hit the Tab key to quickly navigate between table cells. Press Shift+Tab to go back to the previous cell. Or, continue pressing Tab on the last row to add new rows to your table.

12. Table tip

Moving forward with Tables

We know that there’s still some missing pieces to the puzzle – functionality that you need, and would make your work easier. We’re working on putting those pieces in place, but we would love to hear from you – about your priorities and use cases. So, please send us your wishlist at support@moqups.com. After all, Santa’s coming pretty soon!

Create a free account →

What’s New: October 2, 2019

New Features:

  • Our new Table offers a fully-visual editing experience, and replaces the old, syntax-based Grid stencil. Now, you can:
    • Quickly select, resize, and reformat rows and columns
    • Apply background color to rows, columns, and cells
    • Use rich text editing, and add links and highlights
    • Justify and align cell content, and apply both vertical and horizontal padding
    • Adjust cell-border width, format and color 
    • Merge, split, and distribute cells
  • The Sticky Note stencil is the latest addition to our ‘Callouts & Annotations’ category. Like the Callout, Bracket, Speech Bubble, and Thought Bubble, the Sticky Note has both Normal and Sticky modes – allowing it to either be attached to an object, or float freely. And, its ear can quickly be resized with the custom handle.
  • We’ve added an iPhone X stencil to the Stencil Library.


  • Components:
    • When you apply the ‘Detach Component’ option to a nested component, only the top-level component is detached; the nested sub-components are unaffected, and retain their component status.
    • Top-level components can now be locked.
  • View and Preview modes no longer include sidebars. Instead, the Page Tree and the Comment list can be opened by using buttons along the top toolbar.
  • Diagram extenders now connect to an adjacent object only if that object is another unlocked diagramming stencil. Otherwise, the extender creates a new diagramming object.
  • We’ve improved the Welcome Screen to include a Recent Projects sidebar, and a ‘Browse all projects’ link to the Dashboard. 
  • The Image Placeholder stencil now has a Rounded Corners control.
  • When an unsaved project is saved – either by autosave or by command – the user is now prompted to enter a project name, and to select a project owner.
  • Google Fonts have been updated to include new typefaces:
    • Bahianita, Barriecito, Beth Ellen, Be Vietnam, Big Shoulders Display, Big Shoulders Text, Blinker, Chilanka, Crimson Pro, Darker Grotesque, DM Sans, DM Serif Display, DM Serif Text, Farro, Fira Code, Gayathri, Grenze, Hepta Slab, Lacquer, Lexend Deca, Lexend Exa, Lexend Giga, Lexend Mega, Lexend Peta, Lexend Tera, Lexend Zetta, Libre Caslon Display, Libre Caslon Text, Literata, Liu Jian Mao Cao, Livvic, Long Cang, Manjari, Mansalva, Ma Shan Zheng, Noto Sans HK, Red Hat Display, Red Hat Text, Saira Stencil One, Turret Road, Vibes, Zhi Mang Xing

Bug Fixes:

  • The Radial Gradient – with Stretch mode enabled – now centers properly in the Wedge shape.
  • In Default Styles mode, the color picker for ‘Fills & Strokes’ now responds properly.
  • Fixed an issue that affected visibility actions in the HTML export.
  • Objects that have their aspect ratio locked, and have also been rotated, now resize properly.


Tidying Up with Moqups: 6 Tips to Declutter Your Projects

Make shared projects collaborator-friendly by channeling your inner Marie Kondo!

No matter where you live on the planet, it’s pretty much impossible to escape Marie Kondo, the queen of decluttering. Her three books, including the breakthrough, The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing have sold over 11 million copies in 42 countries. In January, she launched a Netflix series, and in 2020, she’ll turn her attention to both career and the workplace with a third book: Joy at Work.

What has made Kondo such a global phenomenon, beyond the effectiveness of the KonMari method, is her philosophical elevation of ‘tidying up’ – from dreaded chore to spiritual exercise.

For Kondo, decluttering is an act of empathy – for both the things and the people that surround us. She encourages us to envision the flow of an ideal day – and then arrange the elements of our home to best realize that experience.

1. Hero Image

Anybody working in the world of UX will recognize this approach. It’s what we do every day, with every page, modal, menu, and interaction. Declutter, simplify, clarify, speed up flow, reduce friction – and yes – spark joy!

And, when we get it right, users feel a magical combination of safety, familiarity, reassurance and delight as they pursue new paths, chase new ideas, or just fulfill basic tasks.

Tidying orders and relaxes the mind. – Marie Kondo

But as we focus on this experience for our users, it’s easy to overlook its importance for our colleagues. A clean, clear, relaxing and comfortable flow should be as much a part of our shared, internal projects as it is for our public-facing UI.

Organizations rely increasingly on distributed teams – and asynchronous collaboration is key to that kind of workforce and workflow. With so many team members and independent contractors sharing projects, tidying up helps eliminate confusion, reduce stress, and maintain both momentum and morale.

And it is not a stretch to say that this experience should be something joyous. We all know how dispiriting it is to be invited into a project, only to be overwhelmed by a sense of clutter, confusion and disorientation. But, how calming and relieving it is to open a shared document and immediately have an intuitive sense of that project’s purpose, hierarchy, and focus.

So, in the KonMari spirit, here are some tips to help your team keep projects tidy, accessible, and collaborator-friendly!

Learn more about Moqups →

Organize Pages in Folders to Create Clear Hierarchies

Sometimes, teams collaborate on projects asynchronously. Other times, an entire team – in the office and remote – will share a screen and create together in real time. In both cases, a clear hierarchy of well-named pages and folders can make that work clearer, faster, and more enjoyable.

As your project expands, find your inner Kondo, and start tidying by category! Take the inevitable mix of brainstorming pages, user flows, stakeholder feedback, experiments, and iterations, and group them into easily identifiable and accessible folders – making sure that both folders and pages are clearly named.

2. Organize Pages in Folders

To create a new folder, just click on the Create a New Folder icon – and then drag it where you need it. And to save time, try creating a folder directly from a selection of pages by right clicking and choosing ‘New Folder With Selection’.

3. New Folder With Selection

Check out our previous blog post for more about page and folder management, including nesting and hiding pages and folders.

Fit Page to Content to Keep Things Clean

During the initial creative process, it’s helpful to work on a page big enough to accommodate all your iterations and experiments. But that can result in all kinds of flotsam and jetsam littering the margins.

So, before inviting collaborators to share your work, take a moment to remove those vestigial distractions. Then, resize the page instantly by right-clicking and selecting ‘Fit page to content’.

4. Fit Page to Content

Resolve Comments to Reduce Clutter

When cross-functional teams collaborate – suggesting new ideas, clarifying requirements, and building consensus – project pages can become peppered with comments. When deadlines approach, and even more people join the conversation, it’s important to remove distractions and distinguish between current and obsolete conversations. 

To keep everybody’s eye on what matters, you can quickly declutter by resolving comments. Team members can then filter comments to show Unresolved, Resolved, or Unread conversations.

Just open the comment and hit the ‘Resolve’ button or, if you wish, leave a closing message to explain your action and click ‘Resolve & Reply’.

Resolve Comments

Resolving has advantages over deleting the thread because any member of the team can always restore the conversation when and if the topic needs further discussion.

Copy Pages to Combine & Consolidate Projects

Sometimes, initially distinct initiatives can begin to overlap, and teams just end up jumping back and forth between two related projects.

For example, you may have a design and marketing team working on the same initiative, but in two different Moqups projects. Or you might be developing two different features that end up having mutual dependencies. In cases like these, the best way to keep things tidy is to combine all or parts of those discrete projects.

Just right-click on any selection of pages and select ‘Copy Pages’ from the dropdown. Now, you can paste those pages into the Pages Panel of any other project.

6. Copy_Paste Pages

You can also use the same process to break overstuffed and unwieldy projects into smaller, more focused initiatives!

Team vs Project Libraries in Images and Templates

Both the Images and Templates libraries are subdivided into Team and Project templates. Taking advantage of these options makes it easier for your team to quickly find relevant assets – either by search or by scrolling.

Keep project-specific assets in the ‘Project’ library, and use the ‘Team’ repository for company-wide, reusable assets like branding elements and logos. Read more in the Images section of our Help Center.

7. Team vs Project Libraries

Archive Projects to Keep Your Dashboard Clean

Finally, don’t forget that you can always declutter the Projects window of your Dashboard by archiving inactive projects. This quick tip will help eliminate confusion and save your team time when they search for projects!

8. Archive Projects

And, if you ever need to re-examine an archived project, you can always restore it. Learn more about how to archive, restore, delete and recover projects in our Help Center.

Tidying up and decluttering helps streamline your colleagues’ workflow, and eliminate the wasted time that’s part of a confusing collaborative experience. You’ll know that you’ve got it right when team conversations focus on the choices and decisions to be made, not on where to find things!

Create a free account →

New Chart Templates & Features Make Data Visualization a Breeze

It’s now easier to start, experiment, and customize your charts and graphs.

Data visualization used to be the province of financial analysts, sales teams, and graphic designers, but it is now ubiquitous throughout competitive organizations. Departments at all levels are being asked to set their own goals, establish KPIs, track progress, and evaluate outcomes.


In a data-driven world, all kinds of teams need to create charts and graphs for their dashboards, presentations, and reports. And to turn data into compelling stories, they want to be able to experiment with different forms of representation – and customize the results to suit both their business and their audience.

Last year, we introduced Charts so that teams could create quick charts and graphs – right where they work – without switching apps or creative context. Since then, we’ve worked hard to improve every aspect of that experience, making it faster and easier for your team to start, experiment, customize and communicate their data in visual form.

New chart & graph templates to jump-start your work

You can always start your chart from scratch. But it is often helpful – and quicker – to browse a collection of pre-made templates. Relevant examples can provide inspiration, and suggest all sorts of ideas for customization. 

But more importantly, they can help your team understand the types of charts well suited to specific categories of data – and the best-practices for each of those graphs.

To help your team get going, we’ve added 46 charts and graphs to our template pages.  

Browse by chart type and use case, and then simply click ‘Edit this chart’ to open your template in Moqups and start customizing it to fit your requirements.

2) New Templates

Try our free templates →

Switch between chart types to find one that best suits your data

Chart stencils now have a popover toolbar that lets you experiment with a variety of chart types – to find the one that works best for your data, context and audience.

3) Change Chart Type

As well as the Chart Type buttons, we’ve also added a handy Edit button. This makes it easy to cut and paste data from CSV files, customize colors, and label your values and categories.

Visualize and analyze any kind of process with our new funnel chart 

Funnel charts are used to represent and analyze the progressive stages of any process or procedure. 

They can help identify bottlenecks and problems, and are great for visualizing website conversions, sales pipelines, purchasing funnels, customer retention, order fulfillment, employee and volunteer recruitment, and PPC promotional campaigns.

You’ll find our new Funnel Chart stencil in the Charts section of the Stencils library. 

4) Funnel Chart Tour

If you want to learn more about common use cases – or start with a ready-made example – check out our Funnel Chart template page.

Show value labels right on the chart itself

Sometimes the chart speaks for itself, and values along the axis are sufficient. Other times, you may want your audience to focus on the specific values themselves. That’s why we’ve added the option to show values right on the chart – either as count or percentage values.

To show or hide value labels:

  1. Click on any chart on the page 
  2. Navigate to the Chart Style section of the Format Panel
  3. Enable Show values 

5) Show Chart Values

Render chart values as percentages

You now have the option to render chart values as percentages. This is useful for any chart that shows the relationship of parts to a whole, especially Pie and Donut charts, Grouped Bar and Column charts, and Stacked Column, Bar and Area charts. You’ll find this option in the Chart Style section of the Format Panel, right next to Show Values.

For Pie and Donut charts, rendering values as percentages simply shows, for each slice, that section’s percentage of the whole:

6. Render as Percentage

For Grouped Bar or Column charts, this option displays the percentage for each subcategory that makes up the larger, grouped category:

6.1) Render as Percentage

For Stacked charts – whether Bar, Column, or Area – render as percentage has a much more dramatic effect, changing the visual representation of the chart to a ‘100% Stacked Chart’:

6.2) Render as Percentage

We’ve made all our charts easier to read

Finally, a couple of smaller notes! We’ve improved the presentation of all our charts, making them easier on your audience’s eye!

We added digit-group separators to large value numbers making it possible for actual humans to read! Instead of 10000, you’ll now see 10,000. And, we also improved the representation of negative values in our Stacked Bar and Stacked Column charts, making them simpler to parse at a glance.

7) Negative Values

We hope these new features and templates make it easy for your team to build BI dashboards, prepare reports, and create presentations. 

What’s next for Charts? Well, that’s partially in your hands. We need your feedback and suggestions to make charting and graphing even better in Moqups. So, please send us your thoughts at support@moqups.com.

On our side, we’re already at work improving our color themes, and creating additional templates – like SWOT, 5 Whys, Business Model Canvas, Empathy Maps, etc. – as part of a new ‘Strategy & Analysis’ section. So stay tuned!

Try our free templates →

How Online Collaboration Tools Boost Team Performance

According to Gartner, 30% of companies say that by 2020 their greatest competitive advantage will be the ability to exploit digital technologies. As organizations navigate this digital transformation – and adopt agile processes – they need software that helps their teams create and collaborate seamlessly.

Last year saw a flood of new online collaboration tools, but their focus on specificity and specialization has created as much chaos as they promised to eliminate.

That’s where Moqups’ all-in-one approach has an advantage. By bringing whiteboard, diagram, and design features together within a single, online app, Moqups puts your company’s teams together on the same page – literally.

Using an all-in-one visual collaboration platform like Moqups can transform your team’s workflow, boost organizational efficiency, and help your company thrive in a fully digital – and visual – world. Here are three research-backed reasons why.

1. Bridging Information Silos With Online Team Collaboration

Despite the proliferation of new online collaboration software, businesses are still incredibly siloed. Worldwide, 39% of employees say their coworkers don’t collaborate enough. 

This kind of isolation can have a devastating effect on organizations. When departments or divisions work in silos, they develop tunnel vision – and lose sight of the larger corporate strategy and priorities. The end result is wasted time, duplicated work, and costly mistakes. Frustrations mount, collegiality breaks down, and momentum is lost.

That’s why 75% of employers rate teamwork and collaboration as “very important”. They understand that collaboration increases transparency and morale. And that, in turn, fuels more engagement, consensus, and productivity. Companies that promote collaboration are 5x more likely to be characterized as high performing. 

But teams are much more likely to remain in their silos when they work with disparate tools – and communicate with different professional idioms. Moqups solves that problem by giving teams a shared visual space to think, plan, and collaborate together. This way, all voices get heard, and all stakeholders – not just designers – can shape and share ideas.

Business analysts, product managers, and IT consultants can make visual risk and SWOT analyses, use case diagrams, and business model canvases. Executives can build organizational charts and product planning roadmaps. Project managers and UX designers can create flowchart diagrams, wireframes, mockups, and prototypes.

Moqups’ all-in-one solution lets team members visualize requirements, clarify specifications, and produce a wide variety of foundational artifacts and documentation for any kind of project. 

Learn more about Moqups →

2. Reducing Information Search Costs Within Organizations

Employees waste an inordinate amount of time chasing data and documentation through an elaborate labyrinth of repositories: Email, Slack, Google Drive, Github, Trello, and any number of whiteboarding, design, and prototyping apps. The majority (61%) of employees regularly access four or more systems and nearly one-sixth of them regularly access 11 or more. 

On average, it takes workers eight searches to locate the right document, and 44% of the time, they can’t even find the information they were looking for! As a result, workers spend 36% of their day just trying to track down and consolidate information. 

And it’s no wonder why. Visual documentation is often spread across a multitude of highly specialized apps – each targeted at a specific niche or use case. But these kinds of specialized tools – which lack interoperability – increase the information search costs for organizations. And their complexity and steep learning curve limit stakeholder participation and discourage collaboration.

Moqups, on the other hand, offers a unified team collaboration tool that bundles together the best of these features within one app – and provides teams with a clear source of truth. Wireframes, prototypes, flowcharts, mind maps, and moodboards can all live together in a single repository, drastically reducing information search time and cost. 

Adhering to the 80/20 rule, Moqups provides all the features you need, and none that you don’t. And its UI is both lightweight and accessible – so your entire team can skip the learning curve, find the documents they need, and get right to work.

3. Giving Due Recognition for Online Team Collaboration

Feeling recognized and appreciated are fundamental human needs. Yet an astounding 82% of US workers don’t feel that their supervisors give them sufficient credit for their contributions. As a result, employee engagement and motivation dissipate.

But when teams create on a myriad of platforms, it becomes difficult for their work to gain visibility. It can be challenging for senior-level managers to track down and access projects – especially if they’re not involved in production. As a result, too much work happens behind the scenes, without an opportunity to assess individual contribution, and reward achievement.

Moqups enables managers to pull back the curtain and gain insights into how team members have contributed at every stage of development. With Moqups, employee work is online, centralized within a single online collaboration tool, and easy to access through a clear and simple interface. That means that managers can easily monitor the entire lifecycle of a project, from concept to creation, and discover the hidden work – and heroes – that deserve recognition.

A Call for an All-In-One Visual Collaboration Platform 

Online collaboration tools have traditionally been the exclusive domain of designers, due in large part to their complexity, and the steep learning curve involved. Moqups offers the first-of-its-kind platform that empowers all members of an organization to leverage the power of visual content. In doing so, it helps to solve the most crippling problems confronting today’s organizations – information silos, steep information search costs, and inadequate recognition. The result is a fully engaged and empowered workforce that is primed to thrive.

Create a free account →


To Wireframes and Beyond!

Helping teams create mockups is at the core of our mission. After all, it’s where we started – and how we got our name! But since we launched in 2012, Moqups has evolved to become much more than a wireframing tool.

We’ve added diagramming, prototyping, whiteboarding, charting, annotation, and commenting because we understand – and our users have shown us – that wireframing doesn’t happen in a silo.

For teams to wireframe effectively, they first need to research, strategize, and map out user flows. And once the wireframes are done, they still require high fidelity mockups and interactive prototypes for both pitching and testing.


All of this, before the designers and developers take over, is what we like to call ‘foundational’ work. It isn’t always pretty – and it can often be bafflingly complicated – but good thinking and planning results in a smoother, less expensive process – and a better final product.

And during this foundational stage, visual communication and collaboration is vital. Good, fast, sustainable decisions come from hearing all voices, checking requirements at the right time, and building genuine consensus before moving forward.

And that means having a single, accessible platform where every member of the team can contribute, suggest, revise and verify. An app that works with your team, not against them.

Last week, we passed our 1,500,000 user mark, and Moqups is now the first stop for product managers, business analysts, UX professionals, executives, and all kinds of cross-functional teams working on complex projects.

But if you are a UX designer, don’t fear! We’re not about to leave wireframing behind. We just want our users to be able to use Moqups in their larger research, planning, design and development process.

For instance, although we’re listed as one of the ‘Leaders’ on G2’s Grid® for Wireframing, our reviewers talk about the benefits of a platform that lets them go beyond just wireframing:

One of the most important things while in the early stage is the flow chart. With Moqups, I can do flowcharts and wireframes and sitemaps all in one project, which is awesome for managing.  

Celeste T.

This kind of feedback is great encouragement for us as we build up Moqups’ functionality. We know that there are lots of ways into a project – through competitor research, moodboards, sitemaps, user flows – and, yes, through wireframes! With Moqups, you really can begin anywhere.

Still, nothing quite beats wireframing for getting an idea out of your head and onto the page!

And, if you are new to wireframing itself, and want a clear, concise primer to get you going, check out Bridget Poetker’s article at G2, What Is a Wireframe? (+How to Create One in 5 Simple Steps). It’s a terrific starting point!

Create a free account →


What’s New: June 10, 2019

New Features:

  • You can now both color and highlight any selection of text – individual characters, words, or whole paragraphs – directly from the Quick-Format Text toolbar, making it easier for teams to write and edit content directly on the page.
  • The Stencil Library’s new ‘Callouts & Annotations’ category includes the versatile Callout, as well as newly added Bracket, Speech Bubble, and Thought Bubble stencils. All the annotation stencils are now sticky by default, and can be attached to any object. Drag the tail on to the object and release when you see the orange frame. If you don’t want annotations to stick, just toggle from ‘Sticky’ to ‘Normal’ in the Format Panel.
  • Users with project links can now request access if they have not already been granted permission.


  • Charts now display all the ‘Chart Type’ buttons directly in the popover toolbar so you can quickly experiment, and then pick the visualization that best suits your data – no matter which chart you originally chose.
  • You can now more easily select objects and edit their text within nested Components.

Bug Fixes:

  • Fixed a bug that prevented the Linear Gradient’s circular slider from rotating to 0 degrees.
  • When moving Custom Guides, the tooltip now displays coordinates as whole numbers – not fractions.
  • Object handles (for rounded corners, stars, polygons, etc.) now work with touch-based devices.

Speed Up Your Process With Components

With the introduction of Components, you can now create reusable elements that instantly sync across all instances of that element within your Moqups project.

1 Components_Intro

Turn any single object or group into a Component, and all copies of that element will automatically inherit any changes made to the original. This way, your team can apply quick, consistent updates within projects, and avoid the tedium of reformatting over and over – one object at a time.

By making it easier to tweak elements throughout a project, Components encourage teams to experiment freely, iterate and test more often, and accelerate the overall design and development process.

Components are particularly useful when creating and maintaining frequently repeated UI elements like headers, footers, logos, icons, modals, and device or platform-specific templates.

And the best thing about using components as a foundation tool, is that they have a cumulative effect; over time, the more components you add, and the more you nest instances, the faster and more efficient your future execution becomes.

2 Components_Overview

That’s why components – sometimes named ‘symbols’ – have become such an essential tool for building design systems. But you don’t have to be working within a comprehensive design system to take advantage of components’ power. They can smooth and speed any type of workflow – on any kind of project!

You may have already noticed the new Components button in our top-toolbar. You’ll find all of the Component and Instance controls there, and in the Component section of the right-click Context Menu. Let’s take a look at how they work:

Creating Components and Instances

Once you turn an object or group into a Component, it acts as a master to any and all copies – or Instances – that are made from that component.

That means that any formatting you apply to the Component is immediately reflected by every Instance in the project.

However, for maximum flexibility, instances remain independent of the component in their Coordinates (including Flip and Rotate), and Visibility. This means you can relocate or hide components without affecting the position or visibility of their instances.

To create a Component:

  1. Select any object or group on the page.
  2. From the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, choose Create Component.
  3. Once created and selected, Components are identifiable by their orange ‘Component’ label, badge and frame; in the Outline panel, they are identified by an orange highlight.

3 Components_Create

To create an Instance:

  1. Make a copy of the Component using Ctrl/Cmd  + D, the Duplicate option in the Context menu, or simply hold down Alt/Option and drag.
  2. You can paste the Instance to any page within the project
  3. Now, change the size, text, color, or other formatting attributes of the Component
  4. Once the changes are complete, click outside the Component’s object-frame – and watch the changes propagate to all Instances within the project.

4 Components_Instance

Editing and Adding New Objects

Components and Instances – even those made from single objects – behave like groups. To edit any component or instance:

  1. Select it so you see the orange Object-Frame.
  2. Then, double-click so the thicker Component Edit Border appears in orange.
  3. Now, you can…
      • Click through to edit
      • Add a new element from the left-sidebar
      • Copy and paste an object in from the page itself

5 Components_Add_Object

Applying Overrides to an Instance

Sometimes, you may want to customize part of an individual instance, yet still leave it connected and responsive to its component for other changes and updates. For example, you might want to change at CTA’s color on a specific page, but still want that button to sync with its master for any future changes in size and text.

That’s why any changes made locally, to any individual instance overrides the component’s ability to change that specific formatting attribute (text, color, blur, rounded corners) in the future.

6 Components_Overide

And any overrides applied locally will have no effect on other instances, or the original Component itself. This allows your team to be consistent in design, but still responsive to the particular context of each instance.

Detaching and Resetting an Instance

If you’ve made local modifications to an individual instance, but then want to remove those overrides and re-apply the full style and properties of the component, select Reset Instance.

7 Components_Detach

And, if you want to turn an instance back into a normal object or group, just select Detach Instance.

8 Components_Reset

Locating and Restoring Components

You can leave individual Components in the context of a design, or create a separate project page where all your components can live – and then pin that page to the top of the Pages Panel.

And, if you’re working with an instance, and need to check or tweak the component itself, just click on the instance and select Go to Component from the menu. No matter where the instance is, you’ll jump immediately to its Component’s location within the project.

9 Components_Goto

If, for some reason, you delete a Component, and leave orphaned instances behind, just select any instance and choose the Restore Component option – and the component will magically reappear! Note that this works even for instances with overrides – you’ll still get the original component back.

10 Components_Restore

Components can help reduce errors, ensure consistency and, most importantly, save time by freeing your team from the tedious, repetitive work of updating and reformatting.

As always, we want to hear your feedback, so we can continue to improve your experience. So, please send us your feedback and suggestions at support@moqups.com .

What’s New: May 13, 2019

New Features

  • A Welcome Screen now greets new users and offers the option of starting from a selection of templates or from a blank page.
  • Charts:
    • Our New Funnel chart is great for visualizing website conversions, sales pipelines, customer retention, and PPC promotional campaigns.
    • When you select a chart on the page, new buttons let you quickly ‘Edit Data & Color’ or ‘Change Chart Type’.
    • You can now show value labels on the chart itself; you’ll find this option in Format > Chart Style > Plot.
    • You can also choose to render values as percentages, as part of the Plot options
    • We’ve improved the representation of negative values in stacked charts.
    • And we added digit-group separators to make large value numbers easier to read.


  • In both the Image and Templates libraries, searches now include the names of folders.
  • When you export a single page to PNG, you now have the option of opening the exported file in a new tab.
  • We’ve improved the behavior of nested components after overrides and during reset.
  • The names of image-objects on the page are now reflected in both the Outline Panel and Format tab.
  • Double-clicking on the Rotation handle now quickly resets the Rotation Angle to ‘0’.

Bug Fixes

  • Object interactions are now preserved when you copy/paste, cut/paste, or duplicate an object.
  • Fixed a bug that caused the color picker from the ‘Replace Colors’ section to get stuck and linger on the page.
  • The automatic saving of Interactions is now more reliable.
  • In the Sharing window, we fixed a bug that mistakenly displayed the ‘Remove Collaborator’ option for Team Members.
  • Fixed a bug that caused the canvas to malfunction if, before login or sign-up, you selected ‘Show page thumbnails on hover’ option in Workspace > Advanced Settings.
  • Copying and pasting Components between projects now works more reliably.
  • When creating an Instance, and then nesting it within the original component, the instance is now correctly identified in the Outline Panel.
  • Fixed a bug that made the Preview button in the Moqups Main Menu inoperative.
  • The ‘New project’ pop-up modal now has the correct Team pre-selected when you create a project from the Dashboard.
  • In the Pages Panel top toolbar, we disabled the ‘Create a new folder’ button during searches.
  • Fixed a bug that prevented Interactions from functioning on unsaved projects during Preview.