Create Interactive HTML Prototypes with Tiggr

Tiggr: Web and Mobile Prototypes Tool - Part 2

    View the prototype in any browser (and mobile)

This is probably the coolest feature in Tiggr. Clicking the Web Preview button will open the prototype in any browser, so you can preview it and see how it will look. Make changes, and click Web Preview again. You instantly see the changes. Behind the scenes, Tiggr generates standard HTML/JavaScript/CSS files. Need to save HTML locally? That's also possible.

This is nice but that's not all. You can also share the prototype URL with anyone you want (to get feedback, etc.). For example, here is a finished mobile prototype, try it on your mobile device. Pretty cool, right?

Create interactive prototypes

One of the major and unique features in Tiggr is that you can create interactive HTML prototypes. What does it mean? It means you can use events such as "click" and "change value" and associate actions with them such as navigate to a prototype page, navigate to a URL, open/hide a pop-up, and more. Here is a list of all supported actions. (More are coming soon.)

Set HTML Attribute

Set Property

Navigate to Page

Navigate to Link

Open as Popup

Close Popup

When you view the prototype in a Web browser, it's (almost) like running the real application. Using events and actions, you are no longer limited to just knowing how the UI should look, you can also describe how the UI should behave. This is a very important feature since user interfaces are very interactive today.

Stop e-mailing, start collaborating and sharing

E-mailing prototype images is rather complicated and, well, not very cool today. That's why Tiggr allows you to collaborate on the prototype and share the prototype. During prototype design you can invite anyone (with different permission levels available). Your colleagues and customers can collaborate on the design in real time. There is even a chat feature inside Tiggr. This also works well if your teams are in different time zones.

Use advanced properties

As Tiggr allows you to create real HTML prototypes, you have access to all the same properties and settings that you would have if you were creating the prototype by hand. With Tiggr, you can set everything from font information to corner rounding.

Create and use page templates

Who doesn't need or like templates? As the prototype becomes bigger, making changes that repeat on every page becomes more difficult and time consuming. That's why we just introduced templates – a very frequently requested feature!. You will be able to save any page as a template and then use the template to create new pages based on it. How do you like this time-saving feature!

Custom components

Need to reuse two or more components multiple times? Now you can create a composite custom component to use anywhere in your project. The composite component will appear in Custom Components palette. To create such a component, just select two or more components and click Create Template button.


Collaborating and sharing the prototype was possible since the beginning. However, it can be very useful to be able to leave notes or comments inside the prototype for users to view later, such as "Change button label to "Save". Now this is possible with the Annotations features. Another cool and useful feature! To activate annotations, click Show Annotations at the bottom of the application.

Getting as close as possible to the real application

As you can see Tiggr is a rapid UI prototyping tool that allows you to create rich and interactive prototypes. No longer are you limited to just how the prototypes look, but you can define rich interactive behavior. Tiggr takes you as close as possible to the real application.

Create your first prototype today

Sign up (it's free) and create your first interactive HTML prototype.

You can always tell us what you think by visiting our website or Twitter.


Max Katz
Max Katz

What do you think?

JAX Magazine - 2014 - 06 Exclucively for iPad users JAX Magazine on Android


Latest opinions