Get started

Balsamiq is a graphical user interface wireframing software. It allows the designer to arrange pre-built widgets (GUI controls) using a drag-and-drop WYSIWYG editor.

You can also test it online.

Create a project

Before starting your design, delete all the wireframes on the left sidebar if there are any (Right click on the wireframe > Move to trash).

New mockup.

Create a container

In order to create a UI you should first create a container. A container is a widget that can contain other widgets. You must provide one container per wireframe. Here's a list of the containers supported by Yotako:

Smartphone

Android phone.

iPhones

iPhone4. iPhone5. iPhone6. iPhoneX.

Browser

Browser.

Rectangle

Rectangle.

FieldSet

FieldSet.

Ipad

iPad

Window

Window

Add widgets

Widgets should be dropped into the container screen area of your containers. If you put widgets fullly or partially outside, they will not be treated as part of the page by Yotako.

You can find a list with all the supported widgets in the Widgets reference section below.

Widgets ouside the container.

Multiple pages and navigation

If you want to create multiple pages for your application, you should first create a new wireframe (on the left sidebar) and add a container to it. The first wireframe's container will be considered as the first page of your application. Note that you can name the pages as you want by renaming the wireframes (that default to "New Wireframe..").

Widgets ouside the container.

If you want to add navigation between pages or to external URL, first select a widget and set the link property on the right sidebar.

Links.

Groups and Symbols

Groups and symbols are advanced features in Balsamiq that allow you to group multilple widgets together. Cropping of such groups is not supported yet by Yotako (as well as images cropping).

Save the BMPR design

At some point you need to get your BMPR file before importing it into Yotako. If you are using Balsamiq 3 for Desktop version you can simply save your project (Project > Save Project).

If you are using Balsamiq Cloud version, you can use the option Project > Export > Download Project BMPR... also available in the Project menu.

You are now ready to import your Balsamiq BMPR design into Yotako.

Saving BMPR.

Unsupported Widgets

The next section lists all the widgets currently supported by Yotako. This documentation is updated frequently with new supported widgets but if you have special needs please contact us here.

In the meantime and if you are using widgets that are not listed in the next section, Yotako will provide you with a nice red cross instead that you can easily replace later in your code. This way, Yotako will ensure that everything is computed as if your widget was already there (including layout, responsiveness, etc.).

BMPR with unsupported widget. Representation of unsupported widget.

Widgets reference

This section references all the Balsamiq widgets currently supported by Yotako. You should use these to design your apps. Note that new widgets are being added on a daily basis. If you use widgets that are not supported, you can still use your BMPR design with Yotako but such widgets will be ignored.

Button

Button.

Block Of Text

Block of Text.

Button Bar

Button Bar.

Checkbox

Checkbox.

Checkbox Group

Checkbox Group.

Circle Button

Circle Button.

Image

Image cropping is not supported yet.

Image.

Label

Label.

List

List.

Multiline Button

Multiline Button.

Pointy Button

Pointy Button.

Progress Bar

Progress Bar.

Radio Button

Radio Button.

Radio Button Group

Radio Button Group.

Rectangle

Rectangle.

Shape

Available shapes are shown below. Other shapes are not available yet.

Dotted shape. Rectangular shape. Rounded shape.

Subtitle

Subtitle.

Text

Text.

Text Area

Textarea.

Text Input

Text Input.

Title

Title.