Export

One of the strengths of Moqups is that all stakeholders can collaborate online, in real time, from wherever they are, and from any device. But there are still lots of scenarios where it makes sense to go old-school, and export part – or even the entirety – of your Moqups projects.

Exporting allows you to share your work with people who might be working in an offline environment, don't have full access to a particular project, or don't have a Moqups account.

And on complex projects, exporting only a part of that project can sometimes help focus the discussion, or simplify navigation.

Who can use this feature?

You can export Moqups projects as…

A series of images in either PNG or PDF formats

or

An offline HTML version of the Viewer itself

Moqups also lets you export individual objects or groups of objects.

The following article shows you how to access the Export function. It also explains each export format, as well as the export options available for each type.

Accessing export

You can access the Export function from the…

• Top Toolbar
• Moqups Main Menu
• Pages Panel (by using the right-click Context Menu)

Each of these access methods opens the Export Project Dialog, displays the pages/folders that you have selected, lets you choose your export Format & Options, and asks you to choose a Destination for your exported files.

Export to PNG, PDF, and HTML Viewer

At the top of the Export Project Dialog, you can choose to export in PNG, PDF format, or as an HTML Viewer. Each of these export types comes with specific advantages and export options.

Export as PNG

• Exports a series of individual PNG image files.
• Is a good solution if you want to embed those images in web pages, or further edit them in other graphics software.
• Exports as my_project_name.zip.

Export as PNG offers five export Options in the Export Project Dialog:

• All Pages or Selected Pages:

  If you want to export selected pages and/or folders, you need to select them before accessing the Export function.

• Include hidden pages:

  Selecting this option includes pages that are set to invisible in the Page Tree of the Pages Panel.

• Trim to content bounds:

  Enabling this option automatically resizes and repositions your exported images so that they fit the exact visible content of your pages. This time-saver makes it possible to embed exported images into web pages or wikis – or open them in other apps – without having to trim each one manually.

• Transparent background:

  Ticking this option creates export pages with transparent backgrounds, allowing the resulting images to be dropped seamlessly into other designs and artwork.

• Scale:

  Choose 1x for standard-resolution images with a smaller file size; 2x for high-resolution images that are sharp enough to print and look crisp on most displays; 3x for compatibility with the newest device screens.

Export as PDF

• Is ideal for sharing or printing projects with multiple pages.
• Preserves links and hotspots in the PDF itself, making the PDF file an interactive prototype that can be sent via email.
• Includes a hierarchical Table of Contents that provides a clear overview of your page structure, and facilitates navigation.
• Allows you to password protect your file
• Exports as ‘my_project_name.pdf’.

Export as PDF offers three export Options in the Export Project Dialog:

• All Pages or Selected Pages:

  If you want to export selected pages and/or folders, you need to select them before accessing the Export function.

• Include hidden pages:

  Selecting this option includes pages that are set to invisible in the Page Tree of the Pages Panel.

• Password protected:

  Selecting this option allows you to provide an added layer of security by setting a password for your exported PDF. Moqups does not register or record the password you choose.

Export as HTML Viewer

• Downloads a fully interactive prototype that can be viewed offline.
• Includes all your project’s Interactions and Comments, and it displays the project’s Top Toolbar, as well as the Pages and the Comments Panels.
• The exported HTML Viewer files can be hosted on restrictive environments like behind-the-firewall intranet servers – or disseminated through corporate document management solutions like Microsoft SharePoint.
• Exports as my_project_name.zip.
• The zip archive contains all the dependent files. To view, extract the archive and click on the HTML Viewer file to open it in your browser.

Select pages for export

Export to PNG and PDF both allow you to export your entire project, or to select specific pages. If you want to export selected pages and/or folders, you need to select them before accessing the Export function:

• To select an individual page or folder, click on that item in the Page Tree.

or

• To select a consecutive series of pages or folders for export, click on the first item in the list. Then, hold down the Shift key while simultaneously clicking on the very last item you want as part of that sequential series.

or

• To select multiple, non-consecutive pages or folders, hold down the Ctrl/Cmd key and make your selection one item at a time.

Select export destination

In the Export Dialog, choose a destination for your exported project:

• Download:

  Exports to the Downloads folder on your computer.

• Google Drive:

  Exports directly to the My Drive folder on your Google Drive. (The first time you use this feature, Moqups will prompt you to authorize and connect to Google Drive). Learn more about our Google Drive integration.

• Dropbox:

  Exports your project directly to the Apps → Moqups folder of your Dropbox account. (The first time you use this feature, Moqups will prompt you to authorize and connect to Dropbox.) Learn more about our Dropbox integration.

• Box:

  Exports your project directly to the All Files folder of your Box account. (The first time you use this feature, Moqups will prompt you to grant access to and connect to Box.) Learn more about our Box integration.

Export link

If you want to share a direct link to the exported page or project – as opposed to sending the exported file as an attachment – just right-click on the download link and copy the URL. The secure S3 link will expire after 4 hours.

Export an Object or Selection of Objects

You can export single or multiple objects in PNG format. This feature is tremendously useful if you want to export only part of your page – for instance, downloading the differing states of a button all at once.

And, if you are building a website or app, this means that the assets you create within Moqups can be included in your final product – extending their utility long after you’re finished with temporary prototypes.

To export an object or group of objects:

1. Select the object(s) you want to export.

2. Right-click on your selection and choose Export selection from the Context Menu.

3. Select the scale of your export:

• PNG@1x (standard-resolution images with a smaller file size)
• PNG@2x (print-ready, high-resolution images)
• PNG@3x (compatible with the newest device screens)

4. Note that Export Selection merges an object group’s layers and exports the group as a single file, rather than as multiple files.

Handoff object properties and CSS/JSX code

The Handoff Panel lets you grab the Properties and CSS or JSX code for one or more objects on the page.

This is useful when you’re working on a proof of concept with graphic designers and developers. These specifications can help jump-start development and provide a sense of how page elements will look once implemented.

The Properties section displays the specifications (coordinates, size, line height, fonts, and colors) for a single object when you select it, or for the whole group when you select multiple objects.

The Code section displays the CSS or JSX for single or multiple objects when you select them – and includes a group class if the objects have been formally grouped.

To copy the CSS or JSX code:

1. Select one or more objects on the page
2. Click the Handoff button in the Top Menu to toggle the panel open/closed
3. Use the More menu to choose between the CSS and JSX code
4. Hit the Copy button to copy the code

You can also copy the CSS for one or more objects by selecting them and using the Copy CSS option for the right-click Context Menu, and then paste where you need the code.

Questions and answers

Does Export include objects outside the page – on the canvas?

For PNG and PDF formats, Export crops out any content outside the page margin. On the other hand, Export as HTML Viewer functions just as the app’s Viewer does; it will display objects outside the page margins unless you have selected Hide content outside pages in your Workspace → Page Settings options.

What interactions function in an exported PDF?

All Page Interactions function normally, with the exception of Jump Back, which relies on your browser history for direction. Object Interactions do not function in PDFs.

If you want to provide stakeholders a fully functional prototype, invite them as project guests, or share a project link. Learn how to do both of these in Sharing. To export all interactions, use Export as HTML Viewer.

Is there a way to include page comments during export?

Export as HTML Viewer includes Comments and the Comments Panel. There’s no way to export comments in PDF or PNG form but, if you want to include an essential comment, in these formats, you can always add a Note or Callout stencil to the page before you export.