Insert a mockup by reference instead of copy...

  • Idea
  • Updated 3 years ago
  • Implemented
Archived

This conversation was archived and is no longer visible to community members. The community moderator provided the following reason for archiving: implemented with Symbols: http://support.balsamiq.com/customer/portal/articles/110439

I have been doing a lot of mockups that are all using the same components over and over again. The other day I had to make a change and had to edit about 15 mockups that shared the same component.

I would love to see a feature to "Insert a Mockup" - an external mockup as a reference. Changes to the original mockup would be reflected in any mockups that use it.



I realize this is a complicated feature with many implications such as an ability to orphan the inserted mockup; handle cases where the mockup is missing or renamed; not allowing circular references, etc. This feature would be made possible by a storyboard mode or project manager feature.

Still I wonder what others think of this idea? I think know it would save a lot of time.
Photo of Michael

Michael

  • 497 Posts
  • 37 Likes
  • happy

Posted 6 years ago

  • 128
Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
Hi Michael, thank you for the idea. Some people have called this "templates" or "master pages" in the past. I totally understand the pain, but I haven't had time to sit down and think of an elegant solution with minimal UI which solves the problem. One question: do you find that these common elements are usually in the background of other elements? If so, one way that you could achieve this is by using the image embed feature that's coming up:
1.create the master mockup
2.export the png
3.import the png as an image for other mockups, place it at the back and maybe even lock it
4.if you want to update the master, just update its bmml file and export the image again with the same name...the change will be reflected everywhere since images are linked and not embedded.

I'm not saying this is a great solution, but it might save you time until we come up with something better.
Photo of Michael

Michael

  • 497 Posts
  • 37 Likes
I guess it would need to have layering capability too.
Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
Ah, ok. That's a relief. So if you're just changing the base position of the group, why wouldn't my image workaround work? You can decide where to place the imported image right? Maybe a quick screencast of what I mean would help, let me know if you'd like me to make one.
Photo of Michael

Michael

  • 497 Posts
  • 37 Likes
Well, its a work around for sure. But I make this pitch as a product feature enhancement, not as a "need to get around my issue".

Like most I presume, I like keeping everything as mockups. Having to create an image and managing the changes of that image is a bit kludge. I guess this is why I was never into the import image feature.

Also the approach I outline is a self contained feature that would not always require the original source. A parametric UI model that would really speed up the way you mockup.
Photo of

  • 0 Posts
  • 0 Likes
I must be missing something, but where can I find the "image embed feature"?
Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
Hi tb, image embed is coming in 1.5: you can test a pre-release version of it here: http://www.balsamiq.com/products/mock...
Photo of Michael

Michael

  • 497 Posts
  • 37 Likes
To avoid problems by directly reading the original mockup XML each time, I propose to store the original mockup xml in the mockups that use it. When a mockup is loaded, balsamiq checks to see if the referenced mockup has changed. If so the user is prompted to take the update or orpan it.

Photo of Michael

Michael

  • 497 Posts
  • 37 Likes
This would be a great 2.0 feature.
Photo of Michael

Michael

  • 497 Posts
  • 37 Likes
Just thinking of this design a little more.

If the inserted mockup cannot be found when loading, the user could be prompted as follows:

Photo of

  • 2 Posts
  • 0 Likes
I would love this feature combined with the JIRA plugin!
Photo of

  • 17 Posts
  • 0 Likes
Just another vote for this. I started entering the idea - "UI Includes" - but this almost completely describes what I want to do as well. If I have 20 screens - and only 10% of the screen content changes, it'd be great to have the common template created once (and editable from one location).
Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
Hi wmiller, in 1.5 there's a way to achieve this using the image feature: http://www.balsamiq.com/products/mock... has a video in which I show it. I hope it helps!
Photo of

  • 17 Posts
  • 0 Likes
That'll sort of help for now - but requires a bit more work to prepare/sync them. The ideal would be the linked reference (or "include" as I think of it) where you modify once and it ripples through them all.

Thanks!!!
Photo of

  • 14 Posts
  • 0 Likes
I know this is an older thread, but I just wanted to reopen this discussion in light of the (hopefully upcoming) Linking Mockups feature (http://gsfn.us/t/1jkl). The problem with using PNG images as "masters" (as I currently do) is that links from images won't work. And I do find myself using masters for more than just background - I often use stacked masters to represent common UI panels. I don't think embedded mockups should be editable in the context where they are embedded, but it would be very useful to be able to embed mockups, much like images, and have the links in them work.

If this is not the right place to discuss this, do let me know :)
Photo of

  • 17 Posts
  • 0 Likes
Exactly Marat - the PNG image feature is handy for some scenarios - but in mine, I'm making upwards of 40 screenshots to cover a whole Win32 application UI - and there is an outer window frame that stays consistent, and a few inner panes that switch sometimes, but are largely consistent - hence my request for includes. I want to change these guys once, and have it reflected in all the BMML files without having to make the change and export a PNG.
Photo of

  • 9 Posts
  • 0 Likes
This would be a really great feature, however here's another idea on how it could be implmented (on the AIR version anyway):

'Insert mockup view' to browse and select an existing mockup which grabs a bitmapdata of the selected mockup and inserts it onto the page.
Then you monitor the source mockup file (either datemodified if that's avialable or file size) and if that ever changes simply grab another bitmapdata. That way you don't need to worry about deleted files or dependencies etc.

Still not the easiest thing in the world to do but thought I'd add another vote for it and another idea :)
Photo of Gareth

Gareth

  • 13 Posts
  • 0 Likes
Would love to see this feature, it would be a real time saver. The import would have to be a bmml file so that any linking in the imported file would still work (thinking menus).
Photo of Jon Kern

Jon Kern

  • 7 Posts
  • 0 Likes
I also posted similar idea: http://getsatisfaction.com/balsamiq/t...
Photo of Jon Kern

Jon Kern

  • 7 Posts
  • 0 Likes
When doing simple UI design to show some dynamics behind a UI, I often make many mockups that reflect different states of the same page -- to show it in different conditions of usage.

Currently, I manually cut and paste to keep the core common aspects of the page in synch as it goes through design variations.

It would be more efficient to have the ability to designate a "parent" mockup(s) as a base layer. For example, the parent mockup might contain the outer frame, some standard buttons, etc.

Some subfeatures:
* Changes to the parent propagate to the children
* Edit a parent within a child? My gut says to just allow it, and have it auto-update the parent mockup. (The alternative would be small workflow to require acknowledging you want to edit parent, if not, do you want to merge parent into child and edit? Meh! I think this makes it too complicated to start.)

Implementation might be as simple as considering the inclusion of a parent bmml file (amost like an include).

See snapshot.

This reply was created from a merged topic originally titled
Mockup Inheritance.
Photo of

  • 2 Posts
  • 0 Likes
Master Elements would be helpful so that I can mockup a navigation structure on a single page and, if I change it, the changes are reflected on other pages.

This reply was created from a merged topic originally titled
Master Elements.
Photo of Roland

Roland

  • 58 Posts
  • 4 Likes
I would like such a feature very much.

I was thinking about something along those lines:
- Add a new element you can paste into any mockup, which is called "component"
- This component may contain any bmml-code, but is not directly editable.
- So if you want to change this component, you select it somehow, you are sent to the code of this element as a separate mockup, where you can change everything.

I guess, this way you can build in a very modular way, without affecting the general workflow of the application too much.

Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
Hi Roland, this is very similar to what I have in mind!
Photo of Jaanus

Jaanus

  • 28 Posts
  • 5 Likes
me too :) good points.
Photo of Arnaud

Arnaud

  • 1 Post
  • 0 Likes
Hi,
This solution is the best one I've read concerning reusing other mockups. It is simple and the user do not have to bother with complex concepts as inheritance, templates or master pages.

The user could simply use a new UI component, called "mockup" for example, that points to the mockup to include (with relative reference as for images). That component works like any other ones, except that he is neither directly editable nor resizable.

I really hope that this kind of function will come soon since the trick with the background image prevent using the links defined in the included mockup.
Photo of

  • 9 Posts
  • 0 Likes
Hi Peldi,

any sort of ETA on this? I've just done an excercise on a huge project and things started to get wildly out of control as I had so many similar views that all ended up slightly different which has led to a lot of confusion.

Other than that tho mockups has been an absolutely amazing tool for us on a number of projects now.

Can't wait for this to be implemented!
Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
Hi Danny, well it won't be before the end of September, it's a tricky one. In the meantime, have you seen this workaround? http://www.balsamiq.com/products/mock... - I hope it helps!
Photo of

  • 9 Posts
  • 0 Likes
Thanks Peldi, yes I am aware of that and I do need to be more regimented in using it but the workflow was a bit of a pain as when I needed a change I'd think "i'll just make it here then export it to an image later instead of going through the whole export/import process" which of course, I never get around to doing.

This is obviously somewhat lazy on my part and now you've prompted me and i've experienced the pain of not doing it I'll be more strict on this.

But I guess the rest of Mockups just lets me be lazy and just get on with it! ;)
Photo of Giacomo 'Peldi' Guilizzoni

Giacomo 'Peldi' Guilizzoni, Official Rep

  • 5887 Posts
  • 457 Likes
A quick note just to make sure: once you make a change and re-export it, you won't need to re-import the image in all the mockups that use it, it will magically get reloaded (watch the video closely, it's tricky!) :)
Photo of

  • 9 Posts
  • 0 Likes
This workflow is fine for the creation process, however when viewing in presentaiton mode the images do not load instantly which really distrupts the flow of the presntation when trying to demonstrate subtle UI changes. Could this be optimised at all in the meantime?
Photo of Jaanus

Jaanus

  • 28 Posts
  • 5 Likes
I just thought of how to do this elegantly in the UI. I also share the need of having common components (e.g a menu) shared across pages, and I want to edit it once and change on all pages:

in the top, you have categories like "All", "Big", "Buttons" etc. The last one could be "My Components", where you have your components.

By default it is empty, but when you are working on any mockup, you could "Save As Component", and it then shows up in that category. And then you can just drag things from My Components onto canvas as you normally would, but can't edit them. If you want to edit, you have to open the component by super-triple-doubleclicking or doing some other special action on it, and then you edit it on the canvas.

On the disk, all the components are just normal bmml files in some special location (App Support etc on Mac).
Photo of Scott

Scott

  • 15 Posts
  • 0 Likes
+1 for My Components
Photo of Jaanus

Jaanus

  • 28 Posts
  • 5 Likes
re what Nathan S is saying — yes, this would also play nicely with MockupsToGo.net, you could integrate it somehow the same way as “My Components.” Just need to be careful about the distinction between the two.
Photo of Colin Anderson

Colin Anderson

  • 0 Posts
  • 0 Likes
I would love this feature. A real time saver.
Photo of Colin Anderson

Colin Anderson

  • 0 Posts
  • 0 Likes
I would love this feature. A real time saver.
Photo of Colin Anderson

Colin Anderson

  • 0 Posts
  • 0 Likes
I would love this feature. A real time saver.
Photo of smilechaserS

smilechaser

  • 1 Post
  • 0 Likes
This would be awesome!
Photo of NeroN

Nero

  • 2 Posts
  • 0 Likes
I realy like the idea of michael, any news on how and when it will be implemented?

The image way is not a soluttion, because the links are not in the image.
Photo of Roland

Roland

  • 58 Posts
  • 4 Likes
Check their blog, they added something very simliar, although it's only for pictures, but still workable.
http://www.balsamiq.com/blog/2009/09/...
Photo of NeroN

Nero

  • 2 Posts
  • 0 Likes
As I already explained, the picture solution is not an option because I can not use the links that are defined in the template. Thanks anyway
Photo of Jaanus

Jaanus

  • 28 Posts
  • 5 Likes
Yep, I hope “My Components” will work similarly to how they describe assets in that blog post.
Photo of AndiA

Andi

  • 348 Posts
  • 20 Likes
It gets to complicated. Just a simple "insert mockup" with a link to the original. If the inserted mockup changed, use Michaels dialog:



If the linked mockup is missing, don't ask, just show the last inserted. No change of size, no links from the original mockup. Keep it plain and simple and we might get this feature.
Photo of removedR

removed

  • 41 Posts
  • 1 Like
Including existing BMML files in the background is the one feature I keep wishing I had more than anything else. Sometimes importing the PNG file of he background wireframe is okay as a work around but it is just a workaround and there are many times when the absence of the links from the original wireframe means that this method just doesn't work.
Photo of Geoff Bowers

Geoff Bowers

  • 20 Posts
  • 1 Like
Just bumping this thread again. Would love this feature. As soon as you start building anything beyond a couple of screens "widget" reuse becomes critical.
Photo of robinR

robin

  • 16 Posts
  • 0 Likes
Another vote for this.