The Future of Interaction Design Tools Is Bright
When you think of motion design, you might think of any number of things:
- Frank Thomas and Ollie Johnston’s 12 principles of animation for Disney
- Flowy, highly kinetic infographics that you find in presentation decks
- Interaction design for digital products, like the switching of a toggle on or off
And that’s because motion design covers all those areas and more. It’s a wide-ranging specialty, but one that also exists in a silo — in part because the software best suited for motion design hasn’t always integrated with the software for interface design.
We’ve had basic prototyping in Sketch and Figma for years, but if you want timeline tools or advanced transitions — the kind of things that make an app feel native, responsive, and delightful — you’ve had to look elsewhere. Anyone who puts the time in to learn After Effects will tell you that it’s got a steep learning curve, and that it’s usually overkill for the kind of work a UI designer needs to do. Origami is another option, but it’s an investment to learn and can be cumbersome to add to your workflow.
Here’s the good news: That gap between UI design and motion design software is closing. InVision Studio’s UVP is a robust timeline system. Figma added transitions to its prototyping in 2018, and Framer X just updated with a set of animation tools.
The future of design prototype software will include advanced motion tools that allow designers to better visualize and more accurately test the UX of their products.
Why Is Motion Design So Important?
In 1941, Maitland Graves described the basic elements of design: line, direction, shape, size, texture, value, and color. And we know that applying the principles of design to those elements is what forms the basis of a functional design system.
Applying motion to the elements of design to achieve those principles is one of the strongest tools in a designer’s chest. Nothing tells a story, describes a relationship, or adds personality quite as effectively as motion can.
Motion design is also not a “nice to have.” It must be baked into the design process to be its most effective. When you design a modal overlay, prescribe its fade-in and fade-out bezier curves. When you decide to use a card layout, design the transitions of the cards as they overlay each other. If you want to add slick page transitions to a marketing site, explore and justify that idea early on and build the experience around it.
Without the right tools, designing these products is impossible.
Today’s Tools
If we were to do a #tenyearchallenge on UI design software, we’d realize just how spoiled for choice we are in 2019.
The gap — which used to be a crevasse — between static designs and interactive prototypes is shrinking rapidly. Sketch, which usurped Photoshop as the go-to for interface design in the mid-2010’s, added basic prototyping in 2018 (though the Craft plugin added it well before that). And now Sketch has its own competition:
- Figma. A favorite of large teams for its cloud-based, collaborative focus. Figma sells itself on speed, iteration, and easy handoff to developers.
- InVision Studio. InVision’s foray into standalone design software, built around advanced animation tools. Studio uses a powerful timeline approach, but stops just shy of a true keyframe system.
- Framer. A slick, recently updated interaction design tool. Framer’s killer feature is its in-app design store, with integrations and UI kits direct from Twitter, Facebook, Dropbox, and others.
- Adobe XD. Adobe’s foray into UI/UX-focused prototyping software.
Each of these tools is leading a much-needed push into animated prototyping at the design phase. And while they may be selling a supercharged production workflow, the tools themselves are head and shoulders above anything we’ve had at our disposal before as interaction designers. That’s a win not just for antsy product managers, but also for curious and talented young designers looking to learn.
Imagine you want to animate a fly-out sidebar menu, in order to demonstrate either to a developer or to a client how it should look. To use After Effects for that would mean:
- Firing up a new AEP project
- Exporting your vector-based designs and importing them as shape layers (not a quick or easy task)
- Keyframing the animation manually, or, if you’re a pro, using Javascript-based expressions
- Updating the source file? Sorry, there’s no way of syncing those changes to After Effects.
Any of the tools mentioned above would be able to do this in-app, saving time, money, and shortening the time to market. And those tools will only get more robust. InVision in particular, fresh off a $115 million Series F round of investing, has a veritable army of in-house product designers pushing out “Studio Jams” — examples of how to use the software to do advanced interaction design, with open-sourced project files. Their mission is to get more people adopting Studio, of course, but a side effect will be the rapid acceleration of motion-enhanced design projects by the newest generation of UI designers. Tune into the front page of Dribbble to see it in real time.
