Allow interaction wires/links from objects inside a symbol
I was so excited about the new symbols feature that I made all of my navbars in a design a symbol. This may be one of the most obvious uses of symbols, since every page will almost always have the same navbar. But you can't connect objects inside a symbol. Therefore, you can't connect nav items, icons, logos in a nav bar.
Either allow connects for objects inside symbols, but don't propagate them in all instances, or DO propagate them in all instances. But you HAVE to be able to connect objects inside symbols in prototype mode.
Otherwise, we can only get halfway to easily and efficiently editing UI elements like navbars, sidebars, and such.
Thanks
With this month’s symbol overrides feature, you can now wire from within a symbol.
-Elaine
-
Toon Van de Putte commented
I think the 'override' approach (define links in the symbol, but allow users to override them by redrawing connections) would be confusing in practice. I would have a per symbol type setting, where a symbol's connections can be either 'global' or 'local'.
That way I, as a user, can easily see if a symbol's connections are applied to all instances or only to that particular instance. If this can vary per instance and per connection, I think the advantage is limited. -
Alvaro commented
Allow elements of a symbol to link to other artboards and that are stored when you repeat the symbol
-
Michael Pierce commented
@Peter the override sounds like a good solution. First it's global but then if there is a specific artboard that you get to where you want it to go somewhere else you could redraw the connector to rewire it
-
Stevo commented
I noticed that when I'm designing a website in Adobe XD, I found it quite tedious creating a linkage between the different artboards. Especially the master navigation that always links to the same artboard from different artboards.
I like to have a feature that can reuse the linkage for the master navigation. So I don't have to waste time linking them again and again.
It could be as simple as duplicating the master nav bar multiple times with the linkages applied onto other artboards.
This will definitely save time and increase efficiency.
-
James commented
Hey guys, Can you up-vote copying and pasting of prototype links generally too please: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13041930-copy-paste-should-preserve-interaction-wires-links
Cheers James
-
Tegan commented
Yes yes yes to this!
As a start it would be great to make a symbol that has persistent links so I don't have to relink them every time. Marvelapp does a great job of this, would be great to see it in XD.
-
rob w commented
I would say propagating across at minimum. It really hinders the purpose of using this as a layout presentation for clients if you can link up your shared navigation object. It makes for an awkward walk through, and pretty much limits us to just using a static PDF.
-
Simon commented
Completely agree with this! Not being able to DO anything with a symbol once created seriously limits it within a UI application. After all, most of the time within XD, if you need a symbol, you need it for repeating common UI tasks like navigation. I think it should default to link propagation for all instances, but with the ability to add overrides on specific pages. It would be nice too if a symbol could have configurable elements per instance (sort of like PS layer comps but within a symbol) giving the ability to hide certain elements on a per page basis. Great start and direction so far though. However, XD is not quite yet my goto tool, but I would like it to be. keep up the great work guys.
-
Emiliano commented
I have the same menu on header and footer across the website. So, It would be ideal to create the header and footer once and duplicate it across all storyboards while maintaining the linking of each tab.
Or another more complex/automated feature would be to add a special ID on such menu tabs and then recognize the similarities in text and automatically link it to story board with that same name.
-
Ben commented
I agree with comments that it needs to be both - set global links for items in the symbol but allow a local artboard override.
-
Jassim Talat commented
I think it should be both - single linking or instance linking. It is possible in prototyping tools as invision or marvelapp, where you can create a single link or make that instance link (aka hotspot template). This is very crucial in prototyping.
So maybe in the prototyping mode - user is able to edit a symbol, and assign a single link, or assign an instance(hotspot) to it.
Invision / Marvel also allows user to see all list of hotspot templates, like a library which user can simply switch on or off for each page. A quick method of applying or removing instances/hotspots. So maybe an instance/hotspot library in prototype mode would also be helpful.
-
Trevor Martin commented
Yes this is necessary! I am really impressed with where Adobe XD is going, but being able to prototype within symbols would be one of a few upgrades needed before I go from liking to loving it. This would make prototyping menus much less tedious.
-
Tim Harwood commented
+1 - just about to go back through the doc I just updated, and un-symbol everything to make it 'work' again : /
-
Tim commented
I agree with the others. Using one instance of a menu with the same links is something often needed!
-
paraiden commented
I think you'd want to propagate them to all instances, with perhaps the option to override further down the backlog. Logic is that (navigation example) I want a symbol to operate the same way with each instance. If I want an override in the short term, I can employ a duplicate of the symbol (e.g., "nav.loggedIn" vs "nav.loggedOut").
The future override however, would be ideal—also for text values (one of the few things that Sketch is doing right at the moment)
-
Josh Curtis commented
I say let us have the option to propagate please. Most of the time, propagating the connects will work just fine such as creating navigation or menu symbols globally, but sometimes there may be a need to have variant connects within a symbol when it comes to context.
I may search for an item and tap on it for details, but I may want to be taken back to my search results when tapping a back button in the nav symbol.
-
Anonymous commented
This is extremelly important if you want to actually use symbols for something. I think nav is the most natural use of symbols, but now it basically cannot be done, because you are not able to make the prototype links.
-
Kjell Ruben Strøm commented
I would say, automatically apply universally to all copies of the symbol. Then you have a working menubar without having to reconnect all the time.
-
Matt Ellinger commented
I've been wanting this one for a while. Excited to see how it works.
-
David Knell commented
Also, copying+pasting objects that have wires/links should, I think, retain the link. If you think about it, an object's link is an attribute of the object, so when I copy the object, I expect to paste all its attributes. Thus, copying+pasting (or duplicating) an entire artboard should duplicate all links each object on that artboard has. This is especially true when you think about WHY you would want to duplicate an artboard: to reuse elements on it (navbars, sidebars, basically everything except what you're going to change). In this use case (aka, most use cases for duplicating) I would want all links to be duplicated as well.
For the record, I too prefer propagating wires/links by default, in both symbols and copying+pasting/duplicating. Then, in addition to adjusting a symbol instance's text and color, you can override its link.
Also, Justin Wilden brought up States inside symbols (which, PLEASE please do!!!) I envision the current special Symbol folder and inside it three (for example) special State folders, one for each state. The top State folder is shown by default (and the rest are hidden), but you can right-click an instance of a symbol and change it to one of its other states. What this has to do with this topic of linking: I would hope that you could link a symbol to one of its states. That way you can have things like switches, dropdown menus, text in text fields, hover states for buttons and links, click to enter edit mode on a task or something, checked checkboxes, basically all the things!!! Seriously, states and linking between states would be so rad!!!