Tutorial > Mockplus Cloud > Getting Started > Quick Start Guide

Quick Start Guide

Mockplus is an all-in-one product design platform for hi-fi prototyping, design collaboration, developer handoff, and design systems. It brings developers, designers, product managers, clients and other stakeholders to the same project and connect your entire product design workflow in one place. 

Here are some simple steps that you can follow to streamline your design-to-development process:

Step1: Start Designing

To start designing your project, you get four options:

Start Design and Prototyping Online with Mockplus RP

Mockplus allows you to quickly create wireframes and interactive high-fidelity prototypes online from scratch using Mockplus RP

A large number of ready-to-use components, icons and other tools are available to help you prototype designs faster and easier. The responsive prototyping is one of the most popular features that you should try. 

Go try it free now

Click "New" on the project homepage and choose "Online prototyping" to start your prototyping:

Need more information? Go check our Mockplus RP tutorials.

Import Designs Using Our Plugins

If you've created your designs in Sketch, Photoshop, Adobe XD and Figma, you can directly import them into Mockplus Cloud using our plugins. So, you can collaborate and handoff them with your team. Design specs, assets and code snippets are automatically generated in the moment you import your design. 

Import your designs from Sketch

Import your designs from Photoshop

Import your designs from Adobe XD

Import your designs from Figma

Import Prototypes from Axure

If you have an Axure prototype and want to collaborate and iterate it with your entire team, you can directly import it into Mockplus Cloud. There are two mothods available:

  • Import Axure prototypes using the Axure plugin

  • Import an Axure HTML package in the "Prototype" mode

Need more details? Check Axure plugin tutorial.

Import Prototypes from Mockplus Classic

You can also import a website or mobile app prototype made in Mockplus Classic into Mockplus Cloud for better collaboration and handoff. Open a project, go to the "Prototype" mode and drag and drop your mp file into the canvas. 

Need more details? Check our tutorial.

Step2. Review and Collaborate Designs

Once your designs or prototypes are ready, it's time to share, review and collaborate them with your team. Mockplus's flexible workflow is designed to help you be the most efficient you can be. It is adaptive, versatile and able to handle a diversity of scenarios: 

Add Comments

Under the Comment mode, all your team members can easily add comments to design pages. So feedback and suggestions can be given and picked up quickly by designers, developers or any other stakehoders.

Up to 5 comments tools allow you to comment directly on design pages, including the "Rectangle", "Circle ", "Straight line", "Arrow" and "Pin" tools. 

You can easily leave a comment on any element or spot of your design page.

To better process and manage all your comments, you can also set a status for these comments, such as "Closed", "Unsolved" and "Resolved".

Even when a comment is "resovled" in an updated version, the comments will also be saved along with the auto-generated revision history.

Need more information? Check the Comment mode tutorial.

Step 3. Handoff Designs

After you've completed your designs, you can now move to the design handoff process. Mockplus provides many features to simplify the design handoff process, such as: 

View Specs

In Mockplus, all design specs are automatically generated once you've imported or added any design pages. Developers can easily click or hover on any element or layer to view the detailed specs. 

Want to read more? Check the Spec tutorial.

Download Assets

When importing designs from Figma/Sketch/PS/Adobe XD, designers can also mark assets for export at the same time. So, once imported, the associated assets will also be recognized and shown up under the "Development" mode. Developers can then easily inspect and download them at 1x, 2x or 3x resolution, along with options to adapt to different devices and platforms, including iOS, Web and Android, in one click. 

Want to read more? Check the Download Assets tutorial.

More Features Worth Trying Out

Here are more features we'd like to share with you:

Add Manual Specs

When auto-generated design specs cannot convey your ideas fully, you can choose to add specs manually to further explain details. Many manual markup tools are provided, including the Coordinate markup, Region markup, Spacing markup, Color markup, and Text tools.

Check Manual Specs tutorial to learn more details. 

Write and Share PRD Online

A good PRD (Product Requirement Document) is essential for product teams to create the best products. To help you create a product that really meets the needs of users, Mockplus has released a special "Document" mode that lets you write, share and manage PRDs online. A simple click can help you export an online PRD to PDF file.  

Optionally, you can also upload your existing PRD (in pdf、doc or docx formats) from your computer to share, comment and collaborate all the same together with your team. 

The revision history of your PRD will be auto generated and backed up so that you can check the changes anytime and anywhere.

There are also options to insert design pages, tables, external links, images and more information with only a few clicks.  

Check our Document tutorial to read more details. 

Draw Flow Diagrams on Your Storyboard

In Mockplus RP, there's a mode made for creating flowcharts, user flows, business process models, or any other flow diagrams based on the design pages with drag-and-drop. Combining your prototypes and flowcharts together makes it easier for your team to understand and communicate better. 

The smart lines used to connect different elements and pages are fully customizable with the option to add a description with a double-click. 

Compare Design Pages and Versions Quickly

With Mockplus, a historical version is automatically generated everytime your project gets modified, overwritten, or replaced. To inspect the differences between different versions, you can compare them in four modes: Split, Fade, Slide and Difference. Design pages can also be compared for differences quickly.

Need to read more? Check the Version Comparison tutorial.