Which tool(s) are you using for designing UI animations?

almost 3 years ago from Thomas Michael Semmler, UI Engineer. I'm a bit mean sometimes

  • Richard BruskowskiRichard Bruskowski, almost 3 years ago

    I've went through a fair share of tools myself and ended up using Framer for most of these tasks. Here's why:

    • Timeline based tools are nice for exploring and creating a specific transition, but oftentimes UI interactions have more dimensions/are more complex than that.
    • With tools that are easy to begin with, I often hit a roadblock at a certain point where whatever I wanted to create wasn't possible, at least not the way I had imagined. With Framer, basically everything that's possible on the Web is possible in the tool one way or the other.
    • Some stuff that's implemented with 3 lines of CSS in Code is really painful to recreate with a motion design tool. In Framer I can simply use CSS whenever I want.
    • If some part of the interaction I am exploring has already been done properly in development, I can (with some effort) use that code (or the whole component) and build on top of that instead of rebuilding it. I also can built on top of established design systems like Material UI etc.
    • With Framer you can build simple flows quickly and invest more time building out specific interactions later if and where it makes sense. You don't have to maintain a low-fi clickdummy and hi-fi interaction prototypes separately. You don't have to decide upfront if you want to got lo-fi or hi-fi either.
    • If I decide to built out a specific interaction in high-fidelity, the effort put in there is not completely lost when handing over to production as the code is usually readable or even usable for developers.
    • I can reuse stuff I've built in one project in another project pretty easily. That's a big bonus for me.
    • I can copy paste from Sketch or import from Figma (in Web Beta only at the moment) then continue in Framer. The layers are not reduced to bitmaps or anything unusable. It's not 100% perfect, but most stuff imports well and the rest is easily fixed. It's not "synced" though, but I find that preferable because with syncing I never felt sure if my latest edits in layout will break the prototype. You can also built flows with exported screens as bitmaps though, if you need to move fast.
    • With Magic Motion (in Beta only at the moment) you have a Smart/Auto Animate feature that also exists for production (React only, though)
    • Everything is built on components, so you can have multiple instances with the same behavior in your layout without any overhead.
    • You can separate data from your prototype, which makes maintenance easier.
    • There are packages for a lot of common challenges you might face. You can either use them directly if they are suitable for your project, or learn from them.
    • You have a canvas. So you can move stuff around, make duplicates, try things, keep them for later, organize screens visually, zoom out to get an overview, zoom in to adjust details. As a designer I need that.
    • You can export your prototypes, host them yourself for sharing e.g. to comply with client needs.

    Also heard good things about Protopie. For me personally, I like about Framer that it's built on standard web technologies and React, so everything I learn along the way, I can apply beyond prototyping with Framer, no evil lock-in. Also Framer's UI fits in neatly with what you might be used to from design tools like Sketch and Figma or IDEs like XCode, obviously they are putting a lot of thought into that.

    0 points