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).

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

iPhones

Browser

Rectangle

FieldSet

Ipad

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.

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..").

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.

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.

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.).