How to Get Started with Mockplus to Create a Prototype

Start by creating a free account on mockplus.com, then choose the product that matches your task: Mockplus RP for wireframing and prototyping, Mockplus Cloud for collaboration and handoff, Mockplus DT for online UI design, or Mockplus 3 Offline if you need to work without an internet connection. For a first prototype, Mockplus RP is the natural entry point. The workflow below covers setup, building a screen, adding interactivity, and sharing it for review.

Step 1: Pick the right product entry

Mockplus is not a single tool but a set of products. Choosing the wrong one is the most common early mistake.

If your goal is "make something clickable to test an idea," stay with Mockplus RP. You can move to Cloud later when the prototype needs review and developer handoff.

Step 2: Build your first screen with drag-and-drop

You do not draw components from scratch. Mockplus ships with built-in UI icons, component libraries, and templates for iOS, macOS, Android, Web, and Material Design.

1. Create a new project and pick a template or a blank artboard sized for your target device.
2. Drag components from the library onto the canvas — buttons, navigation bars, input fields, cards.
3. Rearrange and resize by dragging; the layout updates as you place elements.
4. Refine any ready-made widget with your own styles, or use the vector tools to build a custom asset.

The expected result after this step is a static screen that looks like your intended UI. If you want consistency across screens, define reusable colors, fonts, headers, footers, and menus as shared assets so the whole team pulls from one source.

Step 3: Make it interactive

A static screen is not yet a prototype. Mockplus lets you add dynamic interactions, animations, mobile gestures, and custom states without writing code.

• Interactions — link a button to the next screen so tapping it navigates.
• Animations — add transitions between states or pages.
• Gestures — simulate mobile behaviors like swipes.
• Custom states — show how a component changes (for example, a button in default, hover, and pressed states).

The point of this step is to create a real user experience you can put in front of someone. According to Mockplus, this can shorten usability testing to days or even hours, because testers react to a clickable flow rather than a flat image.

Step 4: Add notes and flowcharts for clarity

A prototype alone does not explain intent. Mockplus lets you attach notes directly to a single component or page to record design requirements, specs, and context. You can also build simple flowcharts by dragging to show user flows such as login or purchase.

Do this before sharing. It reduces the back-and-forth that happens when a reviewer cannot tell whether a screen is final or a placeholder.

Step 5: Review, collaborate, and hand off

Move the work into Mockplus Cloud when other people need to see it. Cloud is positioned as the free collaboration and handoff layer, and it is described as an alternative to InVision. This is where reviewers comment, and where developers pick up specs.

Free start and upgrade path

Every product line lists a free tier — Mockplus RP, Mockplus Cloud, Mockplus DT, and Mockplus 3 Offline are all described as free. Paid options exist: there is a pricing page for Mockplus RP and a separate education offering. Check the current pricing page for exact plan limits and features, since the free tier's boundaries are not specified in the source material.

Common sticking points

• Choosing the wrong product first. If you only need a clickable prototype, you do not need the full design or offline tools.
• Skipping shared assets. Building every screen from scratch causes inconsistent colors and spacing later.
• Sharing without notes. Reviewers will ask what each screen means; annotate before you send.
• Assuming offline works everywhere. Only Mockplus 3 Offline is described as the offline solution — the browser-based products depend on a connection.

What to do next

Create the free account, open Mockplus RP, and build one screen end to end — layout, one interaction, one note. That single loop teaches you the whole workflow faster than reading about every feature. Add Cloud collaboration only when a second person needs to review the work.