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.
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?
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…
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?
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!
Thanks, @Leon! Using the symbol name in the inspector could work; there are a couple hurdles:
- I think they’d prefer to just have a printout in front of them, rather than another program running
- 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
- Balsamiq has a button to hide markup or show markup , and
- it’s easy to treat any component as markup,
so what we could do is
- 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
- 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?
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.
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!