About Mokup

Mokup is a tool to design interactive animated prototypes. Mokup allows you to create prototypes of any scale - up to full-size application prototypes with multiple screens and complex interactions. From websites to mobile or smart-TV applications, Mokup will help you to visualize your ideas.

State-based animations

Mokup is created around the idea of state-based animations.
Each component of any UI usually have a few distinguished states i.e button with a default, hovered. and pressed states or application with a few pages, each of them is also a separate state.

Mokup allows you to design those states and create transitions between them. Each transition can be started with a user interaction or with a timeout.

Mokup contains a powerful toolset to design and tune transitions, so you can make them look exactly as you imagined.

Transitions

A transition is an animation that changes the projects state, defined by the initial artboard to the state of the target artboard.
A transition can be triggered by one of users actions e.g. Click, Press, Release or Hover etc.

To create a transition select an action source and click the Add Action icon. Then press the desired action's radio button and drag it to the target artboard. This will create a Transition, and the corresponding waypoint of this transition will be shown from that object to the destinated artboard.

When the selected user action occurs on the source artboard all the objects will morph to their corresponding states on the target artboard.
The objects from the source and target artboards are mapped by their name. The object named "A" will morph to the state of the object named "A" on the target artboard (if such an object exists and has the same type).

A rectangle can be transitioned only to a rectangle, Text only to a Text, and an instance of a Symbol - only to another instance of the same symbol.
To see and modify the transition - click on the arrow on the transition waypoint. The animation panel with all the transition properties will appear.
In the animation panel, you can adjust timing and easing settings for all the properties of objects that are being morphed. The overall speed of the transition can be changed in the header of the animation panel.

For additional information on transitions please refer to tutorials.

Drag/Scroll/Page

Mokup supports 3 types of built-in interaction behavior: Drag, Scroll, and Page.
Each of them can be enabled independently on horizontal and vertical axis.
All behaviors are available for Groups and Rectangles.

Drag: Object will be draggable within bounds of the parent object ( i.e. a group).

Scroll: Object`s children will be scrollable within bounds of the scrolling object.

Page: Acts similar to scroll except scrolling will occur page by page. With the size of each page same as the size of the paging object.

Bindings

You can bind object animations to other objects interaction behaviors, allowing to trigger them by reaching the desired parents position, thus creating effects like appearing of a loading icon at the end of the scrolling, hiding header at the start of the scrolling and many others.
For information on how to use bindings please refer to tutorials.

Symbols

To better organize your projects, Mokup offers a system of reusable components - symbols.
Each symbol is a set of nested artboards and transitions between them.
To see all created symbols in your project, open the Symbols panel located beside the layer panel.
You can use a symbol multiple times in your project. If you change a symbol all the instances of that symbol are changed instantly.
For additional information on how to use symbols please refer to tutorials.

Import

Mokup supports PNG and JPG images for raster formats and SVG for vector. SVG format is not fully supported and its support is still in the experimental stage.
After import assets are copied to the internal storage and any changes in the original assets are not reflected in Mokup.

If you want to update any imported asset, just reimport it once more, and delete the new instance - meanwhile the old asset will be updated.

Sketch Sync

On the Mac platform, Mokup supports syncing with Sketch. To sync with Sketch the latest version of Sketch must be installed.
On the first sync, Mokup will import all the Sketch objects while keeping the document structure. On the following syncs, Mokup will update the existing objects to reflect the changes in the Sketch file. E.g. if you move an object in Sketch, upon sync, Mokup will move a corresponding object. All the actions and transitions that you've added in Mokup will be preserved.

Since Mokup doesn't support different sizes of artboards in the same document upon sync your artboards will be resized to the most common size in the Sketch document. You can disable artboards resizing in the import dialog.

Figma Import

Mokup supports import from Figma. On import, Mokup will treat Figma's Frames as Artboards and will ignore all the objects outside of any frames. The document structure will be preserved.
Since all the rendering of the objects is done on Figma's servers the import process can take a while. Mokup has no control of it and can't help if Figma's server returns an error.

PSD Import

Mokup supports import from Photoshop PSD files. Each PSD layer upon import is rasterized and is imported as a separate object.

 

Export

Mokup allows you to record video of your prototypes, and export it as a .mp4 or .gif file.
To start recording just click the video camera icon in the preview panel, and choose what filetype you want to export it.The icon will start blinking red - indicating that the session is being recorded
To finish recording hit the same icon again, and specify where you want your video to be saved.
Video footage is recorded in 60fps for mp4 format and 50fps for gif format.

Video Templates for Dribbble

You can export videos in the special frames designed to impress your Dribbble followers.

A few templates are preinstalled with Mokup so you can choose between front facing and isometric frames for different phone aspect ratios.

If your prototype has a different aspect ratio or you are not satisfied with predefined templates you can easily design your own. The template is a folder with 3 files: background.png foreground.png and data.json. To create your own template please copy an existing one from "Templates" folder in Mokup installation directory. You can change background and foreground to your own files. Please edit data.json with a text editor to position the corners of the artboard in your template.

Custom templates can be loaded with a "Load Template" button in video export dialog.

Web Export

Mokup allows you to upload your prototypes to Mokup's servers for instant preview in a browser.

To make your prototype available online just press the "Share Online" button. After uploading to the server you'll get a preview link that is playable in any modern browser.

Mokup File Format

Mokup saves prototypes in .mokup files.
.mokup file is a regular zip file, which contains all resources used in prototype and a data.json file with prototype's description.
data.json format is easily readable and parseable.
Developers can use the data.json to extract exact objects and transitions properties, used in the prototype.

Hotkeys

Basic:

Undo: Ctrl+Z
Redo: Ctrl+Y, Ctrl+Shift+Z
Copy: Ctrl+C
Paste: Ctrl+V
Cut: Ctrl+X
New File: Ctrl+N
Save File: Ctrl+S
Save File As: Ctrl+Shift+S

Canvas Navigation:

Move: Space + Left Mouse Drag, Middle Mouse Drag
Zoom in: Ctrl + "+"
Zoom out: Ctrl + "-"
Show Artboards: Ctrl + 0
Default Zoom: Ctrl + 1
Show Selection: Ctrl + 2

Transformations:

Rotation Mode: Ctrl
Disable Snapping: Ctrl
Proportional Resize: Shift
Resize From Center: Alt
Drag by Axis: Shift + Left Mouse Drag
Show Measurements: Alt
Move by 1px: Arrows
Move by 10px: Shift+Arrows
Layer Up: Ctrl+]
Layer Down: Ctrl+[
To Top: Ctrl+Shift+]
To Bottom: Ctrl+Shift+[
Bold Text: Ctrl+B
Italic Text: Ctrl+I

Objects:

Create Artboard: A
Create Rectangle: R
Create Text: T
Create Symbol: S
Group: Ctrl+G
Ungroup: Ctrl+Shift+G
Delete Objects: Del, Backspace
Duplicate: Ctrl+D, Alt+Left Mouse Drag

Selection:

Multiselect: Shift+Left Mouse Click
Select Parent: Esc
Select All: Ctrl+A
Select Child: Ctrl+Left Mouse Click, Left Mouse Doubleclick

Layers Panel:

Multiselect: Ctrl + Left Mouse Click
Sequence Selection: Shift + Left Mouse Click

Bindings:

Move Right 1px: ]
Move Left 1px: [
Move Right 10px: Shift+]
Move Left 10px: Shift+[
Go to Start: Header Doubleclick

Preview Panel (when maximized):

Toggle Recording: R