The ultimate design tool mashup.
*** September 2022 Update on Figma ***
*** November 2018 Update on InVision Studio ***
I want the power to create of Sketch with the freedom to experiment of Flinto and the easy distribution to test of InVision.
We’re not quite there yet, but Sketch is the key.
UPDATE: NOVEMBER 2018
When I wrote that two years ago, Sketch was the leader in experience design tools. I thought it would be organization to bring these three capabilities together.
Now it looks like InVision is leapfrogging ahead on this path.
I took InVision’s latest tool Studio (v0.98.1) out for a spin and was shocked. The biggest feature which has me thinking more seriously about Studio is the interaction timeline.
I made this prototype demo:
A brief tour of tools
Sketch is a powerhouse in UI design tools and continues to improve and refine their features. Prototyping was introduced in Sketch 49 and was a much-needed addition.
However, the Craft plugin for Sketch, created by InVision, was ahead of the game years before. Craft allows syncing artboards directly to InVision. This skipped the whole export/upload step and made the hotspot and linking process within InVision unnecessary. Timesaver kudos!
Both Sketch’s and Craft’s Plugin require interactions to trigger from objects or layers. This means there are no screen-level swiping gestures (which you can hack by adding a “clear” rectangle). Also, they both require you choose from a prescribed set of animations. Essentially, you are swiping, fading, or dissolving your way between screens. For me, these are not tools that enable a designer to explore effective ways of solving new experience challenges.
Flinto is dear to my heart and has been for a long time, and fills this animation gap perfectly. The ability to experiment with interaction and animation without worrying about code reduces costs and increases innovation. When a designer can iterate through dozens of possibilities which deal with motion and timing before involving a development team is a flat-out win.
The drawback is it’s a design-file graveyard. You can import Sketch files, experiment with animations, but ultimately it is now a Flinto file. You can reimport the sketch file and preserve the Flinto animations, but don’t change layers and objects too much, or you’ll be rebuilding the effects. While a drawback, the ability to try-an-create is powerful—especially when communicating to client, customer, and developer.
Hello, InVision Studio
And so we’re back to InVision and Studio. All three tool’s capabilities are represented well enough to produce a convincing experience design and prototype. But it’s not the final tool—yet.
The design and animation tools lack the maturity of Sketch and Flinto respectively. For instance, Studio didn’t have text shadows—only box shadows. For a design tool to be reliable on a full-fledged project, I want the same visual abilities CSS gives me. Otherwise I have less capability than the browser.
As for animation, Studio is limited to X/Y positioning and scaling. Flinto gives you many of the 3D transformations as you would expect to see them in CSS. Again, a realistic modeling tool is gold in the hands of an experience designer. We typically have dozens of ideas in our heads and want to make them visible and robust as quickly and accurately as possible.
Assessment
InVision has matured their mission around design and its beneficial impact on business. Studio is a natural extension of their prototyping foundation.
Sketch and InVision are quickly moving toward a convergence of Design/Prototype capabilities in one tool. Yet, Studio is the only one integrating animation into it, and I believe this is the great future ability of experience designing.
Yes, Studio is still in preview, but when the design tool is at parity with Sketch and Flinto, there will be a whole new playing field afoot. Keep your eye on them.
UPDATE: SEPTEMBER 2022
When I wrote that last update 4 years ago, Figma was still struggling to make waves.
Since then, Figma has become so effective that it is the preferred tool for 77% of UI Designers and was recently Adobe agreed to purchase Figma for $20 billion.
The reason is simple. Figma’s features catered to the remote workplace, even before it was fashionable (note the switchover from Sketch to Figma in 2020).
Figma’s features made it an easy tool to onboard compared to Sketch:
- Cross-platform (Sketch is Mac-only)
- Files in the cloud
- Free to try
- Collaboration built-in
- Prototyping built-in
- A flexible frame/artboard model (easy to nest design elements)
- An extensible components/symbols model (easy to create variations for design systems)
The chatter surrounding Adobe’s purchase of Figma has all the trappings of doom and destruction. It’s certainly more plausible than not the Figma will succumb to Adobe’s way of doing things (UI nesting, subscription model, and other bloat).
However, there is still a chance Adobe can turn Figma into my ultimate design tool.
For all Figma does, it falls flat on two major dimensions:
- Poor vector design controls
- Poor animated and partial-screen interaction prototyping
Adobe can possibly close the gap in both areas:
Add Adobe Illustrator capabilities to Figma
For a UI design tool, Sketch has developed a robust set of vector controls that it is possible to produce everything from icon sets to high-resolution vector art. It doesn’t replace a dedicated illustration tool like Adobe Illustrator, but the convenience of sophisticated vector controls makes the UI design workflow much smoother.
Add Adobe After Effects capabilities to Figma
Adobe After Effects is streamlined for video production, not UI design. However, Lottie animations have gained popularity and those depend on an Adobe After Effects workflow. It may have the basis for
A more straightforward approach would be to integrate the capabilities of ProtoPie into Figma. ProtoPie is all about the micro-interaction animation design experience. It’s the web version of Flinto. While there is a ProtoPie plugin for Figma, it is simply a file export and another workflow dead-end.
It’s a key advantage for designers to use animation design tools if we’re to fully express our immersive UX ideas to stakeholders, customers, and developers.
The most powerful design tool
These tools will come and go. That’s obvious, Sketch wasn’t a houshold name five years ago.
Read about the most powerful design tool for you that will stand the test of time.
