Override text or image fill on a specific instance of a reusable symbol
NOTE: originally this request asked for the ability to override many different styles, not just images and text. If you want to override other styles, please upvote:
You may also be interested in these related requests:
- Override entire nested symbols: https://adobexd.uservoice.com/forums/353007/suggestions/19592509-nested-symbols-override
- Multiple swappable states inside one symbol: https://adobexd.uservoice.com/forums/353007/suggestions/13031871-add-multiple-states-inside-symbols
- Resizable symbols: https://adobexd.uservoice.com/forums/353007/suggestions/16939339-scale-resize-symbols-individually
Balsamic Symbol :
Any group of elements than can be named and re-used across multiple artboards.
Modifications to the symbol are reflected across all artboards that use the symbol.
It gets better - you can override part of the symbol - text / color / position - for a specific instance.
Any override does not get affected by changes to the symbol.
You can reset anytime your instance edits to the symbol state.
This feature saves an incredible amount of time.
Symbol overrides are now available! Download the June release of XD today to get access to bitmap and text overrides (as well as the Apply command, which will apply your changes from the selected symbol to all other symbols).
If you don’t see the update in the Creative Cloud desktop application, click on the gear icon and select “Check for App Updates.”
For me, the symbols are useless without overrides!
All of the above!
I might think about it a bit like CSS, changes cascade down. This would allow nesting of symbols and one-off overrides of symbols on an artboard. Last override wins basically. How to UX that without being confusing I don't know but it would allow a lot of flexibility in how people want to build their designs.
Just for the love of god do not copy how Sketch does this. Changing text in a pane on the right instead of inline on a symbol is always confusing. I don't know how many times I've double clicked text in Sketch to change it and ended up going to the symbol to edit, when all I wanted to do was change that instance of the text, not the symbol itself. I constantly have to context switch depending if it's a symbol or not and it's really annoying.
Whatever you do, keep changes to symbols and non-symbols consistent in how they are modified. Really you already have a good example of how to kinda handle this with Repeat Grid. Just pretend what you are repeating is a symbol and you're already half way there with the implementation I think a lot are looking for.
The most useful for me would be able to edit text inside a symbol then I could reuse a button as a symbol.
+1 That would be really useful. I'd be happy to have at least a similar feature like Adobe Illustrator's "Dynamic symbols". Where you can can have multiple instances of a same symbol and change the color separately for each one.
This is really common for icons and would love to have it.
Armando Scuro commented
clicking a symbol thumbnail from symbols pane, will show different options on inspector pane letting the user select what attributes they want as universal and what's not.
for example: check boxes for style, size, text, images ... and whatever elements are inside the symbol group. so say, if color is unchecked as universal, then editing it for an instance will only override it for this instance, and not the other symbol instances
when ungrouping a symbol, a pop up could ask what behavior does the user want the instance to revert to.
It would be awesome to set a textarea as variable text in a symbol. So that, for example, I can use the same button/text style and easily change the text within the button.
Sjur Grønningsæter commented
Overrides should be very flexible (some symbols will be the same, some with overrides, etc). You can’t force a pattern for overrides. Also, all other values and styling from the symbol, other than the specific override per instance, must be synced for change by the symbol. For example; if I change the text on a symbol, I still want the font, font size and font color to be synced to the symbol. If I change the text and the font size, then only the font and font color should be synced. Make it flexible and intuitive. I should also be able to reset my local changes to the symbol sync, individually. Do this right, and you will win! Easy as that ;-)
UX Director commented
Have you tried Sketch yet? I tried my best to stay with Adobe at work (Enterprise App Design) but the features and workflow in Sketch/Craft/InVision/InVisionSync and undeniably months or years ahead of your current platform. HOW DID THIS HAPPEN? I hope for the sake of Adobe and Digital Design you guys are burning and turning over there day and night to not only catch up but to once again lead in your own industry. Please do not become the Windows of your own niche. Stop asking us silly questions like what would we like to see. Hire the right product guys who are industry leaders and KNOW how this product should work. But don't ask for help when it's right in front of you in Sketch App already.
Jelle Spaan commented
I see this as something that could be solved, together with a lot of other feature requests, by having the possibility to make multiple variations for per symbol. The first variation should be the master and for each variation you can select which attributes are synced with the master variation of the symbol.
Variation attributes could be:
-vector positions in relation to each other
-size of the symbol
-connection to an artboard
@adobe: If you think this is a good direction please let me know and I will work it out as how I think it would be best to see it back in the UI of XD.
Lionel Crisba commented
Peter, all of the above. But the critical ones to support variations in state are the ability to override text, colors, images and position, the ability to reset to the symbol and to disconnect from the symbol.
Basic use cases are :
Top nav highlighted text / or active Tab.
Number of stars highlighted in a review.
A contact / movie / object card could be a useful symbol if all the attributes of the symbol can vary.
Joey Figaro commented
I've got a progress + heading group I've been passing around to each artboard and have already had to update 85+ instances for tweaks: http://joeysharesthings.com/3r382Q1I2W41
It'd be great if I could change the active bullet/step per artboard without affecting every other artboard's instance of the symbol.
XD needs to catch up to Sketch and then make it better.
Please take a look at some of the things symbols should be able to do:
UX Director commented
Symbols are useless unless you can override text!!, images etc. Why not release this feature at the same time? Now I am stuck using Sketch until you do. And I make Enterprise tooling decisions. We are spending 20k / year on CC and we are all using sketch because Adobe is so slow to catch up! Also, where is the InVision integration??? Common guys, stay competitive.
text colors and images for sure. think primary nav, it's on every art board but might need to change the style of the active link/button on each AB, just as a simple example.
I need to agree that the text override feature is a must. You folks are so close to making this my go to software for design. Keep up the good work!
So good, now this is way better than Sketch. The text override is a must though. Not being able to change the text element but instead having to break the symbol, kind of negates the purpose for having a symbol in the first place.
It could be that double clicking on a symbol thumbnail in the symbols pane would go to isolation mode and allows user to configure symbol's elements to either global or instance-based.
Outside of isolation mode, user can override image, color, text, and size in inspector pane based on their configured settings in isolation mode.
checkboxes in inspector pane allows users to perhaps remove text or image from a symbol's instance.
lastly, reverting an element in an overridden symbol instance should revert it to symbol's default unless edited in isolation mode which will affect all symbols
Zohar Telor commented
This feature is a must, i hate to create a symbol for every single change i make in one symbol.
Text, Color/Gradient, Image are great, and i like the idea of having the possibility to sync some of the overrides to the rest of my symbols.
Also i would like to have states for symbols, like Hover, Down, Selected Etc... and the ability to sync them.
in symbols where there's text line and an icon at the end of it, i want to be able to set a margin for that.
i think there's something like that in Illustrator.
And of course, Text styles!
Matt Ellinger commented
This is a wonderful addition and clever execution. Glad to see XD advancing the game.