Balsamiq Community Discussion

Design system with Balsamiq objects

Hello, has anyone created a design system which has Balsamiq objects? The customizable design systems I’ve seen, mainly Eva, supply Sketch objects corresponding to the code. In other words, we’d like to have a correspondence between a Balsamiq object (button, text entry field, etc.) and HTML/JavaScript/CSS code. As is depicted in the first figure in “Using Balsamiq Wireframes with Pattern Libraries and Frameworks”.

Hi @bwooster and welcome to our forums!

I’m not sure I have a single, spot-on answer to your question but hopefully others will chime in. I suspect you’re already seen it but there’s further discussion of Balsamiq and design systems in this piece: Using Wireframes with Design Systems

Along with a list of additional resources at the end of that article.

We also have some help in the form of Symbol Libraries for, e.g., Bootstrap in our user-contributed library of controls, Wireframes To Go.

Thanks @alasdair! I was not aware of Wireframes To Go.The Bootstrap set of Balsamiq controls is helpful. So those class names, e.g. bs-btn-lg, map to the Bootstrap component library, right?

Hey @bwooster,

Yes - that is my understanding.

Note that the templates and Symbol libraries in Wireframes To Go are mostly user-contributed (rather than created by Balsamiq) but I spot-checked a handful of them for you and they map to those specific Bootstrap classes/components.

Thanks! I understand that Balsamiq doesn’t guarantee the correctness of that symbol library.

Are there any best practices on handing off designs from Balsamiq to developers? Specifically, what’s the best way to convey the CSS class information explicitly, so developers don’t have to guess what class I used in Balsamiq? Should I just display the class name below the component, as in this screenshot from the Bootstrap library in Wireframes To Go? bs-btn-lg%20Balsamiq
Just wondering if putting all those class labels in the mockup will get overwhelming…maybe I’d put all the class labels in a certain color so they’re less likely to get confused with actual components in the wireframe…

cc @leon

Hi @bwooster,
I’m so glad to see that you’re trying out this approach.

My original thought on this was to use the symbol name in the property inspector. So, the developer could open the property inspector and look at the symbol names as they click on each control. Do you think that would work?
Leon_s_Space___Sandbox

Another idea is to create a separate document with all of the components and their labels listed on it that serves as a reference / key. You could even turn it into a PDF that you attach with the wireframes.

I’d also like to invite you to help define some best practices, for the benefit of the community. After trying this, we’d love to hear what worked and what didn’t so that we can pass it along. Maybe we’ll even write a follow-up article about wireframes and design systems that gets into more specifics.
Thanks, and good luck!
Leon

1 Like

Thanks, @Leon! Using the symbol name in the inspector could work; there are a couple hurdles:

  1. I think they’d prefer to just have a printout in front of them, rather than another program running
  2. Each developer would have to have a Balsamiq license

Having a separate document as a key could work, thought that’s more work for the designers, and it might not be obvious to the developers what type a given component is (for example, is the size of a button in the mockup regular or small?).

Another thought: We include the class labels in the mockup, then hide all the class labels except when we export mockups out for the developers. I see that

so what we could do is

  1. Add the class label (perhaps in an unusual color to make it clear it’s not supposed to appear on the screen in the actual web page) to each symbol
  2. Treat the class label as markup
    Then, when we insert the symbol in a mockup, the class label will show up if markup is shown, and be hidden if markup is hidden. So we can have markup
  • off for full-screen presentations (mockup click-throughs), building mock-ups, etc.,
  • on during export for hand off to developers.

That lets us easily show or hide the class labels without creating any extra mockups. Do you see any problems with that scheme?

1 Like

Hi @bwooster, I love that idea! I’ve always been a fan of creative uses of the ‘treat as markup’ feature.

The only issue I can foresee is if the labels overlap each other when some symbols are put close together, but that’s mostly unavoidable if you want to use the class names in the mockup itself. I don’t imagine it would be too much of a problem.

I say go for it and see how it works!

p.s., Just one clarification on my original proposal, users don’t need a license to view Balsamiq files. You can use an expired trial version to open up files, you just can’t edit them beyond the trial period. Just in case some of the developers would like to look at the wireframes inside Balsamiq.

Thanks @leon!

The only issue I can foresee is if the labels overlap each other when some symbols are put close together, but that’s mostly unavoidable if you want to use the class names in the mockup itself.

Yes, that occurred to me after I posted this. What we’re trying to do is put the class name within the symbol itself. It’s not always possible for small symbols.

p.s., Just one clarification on my original proposal, users don’t need a license to view Balsamiq files. You can use an expired trial version to open up files, you just can’t edit them beyond the trial period.

Ah, I didn’t realize that. Good to know!