Importing Balsamiq Mockups

Sketch and Balsamiq integration

Overview

Indigo Studio provides a way to import your Balsamiq® Mockups BMML files. This allows you to reuse your existing investments in Balsamiq or use some of the existing libraries of Balsamiq Mockups that are freely available.

Balsamiq focuses on creating static wireframes with navigation between them, and Indigo has a superset of Balsamiq's functionality. The good news is that you can take your Balsamiq's mockups and make them interactive with Indigo!

Importing from Balsamiq Mockups

Indigo provides two ways for importing content from Balsamiq Mockups:

  • Opening Balsamiq's .bmml files
  • Copying content from Balsamiq and pasting it on Indigo

To get the .bmml file from Balsamiq, use the Export Project to to BMMLs ZIP option in the Project menu and then open the unzipped files from Indigo Studio. This step isn't necessary if you're using Balsamiq 2.2.24 or a previous version.

If you are using Balsamiq's web version you can use the 'Export Mockup' option in the Mockup menu to copy the content to the clipboard, or press CTRL+E.

About the Importing Process

The goal of the conversion process is to create a screen in Indigo that is equivalent to a Balsamiq Mockup. Given the differences between the tools, here are some things you should bear in mind when creating a screen based on a Balsamiq file.

  • Balsamiq has a sketchier style for controls than Indigo, so the end result will not look exactly the same
  • Some of Balsamiq's controls are currently not being imported by Indigo
  • Some controls support slightly different properties, so the end result is not exactly the same
  • There are some properties that are not ported from Balsamiq files

Balsamiq properties not imported by Indigo

These properties are currently not supported for import:

  • Markup content in text fields: Balsamiq has a simple markup language that enables you to write provide text for text fields. Indigo does not support it yet, so the markup is removed when converted.
  • Links between pages: Balsamiq provides a way to specify links between pages. These are not converted yet.
  • Balsamiq always uses the same Font, and that font does not exist in Indigo. All converted mockups use the default Indigo font.
  • Several Balsamiq controls have a 'Disabled' style which is not imported.
  • Images with GIF format.

Balsamiq controls not imported by Indigo

These controls are not being imported, and are shown as rectangles with a red border in Indigo:

  • Vertical Slider
  • IPhone Device
  • IPhone Date Picker
  • IPhone Menu
  • IPhone Keyboard
  • Context Menu
  • Numeric Stepper
  • OnOff Button
  • Tag Cloud
  • Scrollbars
  • Splitters

Balsamiq controls imported by Indigo with some changes

These controls are converted but with some considerations:

Control Considerations
Arrow Indigo does not support curved arrows or arrows with two points, so those arrows are converted to straight arrows and to arrows with single point.
Callout Callouts in Indigo are always rounded, so the don't look exactly the same as in Balsamiq, where they can have a more squared shape.
Checkbox Indigo's checkboxes don't support having an Icon and the Underline font style.
Icon Most of Balsamiq's Icons are mapped to Indigo icons that are conceptually similar but they don't always have the same design.
Image Indigo does not support URLs in images or creating a Sketchy style for images.
ListBox Indigo's ListBox does not support Alternate Row Coloring or Header Row.
Button Indigo does not support icons inside Buttons, or PointyButtons.
RadioButton Indigo does not support adding icons or the underline font style.
Rectangle Indigo does not support dashed borders.
Tab Indigo does not support setting the alignment for the text inside the tabs, tab borders, scrollbars or background color.
TreePane Indigo does not support removing the border.
Window Window icons are not converted.
Grid/Table Indigo does not support multiple lines in rows, and does not properly convert column sizes.
Coverflow Coverflow is imported without images.
Label Rotated texts are imported without rotation .

These controls do not exist in Indigo, but are converted properly by composing existing controls:

  • ButtonBar
  • Breadcrumbs
  • CurlyLines
  • Checkbox Groups
  • Color Picker
  • Fieldset
  • Formatting Toolbar
  • Geometric Shape – some shapes are supported out of the box, and other shapes can be drawn using Indigo's Custom Shape control
  • LinkBar
  • MenuBar
  • PlayBack
  • RedX
  • ScratchOut
  • Tooltip
  • Accordion

Learn More

Here are some suggested topics: