A MockApp board seen from above on a desk

Start here

MockApp is a native design tool for Mac, iPad and iPhone. Everything happens on one infinite board: sketch a wireframe, build screens out of real UI parts, lay a flow side by side, export. This guide is a board too — every page of it was laid out in MockApp before it became a website.

The first five minutes

  1. Create a board. New Project asks for a category — Mobile, Tablet, Desktop, Watch or Web — then a template or a blank board. Templates are small real products you can take apart; a blank board is exactly that.
  2. Tap to select. The first tap picks the whole screen or group under your finger. Tap again on something inside to reach it. Tap a selected text once more and you are editing it. Long-press empty space and drag to select several.
  3. Add something. Open Elements — the + button on iPhone and iPad, ⌘I on the Mac — and drag a part onto a screen. Faster: Quick search, the bubble in the bottom-left corner (⌘F). Type "button", tap the match.
  4. Look around. Pinch to zoom and drag empty space to pan; on the Mac, scroll. Double-tap empty space to zoom to 150%, double-tap again to go back to 100%. The minimap in the corner shows where you are.
  5. Never save. Boards save themselves and sync through iCloud. Undo goes all the way back to when you opened the board — ⌘Z, or the arrow in the toolbar.
The Mac editor: board in the middle, inspector on the right, Quick search bottom-left.
The Mac editor: board in the middle, inspector on the right, Quick search bottom-left.

The cheat sheet

Same ideas, three devices. If you remember one table, make it this one.

Action Mac iPad iPhone
Select Click Tap Tap
Reach what's inside Click it again Tap it again Tap it again
Go up a level Double-click Double-tap Double-tap
Select several Drag on empty space Long-press empty space, then drag · with a trackpad, just drag Long-press empty space, then drag
Add or remove one ⌘ click ⌘ tap, with a keyboard Hand button, then tap
Move Drag — no need to select first Select, then drag Select, then drag
Duplicate ⌥ drag ⌘ D ⌥ drag, or the menu Duplicate, in the menu
More actions Right-click Long-press and hold · two-finger tap on a trackpad Long-press and hold
Edit text Return, or click the selected text Tap the selected text Tap the selected text
Pan Scroll ⌘ arrows Drag empty space Drag empty space
Zoom ⌘ = ⌘ − ⌘ 0 Pinch Pinch
Deselect Esc, or click empty space Tap empty space Tap empty space, or ✕
Undo ⌘ Z ⌘ Z toolbar Toolbar arrow
Redo ⌘ ⇧ Z ⌘ ⇧ Z toolbar Toolbar arrow

Where things live

Mac

Inspector on the right (⌘⇧2) with Design, Elements and Layers tabs. Quick search bottom-left. Menus and shortcuts for everything else.

iPad

The same inspector, behind the sidebar button. Toolbar: grid, undo, redo, export. Apple Pencil draws; a trackpad behaves like the Mac.

iPhone

Properties in the pill at the bottom, elements behind the + button. Top bar: clear selection, multi-select, undo, redo, export.

The rest of this guide

Made in MockApp. All eleven pages of this guide were designed as one board in the app, then exported and built into this site — the same canvas, the same components you get. See what it does.