Guide to Mockplus Cloud

Mockplus Cloud is a collaborative platform where product design teams can collaborate effectively and hand off prototypes or designs more efficiently. It keeps each product team member in the loop and simplifies your entire design-to-development process.

With Mockplus Cloud, your team collaboration increases, enabling you to ship high-converting products faster.

What can you do in Mockplus Cloud?

Mockplus Cloud helps you achieve more in significantly less time. How?

- It enables you to hand off designs to developers with accurate specs, assets, code snippets

- You can import designs from Sketch, PS, Figma, and Adobe XD

- Teams can collaborate and manage design tasks

- Helps you write PRDs online

- You get to build and customize your style guide

- And import Axure prototypes

A quick introduction to Cloud Homepage

Mockplus Cloud Homepage offers all the collaborative features that product teams need for building a digital product effortlessly. On Mockplus Cloud Homepage, you can create and manage your projects, assign tasks and track the task process, build and manage your Design System, check all the activities within your team, manage your team and members, and even quickly switch to Mockplus RP.

My Projects

Here you can check all the projects you have within different teams. All these projects can be categorized into different groups for better project management.

Task Management

Task management provides a clear insight into your project processes and ensures a smoother workflow. Here you can create, assign and edit tasks, and Super Admins are permitted to track and customize the task process.

Design System

Want to manage better your brand UI style guides, components, and libraries? Build a Design System here! With a Mockplus DS, you can easily promote design consistency and build a constant brand identity.

Activity

View all the activities within your team for each project and always stay up-to-date with the latest changes.

My Teams

Try out this feature to group and manage your team members efficiently. You can do all team-related tasks by setting different roles and assigning different permissions with this feature.

Switch to Mockplus RP

How to enter Mockplus RP? Just click the left navigation bar button to enter the Mockplus RP platform and start prototyping quickly!

How to Create a Cloud project?

To create a Cloud project, go to the project homepage and click on “+ New” to start from the Prototype handoff or Design handoff.

If you start from the Prototype handoff, you can upload Axure & Mockplus prototypes and even publish RP prototypes to Cloud for further collaboration, including reviews, comments, and handoff with your team.

If you start from the Design handoff, you can sync designs from Sketch, Adobe PS, XD, or Figma to Cloud for reviewing, commenting, and handing off, efficiently streamlining your design-to-dev workflow.

Top toolbar

A. Document

Create and edit your PRD (Product Requirement Document) online here. You can also insert tables, designs, or prototypes into your PRD, helping to explain your product requirements further.

B. Prototype

Sync prototypes from Mockplus RP or Axure here to collaborate with your teammates.

C. Design

Sync designs from Sketch, Adobe PS, XD, or Figma with our plugin or directly drag and drop your designs to upload here.

D. Resource

Here you can upload multiple product documents and various attachment documents for previewing, downloading, and sharing.

E. Style Guide

Build your own style guide libraries here and export them all as CSS codes in one click, speeding up your designer-developer collaboration and handoff.

F. Activity

View all activities (including adding, deleting, and changing designs, etc.) within your team for each project and always keep all teammates on the same page.

G. Task

Assign a task to any of your team members and set a due date for the task. This ensures that all tasks are done on time, moving the project to the next phase.

How to collaborate with your team on Mockplus Cloud?

Storyboard

After your designs have been uploaded to Cloud, all pages within a project will be displayed on one screen. This is where Storyboard comes in. It presents all logic jumps between pages with intuitive logic lines and serves as a navigation map to help you locate the target pages quickly.

Click any page you want on the Storyboard to further collaborate with your team.

Comment Mode

Add comments on the designs and directly send them to any of your team members. Keep your team connected with real-time feedback.

A. Comments tools

- Pin

- Rectangle

- Circle

- Straight line

- Arrow

B. Project tree

A project tree helps you clearly see your project's structure and allows you to check design progress easily.

It also makes you better organize your design pages and manage your project.

Here you can:

- Add pages

- Merge your pages into a group

- Search pages

- Mark progress

C. Revision history

Here you can check how your project has been modified, overwritten, or replaced. Any change to your project will be automatically saved to a revision version. You can quickly compare the differences between the two versions side by side.

Review Mode

Once your designs are imported to Mockplus Cloud, design specs will be auto-generated. Want to highlight some custom specs for developers? Review mode provides you with five Markup tools for this purpose. Plus, you can also add references to help developers better understand your idea.

Markup tools

- Text Markup : Add text specs or explanations to any design element

- Coordinate Markup : Click any position to show its coordinated information

- Spacing Markup : Draw out a line around any element to add spacing specs

- Color Markup : Click any element on the page to mark out the color value

- Region Markup : Draw a rectangle to add height and width specs

Add references

Click "Add references" to

- Add a Document, Resource, or Link for any design element

- Direct collaborators to product documentation

- Link to external websites.

Development Mode

In Development mode, developers can:

- Inspect auto-generated design specs with ease

- Download assets in one click and export ready-to-use CSS code snippets with no sweat

It helps designers and developers communicate better and speeds up the design-to-dev process.

Dev tools

- Magnifier : Zoom in to check all specs on the page

- Color picker : Get the color value of any design element

- Hand tool : Move the canvas to check any detail you want

Right property panel

This panel contains all the details for specs, assets, and layers, helping front-end developers get what they need to build apps/websites.

A. Switch development platform

Whether you are an iOS developer, Android developer, or Web/H5 developer, you can get the exact codes for your own development platform here. Simply click "Switch development platform" and check all the details for assets, colors, and layers.

B. Assets

If designers mark assets when importing designs from Sketch, Adobe PS, XD, or Figma, the associated assets will be recognized and shown up in this section. Developers can then easily inspect and download the assets in one click, quickly saving their time and effort.

C. Colors

Here developers can check all the colors and their color value on the design page. Developers can also switch color modes to copy the value they need for development directly.

D. Layers

Click the “Mark layer” icon in the upper right corner to view all marked layers. To further use the layer data for development, just select any layer you want, copy all related layer data and paste it where you like for faster product development.

Prototype Mode (only for design handoff project)

Double click any element on your design page or the artboard to add interactions for them. You can easily add Page interaction or Area interaction for your design project here to show developers the design logic and flow clearly.

Presentation Mode

Here you can preview your project's interactions and test if your prototype or design works as you intend it to.

How to Share a Cloud project?

Preview

Click the Preview button in the upper right corner to preview the project from the home or current page. The preview link can also be shared with others to check and test your project.

To get more stakeholders involved, click the "Share" button , and a URL will automatically be generated. Copy any link (Private share, Public share, or Embedded project) from here and send it to others.

Download

Click the "Download" button at the top right to download the current page, all pages, all assets, or an HTML prototype package.

Here you can check notifications from your team, find the keyboard shortcuts, join our community, ask for help from our tech team, etc.

Guide to Mockplus Cloud