Anima is one of the most popular 3rd-party plugins available within Sketch. It allows designers to quickly generate responsive, interactive prototypes from Sketch art boards and then easily share with collaborators. As it stands, Anima can arguably replace other services like InVision and Zeplin from your current workflow. But what’s most exciting is that this is just the start of what’s to come.
We sat down with co-founder, Or Arbel, to discuss the long term vision for Anima and where he sees the roles of UX designers and developers shifting over time.
Can you explain what Anima is and who it is intended for?
Anima is a product for designers that wish they could express and communicate UX in a better way. Anima Toolkit is a Sketch plugin that enables designers to build high-fidelity prototypes. High-fidelity prototypes are responsive and interactive and are code-based. Low-fidelity prototypes, which are based on screenshots with hotspots, are great to convey user flows, but not so much for conveying amazing user experience. Designers create a whole experience in their mind but are limited in what they can deliver in terms of today’s tools. Anima aims to solve this by empowering designers to deliver their vision without being dependent on developers.
What is the long-term vision for Anima?
Our long-term vision is to automate front-end development. By empowering designers to express every aspect of their vision, we can then take that information and convert it into code. Today this code is for prototyping purposes, but in the future, we aim to make the process produce production-ready code. Specifically, our product will allow teams to build a design system with coded components in a streamlined way.
What motivated you to create Anima? Where did you see opportunity areas to refine the typical design workflow?
My co-founder and I have been working in and managing startup teams for 10 years. As engineers by trade, we’ve always had this problem of receiving design specs and converting them into code. The process today is very inefficient. Red-lines design specs miss a lot of information which leads to guesswork. We’ve discovered an opportunity to end the guesswork by enabling designers to be intentional and specify everything. Artifacts like micro-interactions and responsive layouts which up until now would be conveyed by waving hands could now be conveyed with code.
How do you see the responsibilities of the front-end developer evolving as Anima streamlines the design-to-code process? How about the responsibilities of the designer?
Front-end developers today are spending a lot of their time glaring at a picture, trying to understand what the designer meant, and then writing code for it. If you think about it, they essentially are translators. They translate instructions written in pixels into code. As an engineer that was doing that kind of work, I can tell you that this part of the job wasn’t the fun part. It’s basically grunt work. The movement of component-based development, led by React and adopted by Angular and Vue, has created a great opportunity for us. With Sketch innovations like Symbols and our enhancements like Stacks and Padding, designers build a design system, and as Anima evolves it will be able to generate code components in React/Angular/Vue or other formats. This will allow front-end developers to spend much less time on grunt work of translating pixels to code and instead become front-end architects who assemble the components into a system. Also, it will free up their time to work on complex interactions which automated software cannot generate.
The flip side of this is that designers now have way more responsibility. As Spider Man’s father said, “with great power, comes great responsibility”. Our goal is that UX designers will own user experience. That means that everything that is under the “User-Experience” umbrella is under the UX designer responsibility.
Accessibility is a critical objective when we work with our clients, especially within the healthcare industry. Can you expand a bit about how UX designers can create more accessible designs within Sketch using Anima?
Although we do not have this feature today, basic accessibility standards like adding alt tags and indicating skip links can and should be done within the designs themselves. Similar to what I was saying before, if we can eliminate all of the grunt work developers currently endure and have these determined prior to handoff, it will allow for the developers to focus on more complex interactions.
Effectively building and maintaining component-based design systems is a recurring challenge our clients are trying to conquer. How can Anima help?
Design systems are a great way to have a consistent, robust and scalable design-to-code process. Sketch introduced Symbols and Libraries, which have made designers start to think more like developers. Anima introduced Stacks and Padding which make symbols adapt to their content and become responsive. The secret behind Stacks is that they are an abstraction of the awesome CSS Flexbox concept. When you use Stacks in your symbols, we can take those symbols and convert them into a responsive code component. If you take that idea and apply it to other code concepts, you can start seeing how generating complete design systems becomes a reality.
For teams who have a design routine in place, what questions should they be asking themselves in terms of improving their workflow?
We believe that smart creatives should work with the tools they love. That’s why we didn’t build yet another design tool and instead chose to integrate within Sketch and Adobe XD (more tools to come). So that’s a constraint in that sense. Every week a new design tool comes to market and I definitely don’t recommend changing your tool every week. Having said that, I do recommend evaluating the amount of guesswork and time spent and back and forth between design and development. If you think you spend too much time on that, there are definitely tools out there that are constantly improving that aspect.