Designer News
Where the design community meets.
↵
Which tool(s) are you using for designing UI animations?
3 years ago from Thomas Michael Semmler, UI Engineer. I'm a bit mean sometimes
G Lukacs, 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.
Dan W, 3 years ago Definitely should just learn React if he can already write HTML/CSS/JS, React is awesome :)
Thomas Michael Semmler, 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.
Dan W, 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.
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.
Dan W, 3 years ago This might help get you excited about animating with React https://www.learnwithjason.dev/let-s-learn-framer-motion
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.
G Lukacs, 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.
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.
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.