BSB x AdobeXD
Had some fun with the new auto-animate feature in @Adobe XD and created a conceptual feature content slider. โ
I've briefly summarized my experience with XD below:
Pros
Super easy to explore multiple iterations of animated transitions and interactions by only having to change the values of position, rotation and scale.
The auto animate tool removes the need to use keyframes and works in a linear fashion from one artboard to the next by changing the properties of each object, mask or content block.
If you've used any of the other apps within CreativeCloud, you should find XD to be super agile to adapt into your prototyping phase as the overall functionality and UI feels familiar almost instantly.
Nice to have in future updates
AR/VR, Project Aero isn't too far away, but I hope that similar functionality will be integrated within XD making it possible to combine the features between both tools to prototype working physically activated experiences in the same effortless way.
Motion Graphs, Although there are a variety of different presets to set easing on object animations, it would be nice to be able to tweak and fine tune these by drawing custom speed/value splines without having to adjust or re-do these in AfterEffects.
Embed Videos, I wanted to add some 3D rotation to the hand that would be triggered by the text content changing.
Custom Cursors, I couldn't find a way to have have any customization on the cursor, I had to hide and replace this in post in, it would be great to include a library of touch interaction visualizations as well as various cursor types.
Hover States, I'm not sure if this is already a feature but I couldn't find a way to set different states for CTA's or image hovers, which is needed more when designing with desktop in mind.
Tips
Offset animation, I created an offset in some of the mask reveals and object transitions by gradually spacing objects further away from each other incrementally.
Hit the play button (or Ctrl + Enter / โโ), Auto-animate is super easy to be experimental with motion, so preview regularly to understand the differences in the changes of values you make and how it affects your interactions.
Alignment overlay, Although the guides are handy, I found overlaying the end frame at 20% opacity on the previous artboards helped get the alignment of mask reveals and object positioning locked in.
Tools used:
Adobe XD, Adobe AE & Cinema4D
Check out the Adobe XD Playoff, Download it for free and rebound with your own concept to win. (oh and nice job on the new Official Playoff page design @Dribbble ๐)
