Add multiple states inside symbols / smart objects / components / animation / interaction
What do you think about something like this:
Design mode while smart-object selected can show one more tab at app header with smart-object name. In the appearance panel at the right adds some fields while smart object is selected.
To edit smart-object you should open tab with it and work as before, except that artboards name is the name for different state
And You can place another smart object in a smart object ;)
Dear XD Community -
I’m glad to announce that we have introduced the ability to add Interactive Component States in XD 24. This means that you could now add and manage your component states variations from a single component while enabling you to define Hover and Tap interactions between them.
We also preserve those states and interactions when you use those components across other XD documents. This means that you could have a single source of truth (Sticker sheet) for all your design system components with motion and interactivity baked into them. Any changes made to your master components in your source document will propagate to all linked components in all your projects so that your components are is always in sync.
To learn more about component states and how to get stated with them please check:
Watch out for many more improvements in this area in the coming months.
But in the meanwhile, please give it a try and share with us the areas that you would like us to further improve upon or invest in.
Could be very nice to have the possibility to animate an "embeded animation" ("incrustation" in french).
The idea behind this is the possibility to create controls / symbols with autonomous animations which not necesseraly depend on the window / page which embedded the control/symbol.
Hope you understant :).
Shahar Erez commented
Some objects always behave the same (when tapped, toggle buttons grow or change color, for example).
To save a great deal of time having to re-wire (re-program) every object each time we work in a different artboard, it would be great if we could give certain objects "personality", so that no matter which artboard they are in, they always have the same behavior when touched.
It'd be nice if there were a way to create an auto slider for a landing page. Like shown here (https://www.youtube.com/watch?v=4zxefOaKVmQ), but functional, and without the need for buttons.
Perhaps simply enable time triggers for the transition between art boards and let auto-animate do the rest.
(I'm using 220.127.116.11)
Andrew Woodfield commented
This is a necessity.
Still in the backlog...unbelievable! This is the top feature of every UX/UI tool and the main advantage of Sketch. I don't get it.
How is this not the top feature you're working on ??? - this is the main advantage of Sketch - wake up.
Jean-Claude Tremblay commented
1. Adobe XD (January release 2019)
2. In Photoshop, create a layer with images and convert it to Smart Object.
3. Create a CC library , and add that SO layer.
4. In XD open the CC library panel
5. Drag the Assets (the SO layer image)
Expected result: to be te image in high resolution
Actual result: Image is placed smaller and ultra low res.
Conclusion: SO internally saved in .PSB format, are not supported when placed Via CC library.
Joseph Farruggio commented
Requesting the ability to position an overlay relative to another object rather than the artboard. If you move the anchored object, so does the overlay.
If you position an overlay to align with an object, and then later that object moves, now you need to remember to also move the overlay's position.
Create drop down action for menu items on click
Daniel M. Melo commented
Yes! We need this! Even the old Fireworks CC had the options to add different "states" for pages and stuff...
Show tooltip when the user pass the mouse at some hyperlink or icon button
WHY ADOBE HAS NOT RELEASE THIS?????
WE NEED EXPLANATION!!!!
WE NEED THIS FEATURE A LOT
FOR MORE THAN 1 YEAR NOW IN BACKLOG
PLEASE GIVE US
V Sathish Kumar commented
Can we have Movie Clip option just like Adobe Flash movie clip symbol?.
This will help a lot when we are creating innovative prototype presentations for both mobile and desktop apps.
E.g. Unique hover effects, Spinner animation, Shape animation, Particle effects and If you click on the twitter like button then see how that animation is coming. If there is an option in XD then I can create wow animations!.
Romio Joseph commented
I mean, we have to create so many artboards to show multiple dropdowns. Is there anyway to include a dropdown on hover without creating any additional artboard for that design?
Unbelievable and unacceptable that such a common, simple and necessary feature/interaction has been neglected in the backlog for OVER A YEAR here and OVER 2 YEARS in the TAP/HOVER backlog item referenced below!
This is literally a deal breaker for me giving XD a real chance at becoming my go-to responsive design and prototype tool. Think beyond just hovers for links/buttons and allow for symbols to have various states (like the old Flash symbols and MovieClips) or allow for behaviors (i.e. time, interaction, position or shape dynamic based like Flinto and others).
I guess I will keep using Figma, Sketch/Flinto, Invision Studio and/or Axure for full responsive design and prototyping projects for the foreseeable future unless Adobe gets a clue and gets this 'backlog item' into production. Unreal Adobe... and really disappointing. I hope you are considering long press and 3D touch support for mobile devices as well while you are at it!
In backlog for more than 1 year... what happen!!?? T T
Pablo Sara commented
It would be kind of an overlay
Pablo Sara commented
Currently, If I want to create an animation for a simple button, I have to duplicate the whole artboard in order to do that (https://www.youtube.com/watch?v=PQ1f29pt5HE).
I would love to be able to create in-place animations. So let's say I have an artboard with 2 buttons. I want to create 2 different independent animations for each button. That would be amazing. It would also help to get the workflow even more organized and simple. I don't imagine how the specification would be, but I send this idea to start the conversation :-).
Congrats for XD, is getting great and it's a pleasure to use.
It would be great for any button that takes you to a new page or just any button in general to have the option to change its state after it's clicked on. Similar to website links that are blue, after you click on them, they turn purple, showing you that you have already visited that link. For XD it would mean we could show the end user which links they have already clicked on.
Another example would be if we created a game with XD similar to Jeopardy. Where once one of the categories and prices were selected, that it would change its color state so you knew which ones were already selected.
I attached a rough mock-up of what it could look like. It may even be better to change the design, not just color. So in the example, you see a circle with a plus, after it's clicked on, it would be cool to have it change to a checkmark and green instead of purple.