Adding responsive background images inside bootstrap cells

George Abraham / Tuesday, January 06, 2015

We added the following new features in Version 4 (update 1):

Background Images Support for Bootstrap Cells

In version 4, we introduced support for Bootstrap-based responsive layouts. Now you can also specify a background image inside a row cell. 

Set Bg Image

Three sizing options are available:

  • Stretch (fit to height of the image)
  • Stretch to fill (proportionally scales image)
  • size to image

Generate HTML Code Assets from Responsive Prototypes

The responsive grid layout system by Bootstrap is powerful. However, there is a learning curve for specifying directly as HTML markup. For instance,

 implies that this particular row cell will be 12-column wide on xs(phone) and 6-column wide on sm(tablet) form factors.

With Indigo Studio, you create the responsive layout visually. And just as easily extract the HTML complete markup for a UI state. To view the HTML, before you share your prototype, check the Enable generating HTML Code Assets option in the share dialog. This will enable the view code assets option in the player toolbar.

 

If you want to try this out, open the Responsive Blog Page project available in the samples folder. We added this sample in this update too. You can get to this via the Application Menu > Samples.

View Code

Create New Designs from the Project Tab

You could always create new documents from project tab's context menu (right-click). We have now included this as an inline option on the project tab bar ; very similar to how you create new tabs in desktop browsers.

New Documents

List View Option in the Project Home

We added the ability to view the project documents in a list style.

Project Home List

"Start a New Project" Option in the Application Menu

Indigo Studio uses the concept of a Project, which contains all the related design documents (screens, screenparts, storyboards) and assets. We usually advice one project per prototype unless these are iterations of the same one. In which case, you can create sub-folders from the Project Home view to organize your designs.

We made some changes in the application menu to reinforce this structure, and now the initial invite is to create a New Project before you create a new screen. This helps set the right expectation for everyone designing prototypes with Indigo Studio. Once you create a New Project, you can create new design documents from the project home.

Start New Project

How to get this Update?

Here's how you can update the version of Indigo Studio installed on your machine:

  • If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
  • If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness!

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

View Release Notes