Which tool(s) are you using for designing UI animations?
over 3 years ago from Thomas Michael Semmler, 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.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now