Importing Balsamiq Mockups
Sketch and Balsamiq integration
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!
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.
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
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.
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
These controls are converted but with some 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:
- Checkbox Groups
- Color Picker
- Formatting Toolbar
- Geometric Shape – some shapes are supported out of the box, and other shapes can be drawn using Indigo's Custom Shape control
Here are some suggested topics: