Loading Profile...
Insert a mockup by reference instead of copy...
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? Ithink know it would save a lot of time.
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
I’m happy
47
people have this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
-
Inappropriate?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.
10 Comments
Add a comment
This answers the question
-
Thanks -
Thats an interesting approach, but the position of the components change, so I don't think this would work for me, or for most people. Photoshop has a feature just like this called "Smart Object".
I have been searching GetSatisfaction and don't seem to find other requests using the keywords you gave me. -
Hi again. Maybe those requests came via email, that's why they're not here. If only everyone used these forums! :)
I will take a look at Smart Objects, it sounds pretty complicated if you can edit the pieces of the master page / template! -
Would it really be that complicated? I just see it as a handler when opening a BMML file.
Using the insert mockup feature would be the same an import mockup. With the exception that the BMML section is wrapped around an extra XML tag. The XML tag could have a parameter with the file path/name of where it came from. When the user loads a mockup, Balsamiq reads this XML tag. It compares the tag innerXML with the original referenced mockup xml. If they are differenct, the user is prompted accordingly. If the user chooses to update, then the innerXML is replaced with the referenced XML contents. If the user wants to orphan it, the extra XML tag is replaced with the innerXML. -
If it's a straight import then there are no issues, but if one is able to then edit (move, resize, delete!!!) pieces of the imported mockup, the diff and update becomes really complex, don't you think? Or maybe I misinterpreted your "but the position of the components change" comment?
-
You would NOT be able to edit the inserted mockup once you insert it. It would behave like grouped set. You can alter the position (x & y). But you cannot edit it. You would require the user to open the original. Maybe the property panel could have a button to open the original.
-
I guess it would need to have layering capability too.
-
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.
-
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. -
I must be missing something, but where can I find the "image embed feature"?
-
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...
-
Inappropriate?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.
1 person says
this answers the question
-
Inappropriate?This would be a great 2.0 feature.
-
Inappropriate?Just thinking of this design a little more.
If the inserted mockup cannot be found when loading, the user could be prompted as follows:
1 person says
this answers the question
-
Inappropriate?I would love this feature combined with the JIRA plugin! -
Inappropriate?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).
I’m giddy
1 Comment Add a comment
This answers the question
-
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!
-
Inappropriate?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!!! -
Inappropriate?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 :)1 Comment Add a comment
This answers the question
-
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.
-
Inappropriate?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 :)
I’m excited
-
Inappropriate?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).
I’m hopeful
-
-
Inappropriate?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.
I’m pumped
-
Inappropriate?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.
I’m confident
-
Inappropriate?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.
I’m confident
3 Comments Add a comment
This answers the question
-
Hi Roland, this is very similar to what I have in mind!
-
me too :) good points.
-
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. -
Inappropriate?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!
I’m anxious
1 Comment Add a comment
This answers the question
-
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!
-
Inappropriate?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! ;)1 Comment Add a comment
This answers the question
-
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!) :)
-
Inappropriate?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?
-
Inappropriate?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).
I’m hopeful to get My Components
3 Comments Add a comment
This answers the question
-
I like this idea from Jaanus! But any implementation of this idea would be a HUGE help!
-
I like this idea --- and I'm in agreement with Sara --- any of the ideas here aside from the export as png would be really great for me. This last one would work really well with my own personal workflow as I was already looking for a feature like this figuring it existed somewhere. I was thinking I could import the bmml files from mockupstogo.net in the same way --- I need to learn more about how these work but I love this idea of my components ... I think I like Mockup Includes too. Reminds me of Homesite's "my snippets" code pieces you can reuse and Wordpress's new "Widgets" features that allow you to drag an existing widget to a secondary area to save the settings and reuse it. These type of design features are much more common in Print design programs like Indesign where you "place" files and just like Michael's concept if there's been a change to that linked/placed file you are alerted to update it. I could see both options being viable, having a folder of "includes" for a specific project. And the "My Components" feature would definitely need some sort of folders or sub sections, because some of them you might want to build to reuse globally on all mockups and some might be just for a particular project to be reused.
-
+1 for My Components
-
-
Inappropriate?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.
I’m frustrated
-
Inappropriate?Check their blog, they added something very simliar, although it's only for pictures, but still workable.
http://www.balsamiq.com/blog/2009/09/...1 Comment Add a comment
This answers the question
-
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
-
Inappropriate?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. -
Inappropriate?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.
I’m hopeful that Peldi is currently working on solving this problem
-
Inappropriate?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.
I’m excited
1 person says
this answers the question
-
EMPLOYEE
