15

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

over 3 years ago from , UI Engineer. I'm a bit mean sometimes

My disdain for the current state of design tooling for people who work in UI/UX is no secret. And my frustration grows every time I encounter roadblocks while I am trying to do the most basic stuff.

At the moment I am massively frustrated with trying to animate certain rather simple UI interactions in a newly designed responsive signup process. I already gave up on hoping that design tools will ever wake up to the truth of the fluid constraints of screen sizes and the fact that components / symbols just need state functionality, so I designed everything. All of the different views in several states exist. They just need to be animated so that the person developing the animation actually knows what to do. You can't verbally communicate something like that. People need to see it. We can't ask a person to just "imagine" it.

I am using sketch. I don't wanna hear your "you should switch to figma". There is no reason to switch. Until there is one, I'll stay with sketch, as I won't switch for the switch's sake. So, what are my options? What are you doing to communicate animation in your UI's?

So far I have tried:

  • Flinto - Great for 60% of what you are doing. But it cannot handle sketch files that work with nested symbols, or shadows, or svg shapes. It often just merges several layers together and turns them into a pixel background image. This tool is great but it is clearly intended to be used for smart phone applications instead of responsive web based experiences.
  • Framer - its an entirely new tool. I have used it before and found it completely blown out of proportion and very difficult to use with little payoff. Also at this point I am not sure if you can actually just use the prototyping functionality without using the entire software.
  • principle - very similar to flinto, from what I can see. But I don't have much experience with it.
  • Anima - no. I'll not pay 300€/Year. This tool is literally shamelessly exploiting designers and I refuse to support it.
  • Marvel - is unable to do what I need and is more suitable to communicate "flow" from view to view.

I know there are at least 5000 other tools out there. But I wanna know what you are using - I am really desperate here. At this point I'll end up just making HTML and SCSS to communicate how this needs to look. I kinda want to avoid learning After Effects for something as simple as UI animations.

Another piece of information, I normally don't have that problem because I develop most things myself. And I do all animation in HTML, CSS & JavaScript. But in this case, all of it is going into react. And react does not work well with how I usually develop animations. For this case, I can't just develop the Markup and drop in animations later. The React development needs to know what will be animated because it controls those animations. I don't like it but that's just how it is at the moment. People don't seem to care about separation of concerns so I stopped protesting it.

29 comments

  • Fredo Tan, over 3 years ago

    Have you tried ProtoPie? It's a highly interactive prototyping tool meant for mobile, web, desktop, and IoT.

    It gives you a lot more power and expressiveness in terms of interactions than the tools you mentioned without the learning curve and headache that Framer gives you.

    You can make simple interactions but you can make them as advanced, complex, realistic as you want. Going beyond just layers moving around your screen, but things like:

    1. conditional interactions based on the password entered in the password field.

    2. actually have text input as what a user is most likely to do when signing up.

    3. store user input (name, password, email address) and reuse it later in your prototype.

    4. etc.

    There's an active and growing community for ProtoPie and we keep shipping new updates, the last one was just a few weeks ago. A new one is on the way.

    Have a look below btw. https://www.youtube.com/watch?v=1zC08BoSpyY

    7 points
  • Chris KeithChris Keith, over 3 years ago

    Your post reads like:

    “I know there are a million tools out there for animations but they either too limited, too difficult for me to learn or too expensive. This sucks!!”

    Are you thinking there’s a ultra capable, cheap, easy to use product out there you haven’t discovered yet and you’re hoping someone here will tell you about it?

    Sounds like you need to spend some time learning React.

    5 points
  • John Doe, over 3 years ago

    On the same boat, tried A LOT of tools for Sketch. A LOT, even some very obscure ones. So here are my thoughts on the best of the bunch:

    1. Kite Compositor: Great tool, can handle a lot of complex animations that Principle couldn't do.

    2. Drama: Another great app, didn't have time to dive deeply into it since I switched to Figma, but looked even easier and more intuitive than Kite.

    3. Principle: Great, for simple stuff. It was my favorite tool, but just trying to do anything more complex like nested symbols and it didn't work, or had to do some laborious workarounds around its limitations.

    4. AE: The 800-pound gorilla, but slower to work on.

    And depending on the complexity, I'd give Figma a second try, at least for simple stuff.

    3 points
    • M IM I, over 3 years ago

      +1 for Kite, it's quite easy to learn and it has a lot of features.

      Also, XD's Auto-Animate is worth trying out. For some small animations, I just export things from Sketch and then use XD... Not the best process, but it's handy for explaining some simple interactions :)

      1 point
      • Nicolas PythonNicolas Python, over 3 years ago

        Just it to be mentioned: Figma's SmartAnimate is similar to XD AutoAnimate. So if one would work with XD or Figma (which I recommend) one would not have to export stuff. Specially if designs change after you've done all the work animating it this is a huge pain.

        0 points
        • John Doe, over 3 years ago

          Agreed, SmartAnimate is awesome.

          When I moved to Figma I thought I'd need to fire up Kite or Principle to work on animations and transitions, but SmartAnimate has so far solved all my needs.

          thumbs up

          0 points
    • Thomas Michael SemmlerThomas Michael Semmler, over 3 years ago

      That was massively valuable, thank you. I'll take a look at Kite Compositor. It came up in my research as well.

      0 points
  • Steve O'ConnorSteve O'Connor, over 3 years ago

    I've always worked closely with devs so have never needed more than simple options, except 2-3 times where I used Principle. Now I just use Adobe XD for anims.

    I understand your pain though, there doesn't seem to be a solid middle ground contender.

    However, I've heard good things about Flow: https://createwithflow.com/ Might be worth a look?

    2 points
    • Thomas Michael SemmlerThomas Michael Semmler, over 3 years ago

      I understand your pain though, there doesn't seem to be a solid middle ground contender.

      That's absolutely it, well put. I'll take a look at flow, thank you!

      1 point
  • Matt Sawmiller, over 3 years ago

    Origami Studio is my favorite hands down. https://origami.design/ Free and amazing community..

    2 points
  • Nicolas PythonNicolas Python, over 3 years ago

    I also tried a lot of tools for Sketch. Never with a satisfying result - or as you said super expensive.. In my early days, when something needed to be fancy and totally unrealistic in terms of realization i used AE. Which was totally off the table as soon as we started to scale and stuff had to be developed.

    After several years with Sketch we changed to Figma which has a pretty neat prototype animation tool "SmartAnimate". SmartAnimate was our last reason to switch from Sketch to Figma - besides kicking the InVision license, the Versioning stuff and being limited to MacOS (Our Devs don't use MacOS).

    SmartAnimate totally does the job and my devs understand what the final product should behave like. For sure it's not as smooth as a tool using a keyframe - approach but for the time you invest you get something you can work with.

    And as far as I know Adobe XD has a similar way of animation.

    2 points
    • Dan W, over 3 years ago

      It's not really a tool for UI animations, you can't control any animation settings at a layer level, only page level.

      0 points
      • Nicolas PythonNicolas Python, over 3 years ago

        As I mentioned above, that's all we need. Yes it's limited, but if you use multiple pages with redirects you can do almost everything. As I also said it's not perfect, but for the time it consumes the results are awesome. For more complex stuff, we can still use framer or something similar.

        0 points
    • Thomas Michael SemmlerThomas Michael Semmler, over 3 years ago

      After several years with Sketch we changed to Figma which has a pretty neat prototype animation tool "SmartAnimate". SmartAnimate was our last reason to switch from Sketch to Figma - besides kicking the InVision license, the Versioning stuff and being limited to MacOS (Our Devs don't use MacOS).

      I'm still sticking to Sketch for now, just because there isn't really a feature in Figma that I really need. The SmartAnimate tool sounds great for page-transitions, but for that I am mostly using marvel, or if I want something a bit fancier I use Flinto.

      Our company is on mac os and at this moment I am the only person who is doing actual design work - so collaboration features of Figma aren't an argument at this moment. I really appreciate your insights on this, thank you!

      0 points
      • Nicolas PythonNicolas Python, over 3 years ago

        I know your situation just too good. As I mentioned above it's not really the single feature that made the change for us. It was the combination of cloud based file handling, versioning and prototyping (with animation).

        I totally would also not to switch for the switch's sake. That would be a terrible idea, specially because it's not only about the tool. It's also about the learning curve to relevant people (business, devs, etc.) which costs a lot of money. In our case: we had to consider that elderly POs needed to learn something else than InVision.

        We decided to risk the switch after discovering SmartAnimate. It was just the last bit for us. After the switch Prototypes got better, communication through the whole company got better and never did we have problems with file management or library synchronization anymore.

        As you might have recognized, I'm a huge Figma believer. But not because it does something fancy. It simply saves us a s***t load of time. Not while designing, but while the discussion and decision phase with our stakeholders.

        And for us designers, we are now able to talk "visually" (high quality realtime wireframing) with our stakeholders in front of their eyes - no matter where they are.

        It's a game changer. It's the combination. It's the workflow. It's not the feature. (Shit that sounds like a really bad commercial hahah)

        0 points
        • Thomas Michael SemmlerThomas Michael Semmler, over 3 years ago

          It simply saves us a s***t load of time. Not while designing, but while the discussion and decision phase with our stakeholders.

          I do find this interesting to hear that from a designer. I used to do this as well in where I would invite clients into the very early phase of a design. They would sometimes find some obscure detail and would give rather uneventful feedback, something like "can we push that 2 pixels to the left?". But they would then get attached to that specific detail and obsess over it, entirely forgetting the rest of the design "why haven't you moved this to two pixels?" - It's a placative example. It created a narrative of where everything they notice for some reason has to be taken care of from that moment on, because otherwise I have basically ignored their wishes. So I am a bit afraid that bringing the process that close to stakeholders will lead to much unproductive feedback and overhead in trying to manage that feedback.

          I can understand though how that makes a lot of sense to your specific needs. And a lot of designers find themselves in similar situations nowadays. Thanks for your insights, thats super valuable! Its much better to hear actual reasoning instead of being told "go die on a hill" lol

          0 points
          • Nicolas PythonNicolas Python, over 3 years ago

            "go die on a hill" haha. Not from my side. That' not helping either of us.

            We know the problem with the stakeholders early in the process as well. What we did is specifically talking a language that fits the stage. We do not allow our team to use the UI Library elements for early discussions. We just do it Wireframes or even more abstract. As soon as a design "seems" finished (but it's nowhere near to that) by using library components, the discussions get heated up. Like you said with pixels etc. The more abstract we are, the more we discuss problems not visuals.

            Figma helps also with that. All relevant people in the same file, gray squares, descriptions and cursors pointing where something is missing. "Here we're missing the VAT information". (I love missing VAT information btw.)

            But once you've got that solved, it's extremely valuable to get stakeholders knowledge as early as possible. And as visuals are consumed much faster than confluence pages, we have a lot of visual discussions. Even with accountant and or sysarchitecture guys.

            for example: we've solved the whole unexpected errors flow visually in figma. It was way easier for all the architects and devs to see what should happen. A pimped flow chart so to say.

            To not include stakeholders out of fear from that discussions is in my opinion the wrong approach. I agree it's a challenge to adapt visuals and discussion style to the production stage. But it's harder to adapt "finished" designs when problems are not fully solved yet.

            And one side-note. In our company I introduced the Design-Process in a totally Dev-Driven Company two years ago. Everybody thought of Design as a "make things beautiful". Therefore I had to include our CEO in early stage discussions. So he saw the value of solving problems, making better products and being faster in development. Being visual with Figma helped a lot. We're now heading towards fully design driven.

            1 point
  • Noah MittmanNoah Mittman, over 3 years ago

    Personally, I love Hype -- https://tumult.com/hype/

    0 points
  • Richard BruskowskiRichard Bruskowski, over 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
  • Stuart McCoyStuart McCoy, over 3 years ago

    Adobe XD has come a long way since its initial release. AutoAnimate and Components work fairly well for most UI needs. I'm sure you could find some edge cases but I think that's going to always be the issue with any tool. I d recommend looking into Let's XD to see what you can do with these tools.

    0 points
  • Toms Stals, over 3 years ago

    You can also try Haiku Animator Tool - https://www.haikuforteams.com/animator/

    Haven't used in a while, but previously it was an interesting tool, easy to catch up and with many export options.

    0 points