15

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

almost 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.

39 comments

  • Fredo Tan, almost 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, almost 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
    • paavo koyapaavo koya, almost 3 years ago

      Your comment reads pretty condescending. He provided valid reasoning for his frustration and is seeking alternatives.

      Sounds like you need to spend some time learning to accept others viewpoints.

      10 points
      • G Lukacs, almost 3 years ago

        You say this, but he's absolutely correct.

        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

        This post is reason enough for switching, surely? Doesn't want to hear about switching tools for "no reason" and yet uncritically wastes months going through pointless abstractions when learning some basic coding principles (~12 hours) and doing some basic research (~12 hours) would solve the problem entirely. Everything that's wrong with the design community in a nutshell.

        At this point, React and Vue have been around for years. Almost every meaningful job in our industry involves them (or the principles they espouse) in some way, shape or form. One of the designers I hired last year didn't know anything about React, so he decided to build the docs for one of our APIs with React to learn the ropes. Our company uses Vue, so there was no pressure for him to do this, and yet he felt it necessary to learn something new and (increasingly) relevant to our industry. This will continue to be helpful as he moves forward in his career.

        What's stopping this guy from doing the same? He's repeatedly bashing his head against the wall to try and solve a React problem! Stop whacking the wall and just learn React you crazy fool.

        Why should people be expected to indulge someone who is clearly approaching the problem the wrong way? I have worked with dozens of designers who have solved this problem. Most of them got as far as Framer, and then realised they should just learn to code. It's like a car mechanic being upset about electric engines and expecting the world to create an interface where they can lazily apply all of their old tools and concepts without learning anything new. At a certain point, you just have to catch up with the times, or get a new job.

        You can be upset about working conditions all you like, you can be upset about impostor syndrome, you can be upset about how much designers and front-end developers are expected to learn to be "hireable", you can be upset about having to do spec work. Will this change hiring practices? No. Will this make the entire JavaScript ecosystem flip on its head to make your life easier? No. Is this an ideal situation? No. But you can choose to do something else if those terms don't agree with your sensibilities.

        To answer OP's question. I use HTML/CSS/JS and libraries like anime.js in whichever format our preferred framework uses to communicate animation in my interfaces. By prototyping with these tools, I am already much closer to the final product than any "abstracted solution" could hope to be. Simple question, simple answer.

        3 points
        • Dan W, almost 3 years ago

          Definitely should just learn React if he can already write HTML/CSS/JS, React is awesome :)

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

            I already know react, but I don't agree with the way its community wants you to encapsulate CSS in JS. I believe in separation of concerns and I just don't agree with the way that React handles CSS. :/

            I do understand its advantages and why it is popular, but I've been writing CSS for 10 years and the problem it tries to solve just aren't problems that I am having. I think these types of solutions are more appropriate for developers who spend more time on the non-presentational part of development.

            0 points
            • Dan W, almost 3 years ago

              I've been writing CSS a bit longer than that and had exactly the same concerns. I started out in React writing Sass via CSS Modules which at least had some familiarity but now I'm enjoying using Emotion. I found giving up my "expertise" very hard at the beginning but React—or the concept of encapsulated components—is not going anywhere. Better just embrace it and use the CSS skills you already have to keep moving forwards rather than take a step back and use some GUI to do stuff that somebody else will still have to turn into code anyway.

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

                I get that. But I just get the Flash Flashbacks (ahh, funny!). I do believe that what is currently solved via CSS in JS will eventually be replaced by fully realised via webstandards. But I might be wrong. Thank you for writing that.

                For now I have accepted that managing complex CSS and writing semantic accessible components that can be fully progressive is just not something that people at the moment need, which is one of the reasons for why I am starting to transition out of development. I started doing this because I just loved being able to turn my designs into html, css and JS. That skill is not needed anymore, it seems.

                0 points
            • Dan W, almost 3 years ago

              This might help get you excited about animating with React https://www.learnwithjason.dev/let-s-learn-framer-motion

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

          I understand what you are saying, but I do think that much of it is really inappropriate. If I were not an experienced developer already, would you have given me the same advice?

          I appreciate the lengthy answer, but you have essentially stackoverflowed me. I asked what other people use to design ui animations and you tell me to use a frontend development framework. I already know react and I work daily with it. I disagree how the ecosystem has decided to solve UI animation and style encapsulation.

          You can be upset about working conditions all you like, you can be upset about impostor syndrome, you can be upset about how much designers and front-end developers are expected to learn to be "hireable" [...]

          I don't worry about this. I am very privileged to have a secure job in a first world country. I am upset about the fact that design tools are not capable of allowing me to do my job effectively, when they very much could be. The situation that frustrates me and that I describe is not inevitable, it is constructed and deliberate decisions keep it going. That is what frustrates me.

          Why should people be expected to indulge someone who is clearly approaching the problem the wrong way?

          That is a really limiting way to think about it. If you have any experience in UX you understand that there is not a correct way of interaction. People use things in varying ways and the problems they run into are indicators of their experience. User's behaviour cannot be wrong or right. It's just behaviour. You are essentially blaming me for having a bad UX, when I am just using the tools that I am provided with. That's not the way to go.

          At this point, React and Vue have been around for years. Almost every meaningful job in our industry involves them (or the principles they espouse) in some way, shape or form.

          This statement is a very good indicator of what is actually really destructive at the moment. The web platform caters to all people, regardless of how much industry is behind their efforts. That is what makes the web great, it doesn't discriminate Websites who do not use React or Vue, or Ember, or Angular or whatever other Framework are still valid projects. Developers who make most of their stuff on their own are still valid developers. I do understand that there is a need for humans who can be easily exchanged with someone else, but this need is driven by massive companies. A designer who is designing small websites for tiny businesses in rural areas deserve the same quality tools as designers who work in huge companies. Working in a big company is not leveling up for every designer. It might be for many, but that is entirely subjective.

          People do this for very different reasons. Consider the fact that many people are developing and designing while not even working in this industry. Should we not cater to these people as well? Design Tooling currently is exclusively catering to designers working in big companies. It's understandable, that is where big money is. But not all of us are working in big companies. Sorry if that truth hurts you, but this won't change.

          1 point
          • G Lukacs, almost 3 years ago

            That is a really limiting way to think about it. If you have any experience in UX you understand that there is not a correct way of interaction. People use things in varying ways and the problems they run into are indicators of their experience. User's behaviour cannot be wrong or right. It's just behaviour. You are essentially blaming me for having a bad UX, when I am just using the tools that I am provided.

            You are not a closed/static system. You can learn new things. You can make choices. You asked the question. If your behaviour "cannot be right or wrong" and you are "just using the tools you have been provided with" then why even bother asking the question in the first place? Give me a break. Everything you've written here conveniently helps you avoid the issue. You're bending over backwards to ignore the problem at hand.

            Dan Winer has been more than accommodating, his advice and encouragement should be more than enough to help you see reason.

            As stated in your original post:

            But in this case, all of it is going into react. And react does not work well with how I usually develop animations.

            Your problem is one of compatibility with React and/or React developers. The only reason I brought up the hiring stuff was to illustrate that this is not an unreasonable proposition, and that in fact, many people manage to work with React and CSS-in-JS animations successfully. If you want to die on that hill, be my guest.

            The web platform caters to all people, regardless of how much industry is behind their efforts. That is what makes the web great, it doesn't discriminate Websites who do not use React or Vue, or Ember, or Angular or whatever other Framework are still valid projects.

            Yeah, okay. Go work on a project that doesn't use React then? You're asking about a React-specific problem, and then going on some tangent about how React doesn't account for every website on the internet. Excellent point, well made!

            People do this for very different reasons. Consider the fact that many people are developing and designing while not even working in this industry. Should we not cater to these people as well? Design Tooling currently is exclusively catering to designers working in big companies.

            I just made a website for a small family run restaurant with VueJS/Nuxt and Contentful as their CMS. It works perfectly, loads fast, and they can update it as-and-when they need to. I don't even work at a big company, we're less than 20 people in total. There are only two other designers on my team. A few weeks ago, I taught a friend of mine with zero coding experience to build a simple static site (for an upcoming exhibition) with NuxtJS. We worked together for maybe 2/3 hours? She made her first GitHub commits and everything, learned a bunch of new stuff, hosted the site for free on Netlify, was a genuinely pleasurable experience all round.

            Stop hiding behind these pitiable excuses. You don't have to work at a big company to try out new technologies. Front-end development tooling is better and more accessible than it has ever been. Just work with your React developers, learn a new thing, try it their way. If you don't like it, stop taking React projects. I'm sorry, but you're making this so many times more difficult than it has to be. Please forgive my frustration, I just wish you'd be more willing to engage with others (who, believe it or not, have lots of relevant experience in lots of different contexts) and "forgo" your principles in the hope of learning something new.

            All things considered, I think I'll respectfully disengage at this point, because I'm not sure you're willing to have a discussion in good faith. I wish you the best of luck though, hope everything works out.

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

        Thanks! I didn't really want to respond to that comment, I understand the point they are trying to make - I just disagree with them.

        0 points
  • John Doe, almost 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, almost 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, almost 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, almost 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, almost 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, almost 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, almost 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, almost 3 years ago

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

    2 points
  • Nicolas PythonNicolas Python, almost 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, almost 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, almost 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, almost 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, almost 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, almost 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, almost 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, almost 3 years ago

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

    0 points
  • 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
  • Stuart McCoyStuart McCoy, almost 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, almost 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