👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Help Us Design the “Components” Feature

The ability to create components and re-use them across different mockups is one of our most highly requested features.

Some people call this "master templates", others call it "reusable widgets". We're going to call it "Components".

It all started with Michale Bourque's request a year ago...we wrote two FAQ answers about it showing a workaround to achieve part of it using images, but those approaches don't quite cut it.

We are finally ready to tackle this problem head-on, and we'd like to ask for your help.

We created a public myBalsamiq project containing our ideas for a possible implementation of the features that we think will collectively solve all the different use-cases related to reusing objects.

If you could take a few minutes to look around and give us feedback on it (by leaving comments under each mockup), we'd appreciate it.

We also included a draft of an implementation roadmap, with releases along the way. That's the mockup I would start from.

Here's the link to the project: https://our.mybalsamiq.com/project/143

Send it to your UX-savvy friends! 🙂

We are eager to get started on the implementation, so if you have some feedback, don't be shy! 🙂

Incidentally, this will also help us test myBalsamiq, so if you hit any snags in the process of reviewing and commenting on the mockups above, let us know! 🙂

Together we can make this very important feature as good as it can be. We hope you'll want to pitch in with your ideas! 🙂

Onward!

Peldi for the Balsamiq Team

Leave a Comment

Comments (20)

  1. Hey Chris,

    This eventually became our symbols feature.

    Here is the documentation for that:
    myBalsamiq documentation: https://docs.balsamiq.com/mybalsamiq/symbols/
    Mockups 3 for Desktop documentation: https://docs.balsamiq.com/desktop/symbols/

    Sorry about the broken link. We closed that project out a while ago. We will get that fixed!

    If you have any questions or need help with anything, don’t hesitate to give us a shout: support@balsamiq.com

    Happy Wireframing!

  2. What is happening with this? Also, the project link is broken.

  3. Is this not available in the Confluence plugin? I do not see the option “Convert to symbol”.

    Thanks,
    Farhad

    [Peldi: not at the moment, no]

  4. Any update when this will be available? One of the few things preventing me buying a license…

    [Peldi: Hi Kevin, we shipped this a while ago, it’s called Symbols: http://balsamiq.com/support/documentation/symbols for details]

  5. j’utilise mockup et je ne peux plus m’en passer !

  6. Any updates on this? Estimates when this will be ready?

    [Peldi: how about right now? http://blogs.balsamiq.com/product/2010/11/23/pre-release-symbols/ :)]

    Luis Silva
  7. I bought Mockup a year or so ago but havent used very much because of this missing function. I love everything else. When I saw this was scheduled, I went ahead and bought 2 more licenses. I can’t wait till you get this done. Please keep me on the list or add me to beta if possible. I am suing the desktop version.

  8. Sorry but if you in Import simply add a select (import bmml/ link bmml) e in bmml add a new syntax to “include” bmml. No?

  9. This is a great feature and I need it as soon as possible.

    First, the background. I plan to generate code from the BMML file and need to provide my end users a predefined set of controls for designing mockups that are linked to my code generation metadata repository. My use case is for business people with nothing more than Office document experience to design their own forms.

    Second, the semantics. What is a component? My definition is: A collection of fine grain objects. While a BMML file certainly is a component of fine grain objects, the objects are fixed to the image feature and the embedded control objects. To me a BMML file is the result or output of using design components not a design component itself. I can manage to copy BMML files and parse them on my own, what I need is to provide my own semantics and controls without modifying the embedded controls.

    The implementation: In my opion, this feature would best be implemented by allowing subclassing of the embedded controls into my own library that I can choose to organize however I need to. Visually turning off the embedded controls, installing my own control library, and relabeling the organizing buttons Big, Common… to me is a more reliable way to provide components and allow for integration with external systems at the same time.

    Alternative: As long as I could choose to not display a particular embedded control, I could cross reference the embedded control in a BMML file to my id number this feature would satisfy my most pressing need.

    Thanks for your consideration.

  10. I have a comment about how I would like to use this feature and also a potential issue that would keep me from using it.

    I would like to use this feature to display an accordian on all of my pages. This accordian would contain links to other pages. The user uses this accordian to navigate around the site via its linking capabilities. By doing this, I can do some usability testing of my site while it is still in the design phase.

    I want this feature because during the design cycle, adding and remove pages is rather common and for a large site, very tedious if I have to visit every page to make the same changes.

    ISSUE: For this to work however, I would need the ability to have the accordian show a different selected entity on each page.

    NOTE: I cannot see the graphic on the left either.

    [Peldi: Thanks Dave. We’re definitely going to support your use-case, it’s the most important one! :)]

    Dave Perkins
  11. I see the comments down the RHS of the screen, not grpahic on the left. I have IE8, Win7 and Adobe Reader 10

  12. Please consider adding live data grids and Ajax state transitions. Thank you for all the great work you are doing!

  13. Same here, constantly displays “myBalsamiq” progress bar at 100% and proceeds no further. Running Win7 x64 and tried on both FF 3.6 (with Adblock Plus) and Chrome 5.dev_latest (no extensions installed). Cookies & JavaScript enabled but still no joy.

    [Peldi: we’re looking into this right now, thanks for reporting it!]

  14. Well, I’ve the same problem as Hu. I don’t see any content.
    Mac OSX 10.6.2 with Opera or Safari. Screenshot is on the way.

  15. Sorry…. but I cannot see anything but a loading graphic that says “MyBalsamiq”. I am on Windows 7, FF3.5.8, Google Chrome, Safari, and IE 8 (the loading graphic doesn’t even show up on in IE8)). I am running the debugging version of FP 10.

    [Peldi: hmmm, can you send me a screenshot of what you’re seeing please? peldi@balsamiq.com]

  16. Pingback: Wireframes Magazine » Help Design Balsamiq’s “Components” Feature

  17. Peldi – yea, using a different browser (no session) worked great.

  18. Peldi – FWIW, I get this when I go to the mockup: http://drp.ly/uaKck

    [Peldi: that’s because you’re logged in as a registered user for another account. We need to fix that, but for now can you try another browser or logging out?]

  19. Hey Peldi,

    The interface looks great, you should take a look at this:

    http://www.zurb.com/article/304/behind-the-scenes-building-the-new-visual

    which they have a demo of here:

    https://zurb.notableapp.com/website-feedback/10696/Applecom-Public-Post/screenshot

    I think something like this may be important, sure a summary is great, but to outline specific items on your mockup should be a key element(if possible).

  20. Peldi,

    Went to that link, after clicking two images I get timeout exceptions. It no longer appears to be working, to much traffic maybe?

    Eric

    [Peldi: hmm, that’s not good. It all seems to work well from over here. Where are you located? Can you try again please? Anyone else having the same issue?]