Reusable symbols / master objects
It would be very helpful to have symbols in order to have reusable elements that can be updated in one place and have those edits instantly take effect in all instances/artboards in the design.
I’m happy to say you can now use symbols in the November release of Adobe XD!
Thanks to everyone who voted on this — it honestly does make a difference in making this happen sooner.
There are lots of ways we could expand on this initial set of symbol features. Please let us know your opinion by upvoting follow-up suggestions like these:
- Different text, color, or other properties in some copies of the symbol (like editing text in a Repeat Grid, for example): https://adobexd.uservoice.com/forums/353007/suggestions/13675224-override-text-color-etc-on-a-symbol
- Different size for some copies of the symbol: https://adobexd.uservoice.com/forums/353007/suggestions/16939339-scale-resize-symbols-individually
- Interactions/wires on objects inside symbols: https://adobexd.uservoice.com/forums/353007/suggestions/16943800-allow-interaction-wires-links-from-objects-inside
- States the symbol can switch between (like a UI component): https://adobexd.uservoice.com/forums/353007/suggestions/13031871-add-multiple-states-inside-symbols
- Reorganize your list of symbols: https://adobexd.uservoice.com/forums/353007/suggestions/16933993-label-and-reorganise-symbol-library
- Share symbols across documents or within a team (via CC Libraries, for example): https://adobexd.uservoice.com/forums/353007/suggestions/12930321-cc-library-support-share-symbols-assets
And as always, feel free to file new suggestions if you have other ideas that aren’t posted in UserVoice yet!
-
Anonymous commented
There is a definite need for assets that can be shared across files, or even within files for commonly reused elements like buttons, inputs, etc. Almost everything in my designs these days is a symbol or a style.
-
Janek commented
Yes, reusable symbols would be great.
Another example for a good symbol workflow ist PaintCode I think. http://www.paintcodeapp.com/documentation/using-symbols -
Aaron Cheng commented
I don't know if someone has used Revit, but I really hope XD can have the dynamic symbols like those in Revit. For example: you can set the padding and style for a button symbol, then you can reuse the button with different size but keep the same style and padding.
-
Brent Caswell commented
This would be great. I've found that layer comps in PS and symbols in sketch are both really useful but also don't seem to be mutually exclusive.
-
Dani Bacon commented
+1
1) Support nesting (which Sketch doesnt)
2) Support multiple instance property overrides (Sketch allows only text values)
3) Support states (as PS smart objects, but allow per instance state selection, which PS doesnt)
4) I would consider to somehow diff the editing of the symbol definition from regular object content editing. In Sketch its very common to mistakenly edit a symbol unknowingly screwing up other artboards using that symbol -
Nicholas McClay commented
+1 for something similar to smart objects in Photoshop
-
Andreas Galster commented
Very useful. Please don't forget implementing symbols that support interactions/referencing to other artboards. This would be a huge time saver and convenience feature to define a navigation for example.
-
Paul commented
Huge time saver if we can reuse symbols! +1
Thanks
-
Matt Z commented
A must for global nav!
-
Ron Frank commented
I think symbols with states would be especially useful for UxD. Sort of like the equivalent of mouse hover, mouse down, mouse up, etc.
-
Jay commented
I agree. Symbols that allow us to edit once and make changes across the board would be huge. An example, since there are no conditionals I currently need to multiple a single art board to show how the experience changes behavior. If the user adds a device but needs to hit back the back needs to go to a different (but exactly same looking artboard) than if they don't add a device.
If i have to change text on one of those duplicate artboards, as a symbol the text is changed on all, it's a hassle to change every instance and be confident that the change has been made across the entire UI.
Further Note: paragraph symbols would be way more awesome. I have a paragraph of lorem I apply a paragraph symbol to the lorem it then takes on the string in that symbol. Now whenever it is updated it updates everywhere.
-
Chad Hutchinson commented
Most websites and applications have some sort of branding. It would be very useful to be able to create a set of widgets that can be styled for reuse on new pages, screens or applications. These widgets should also be fully featured with interaction settings (i.e. if clicked then show object A) to all for demonstration of user interactions within a page, not just between pages.
Being able to organize sets of widgets in libraries is also key.
I feel this is a major shortfall of XD so far. Having to draw every element from scratch (and not have interactions) is very tedious and a major barrier to adoption. The only method of reuse is copy-paste which is borderline unacceptable these days.
-
Fe Lix commented
For me most important would be that the link stays alive. means i have a home button going to the landing page. i Change the Landingpage link, all other instances do have the same behavior! same other way around. change one symbol change all. + what @Aaron Wright said: Work on several parameters of one symbol, but keep the link A L I V E ! That should work better next Update.
-
Mikhail Nikipelov commented
What do you think about this: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13031871-smart-objects-experience ?
-
Anonymous commented
I vote for this feature 100x
-
Raj Ankur commented
Reusable elements will help is designing consistent layout, it should work like the same way color palette works.
User can pick the element with the same formatting again and reuse it, and whenever they make changes to it, the changes should be reflected everywhere.
There can be 2 modes - Duplicate or Inherit. In duplicate mode changes made should be reflected everywhere, while is inherit mode...I can add more things and they should not reflect in other element copies.
-
Bryan Rieger commented
Often you'll have assets/layers (when we eventually get them) that are repeated on (almost) every view. An easy way to share share layers across canvases would be most welcome to make it much easier to update everything at one time rather than do the copy/paste shuffle. See Omnigraffle for an example implementation.
-
christian.moore@mi9.com.au commented
Fantastic work guys!
Please consider adding 'Smart Objects' or 'Smart Groups' similar to Ps. It would be great to design and make changes to modules that would update on all duplicated instances. And of course 'Symbol' support would be fantastic.
Can't wait to see more!
-
Aaron Wright commented
You're describing symbols! Cast your vote here, maybe? https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12931467-resuable-symbols
-
Aaron Wright commented
Symbols are great, for sure. But I'd like to throw in a request to go one step further and alleviate some of the typical pain that UI designers face when building anything in a design tool. Mostly, having symbols that a very similar but different in subtle, selective ways.
Imagine creating an e-commerce app where you've got a "POST" symbol. It's got an image, and some text, and a coloured border to indicate what category it belongs to. It'd be amazing to duplicate that POST symbol and change the colour of the border, but still maintain the link to originating object. If I change the thickness of that border, they all change, but retain their custom colour (for example).
Sketch sort of has this with the ability to have text objects in symbols "ignore text value" so you can edit text across symbol instances and still maintain the link. I'm thinking XD could go further and allow all kinds of instance-based overrides. It'd be like the power of CSS and classes inside a design app. Amazing.