How to

Welcome to Mockup Help List

Thank you for using Mockup Builder. We’ve put as much helpful information as possible here, so you can get back to work on your mockup ASAP. All User Guide documentation for our Mockup Builder application is on this page. You may link via the FAQ, which will take you directly to your answer. You may also print our User Guide to work with Mockup Builder when you have offline access.

If you can’t find an answer to your question in our User Guide, please check our blog or the GetSatisfaction forums.

The Application Bar

Menu commands


All of the buttons in Mockup Builder’s Menu have a similar structure to a typical menu with standard commands such as Open, Close and Save Project. You can do a variety of things from the Menu, such as edit your Mockup (a short command is also available), export screenshots to PNG files and export/import projects.

Common commands

The Common Commands include the same commands as the Edit menu: Cut, Copy, Paste, Delete, Group, Ungroup, and Lock. For better usability, users may use keyboard shortcuts. You can find most shortcut commands in Help content.

UI Library

The UI Library is a long strip of UI Controls just below the Main menu with a large range of different UI control types that Mockup supports.

Via the UI Library, customers can put any of the UI elements onto the mockup canvas, allowing them to use those elements to build a mockup.

For example, let's say you want to add a new UI control to the canvas. Simply select any of the controls and “drag and drop” it to the mockup canvas below; Mockup Builder will place it on the mockup canvas in any location you choose.


The Mockup Canvas

The Mockup Canvas is a working area of Mockup Builders, where users make UI mockups more realistic. In Mockup Canvas you may add UI controls, move them and resize them as often as you want.

Take a look at the instructions below:

The best part is, you’re able to change the mockup canvas with your browser or application window for a smaller or bigger mockup, if needed.

Adding UI Controls

You may use any element from the UI Library if you choose to add new UI controls to your mockup. There is also another way to do this – just duplicate the selected controls. This is easy to do: simply copy and paste elements, commands or buttons, or drag-and-drop the selection. You can save time by using the same elements.

Selecting and moving UI controls

Mockup Builder has a couple of different ways to select UI controls. Even if you’re not good at using graphics, these shouldn't be a problem for you.

  • If you like any of the elements (controls), just “drag and drop” them;
  • You may use the lines on the canvas or the align tools. These controls move in one direction.

Resizing UI Controls

Move and resize UI controls
Most elements and controls are resizable in terms of UI. Resizing is easy - all you need to do is grab one of the eight little squares of the selected rectangle and drag it.

Another way to resize a control is with the Property Inspector, where you can enter the size you need and position it.

Layering UI Controls

You can create different layers of UI controls on the mockup canvas. To do this, select the controls you want to layer, then select one of four layering commands available via the Property Inspector: bring to front, send to back, bring forward and send backward. Grouping UI Controls.

Grouping UI Controls

To group some of controls in order to align them better, or to move them all at once, you may use short commands or select from the following Commands:

  • “CTRL+G” to group a set of controls;
  • “CTRL+SHIFT+G” to ungroup controls.

The Property Inspector

The Property Inspector is a little floating menu that appears once you select one or more UI controls. Property Inspector contains a lot of standard functions such as: Copy/Paste and Auto-size controls, element size, position, colour control as well as some control-specific customizations.

Color panel Icons

Working with Text

Working with text
Some UI controls, such as Button, Label and DataGrid, have text in them. This text may be edited if needed. To edit text, click on the control and start typing. Another way to edit text is to select the control by simply pressing ENTER. Edited text will be saved automatically the moment you click anywhere other than the text field you typed in or hit Enter. To discard the text changes you have just made, hit the Escape key.
Important: There are plenty of controls in Mockup Builder that are used as separators (comma, dot, slash, hash, etc.) or as a space character to separates tags. Different controls use different characters altogether.

Please take a look at the default text examples for the Control:

  • For Bold use this *Example of text*
  • For Italic use this _Example of text_
  • For Link use this [Example of text]

Working with Data Grids / Tables

Column Width Options

Users may specify individual width and alignment options for each data grid column via using the Property Panel.

Here are the details for creating column widths:
Column width options

Working with the tables:

irst, you have to decide how many columns your table will have. Let's imagine you have 3 vertical columns.

You may have a lot of horizontal lines. It does not matter how many lines you have. Surround the text in curly brackets { } on the last line of the text in your table.

If you want to make the first line bolder, just write in bold font.

The columns may be as small as possible. If you genter “0”, the size of your column will be narrowed to the minimum size of the text, so {1,2} means “make the second column twice as big as the first one in this two-column grid”;
Working with the tables

Or {50, 25, 25} means “in this 3-column grid, make the 1st column 50%, the 2nd 25% and the 3rd 25% of the width of the whole table.”

You can combine numbers and zeros, as in the following example:

To align the column individually, add either L, C or R right after a number, e.g. {0R, 4L, 1}, which means “in this 3 column grid, the 1st column will be as small as possible and always align it to the right, the 2nd column is four times bigger than the 3rd one and always align it to the left, and use the DataGrid’s alignment (from the Property Inspector) to decide how to align the 3rd column”

If you want to create a checkbox, you must write [ ] brackets at the end of the line, or [x], [v], [o], [*], [X], [V], [O]. Each of these signs has specific reflections (checked, unchecked, etc.); you can also put radial buttons: () Option; (o) Option 2 (selected); -() Option 3 (disabled)-; -(o) Option 4

Working with Images

Image editing is a very powerful feature, enabling a number of different use-cases. For example, you can improve an existing interface by importing screenshots of the current UI to the Mockup canvas. In this case, you can import images of custom icons or custom control types.

Great feature: some images are linked in and not embedded; you can use the image import feature to create component templates. This is somewhat of an advanced feature.

Working with Symbols

Symbols allow you to reuse common elements across your mockup.

Symbols allow you to reuse common elements across your mockup. Enhancing Mockup is a capability that gives you a sense of customizing elements on the canvas. You may also use these features for creating master templates, building custom interface components, and other making reusable interface elements

Import and Export

Export via PNG file

Mockup Builder has exporting features which allow you to export your mockup as a PNG file, which is useful if you decide to make a copy of your mockup, email the mockup to somebody else, or export it to another format.

It is really easy to do. Just select “Export Mockup” from the Mockup menu dialogue. If have the PNG, you can use it to create a new mockup. Select the element in "Pictures," then import the file as a picture from your PC.

In case you have the PNG, you can use it to create a new mockup. What you need is just to select the element "Pictures" and then Import files as pictures from your PC.

Very important: The contents of your mockup canvas will be erased when you open a new mockup.

Export to PDF

Mockup Builder allows you to export open files to PDF, which is useful for sharing a single mockup for a project.

You may export the entire project by opening all of the files from the project. For this you must select the files you want to export and choose Menu > File > Export to PDF.

You can find more information in Working with Projects, which helps with organizing project files.

Linking Mockups Together

You have the capability to link different mockups together in order to create a simple prototype for your site or software application.

At the moment, we are working on a version of Mockup Prototype where linking capabilities will be fully customizable.

An option to link two mockups together as a file name from a pull-down menu is also available. For the fastest working conditions, click on the control that supports linking; you will see a new “Link” pull-down in the floating screen manager.

If you can not find the pull-down menu, click on “Show Link”:

Click on the link to upload the referenced mockup file.

One more important thing: if you use the left and right arrow keys to go back and forth between the mockup, you have to visit run-through.

Presenting Your Work

When you need to present your wireframes to others, you may use Mockup prototype Presentation Mode.

All you need to do is just click on the Presentation Mode button in the top-right corner of Mockup. Presentation will expand your whole screen in a new window, with your mockup centered on the screen.

At the top of the window in Edit Mode, there are buttons with which you may add your Comments, draw some marks with Pencil, draw Arrows, and delete elements of your mockup by using Eraser.

Presenting work

Sharing Mockup

Sharing mockup
You can make public and private share. If you make a public share your project is available to everybody and the person you share project with can only see you project and can’t leave any comments. If you make a private share your project is available only to the person you share the project with and he can leave you his comments and notifications. People you share project with can view it in presentation mode like shown on the screen.

User LogIn

To see all features you need to Login In into Mockup Builder.

Sign in


Go to our dashboard just by clicking on your name in right corner and the dashboard is displayed.

User Profile

Here you can change the name which is displayed in chat, color with which you messages will be marked. You can also change your password.
User profile

Mockup collaboration

Once you start to move controls they are synchronically moving on other users’ screens as well.

Mockup chat

On the right side you see toolbar and chat, where you can see messages of other collaborators. Every user has a different color.
Users in a chat

Keyboard Shortcuts

For better and faster work we have written all shortcuts in the following list. Also, there are some exceptions of UI controls which cannot work when you are editing the mockup in a browser
Add to selection SHIFT+CLICK
Toggle selection CTRL+CLICK
Select All CTRL+A
Edit the selected control’s text ENTER or F2
Resize maintaining aspect ratio Hold SHIFT
Disable snapping during move or resize Hold CTRL
Nudge selection 2px arrow keys
Nudge selection 20px SHIFT+arrow keys
Nudge-Resize selection 2px CTRL+ALT+arrow keys
Nudge-Resize selection 20px CTRL+ALT+SHIFT+arrow keys
Clone selection ALT+drag
Undo last command CTRL+Z
Redo last command CTRL+Y
Cut the selected controls CTRL+X
Copy the selected controls CTRL+C
Paste CTRL+V
Paste In Place CTRL+SHIFT+V
Delete the selected controls DELETE or BACKSPACE
Duplicate the selected controls CTRL+D
Group the selected controls CTRL+G
Ungroup the selected groups CTRL+SHIFT+G
Lock the selected controls CTRL+2
Unlock all locked controls CTRL+3
Align selected controls left CTRL+ALT+1
Align selected controls center CTRL+ALT+SHIFT+2
Align selected controls right CTRL+ALT+3
Align selected controls top CTRL+ALT+4
Align selected controls middle CTRL+ALT+5
Align selected controls bottom CTRL+ALT+6

Editing Text

Start Editing text of the selected control ENTER or F2
Committing the current text ENTER (single-line controls), CTRL+ENTER
(multi-line controls) or click anywhere
Ignoring the current edit ESCAPE

Working with Mockup Files

New Blank Mockup CTRL+N
New Clone of Current Mockup CTRL+SHIFT+N
Open a mockup file CTRL+O
Save the current mockup file CTRL+S
Close current mockup CTRL+W
Close all mockups CTRL+SHIFT+W
Export this mockup’s XML CTRL+E
Import mockup CTRL+SHIFT+E
Print mockup CTRL+P