Guide to Mockplus Cloud

Guide to Mockplus Cloud

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

With Mockplus Cloud, your entire team, including designers, developers, product managers, marketers and more design stakeholders, can get together, and share, review, collect feedback and also handoff in just one platform, shipping high-converting products faster.

What can you do in Mockplus Cloud?

Mockplus Cloud helps you collaborate and handoff in significantly less time. How?  

- Import designs and assets from Sketch, PS, Figma, Axure and Adobe XD in just clicks

- Share designs or prototypes within your whole team via a single link

- Invite team members via a single link

- Quickly review designs and also leave comments on screens

- Handoff designs to developers with auto-generated design specs, assets and code snippets, all via a single link. 

- Create, assign and manage design tasks to ensure your project is completed on time. 

- Write and share PRDs online 

- Build and maintain your own design systems with your team

A quick Intro to the Project Homepage

Mockplus Cloud's project homepage is divided into different functional sections, gathering all the collaborative features that design teams may need for creating the best UI/UX and digital products together. 

It provides entries for you to 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 go to our other tools, Mockplus RP and Mockplus DT.

Project Management

Section No. 1 is where you can create, access, and manage projects by group. 

It is divided into two parts: 

• On the right, you can easily create projects or nested project folders and manage them in tile or list mode. 
• On the left, you can assign projects to different groups for quick access and management. 

Task Management

Section No.2 provides a clear insight into your project processes and ensures a smoother workflow. Here you can create, assign and manage your tasks. 

And Super Admins also have the permissions to customize the task statuses and task review process. 

Design System Management

Section No.3 provides an entry for you and your team to build, share and maintain your brand design systems together by creating Asset or Library design system projects. 

Your design system projects can also be connected with your design projects so developers can easily view the related code snippets and components under the Development mode. 

Activity Management

My Teams

Go to Mockplus RP or Mockplus DT

Mockplus Cloud offers features that allow you to quickly navigate to Mockplus RP or Mockplus DT. Simply click their logos in the bottom left corner to access them.

How to Create a Mockplus Cloud project?

To create a Cloud project, go to the project homepage and click “+ New”: 

Two options would be given: Prototype handoff and Design handoff. 

Here is how to choose: 

If you want to start your project from Axure or Mockplus RP files, select "Prototype handoff".

If you need to start your review and handoff process from other design tools, like Sketch, Adobe PS, XD, or Figma, go choose "Design handoff". 

And then, click OK to create your first project. 

Explore the Mockplus Cloud User Interface

Now that your first project has been created, let's see what you can do with its user interfaces: 

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.

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.

Share

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.

More

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