Toggle navigation

Using Balsamiq Wireframes with Pattern Libraries and Frameworks

Design Systems, Pattern Libraries, and Frameworks simplify development and relieve pressure on developers to style user interface components.

While wireframes (low fidelity, non-interactive) may seem like an odd pairing with design systems (high fidelity, backed by working code), they can actually work quite well together!

In an article called "Using Wireframes with Design Systems" we describe how they complement each other, given the right organizational framework.

Here is an excerpt from the post and some images showing how Balsamiq components can be "mapped" to a design system or framework:

The main advantage of pairing a pattern library with Balsamiq is that it can free you from worrying about look, feel, and behavior when designing yet provide pixel-perfect renditions of the final product components.

Read the full article here.

And, if you use Bootstrap as your framework, you can use our Bootstrap project starter templates.

Leon for the Balsamiq Team

Leave a Comment

Comments (2)

  1. If someone would have made a balsamiq, that would produce a bootstrap code by single click or bootstrap wysiwig tool, that would have balsamiq sketchy style and easy-to-use, he would immediately got me. Now this is the reason, why i am often NOT using balsamiq, because i do not want to spend two times the work.

    BTW what about new balsamiq for desktop? you have prommised it on June

    • Hi Tomas,
      I understand your concern. We would also love to be able to automatically convert Balsamiq wireframes to bootstrap code! It is a big task though, and it’s outside of the scope of our product focus. We welcome others to create this though, and on our Extensions page you will find a few who have created importing tools.

      You could also try a tool like Jetstrap for a bootstrap wysiwyg tool.

      As for the next version, it is in active development and on its way. Sorry for the delay! Thanks for your patience.