Inside Anima - Anima Blog https://www.animaapp.com/blog/inside-anima/ Tue, 06 Aug 2024 11:26:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 New Feature Alert: Enhance Your Enterprise Security with Single Sign-On (SSO) Now Available in Anima’s Enterprise Plan https://www.animaapp.com/blog/enterprise/new-feature-alert-enhance-your-enterprise-security-with-single-sign-on-sso-now-available-in-animas-enterprise-plan/ https://www.animaapp.com/blog/enterprise/new-feature-alert-enhance-your-enterprise-security-with-single-sign-on-sso-now-available-in-animas-enterprise-plan/#respond Tue, 06 Aug 2024 11:26:28 +0000 https://www.animaapp.com/blog/?p=10123 Reading Time: 2 minutes Announcing the launch of Single Sign-On (SSO) support as part of our Enterprise Plan! This new feature is designed to enhance security, streamline access, and simplify user management for organizations of all sizes. With support for the Security Assertion Markup Language (SAML) protocol, we are taking authentication to the next level.

The post New Feature Alert: Enhance Your Enterprise Security with Single Sign-On (SSO) Now Available in Anima’s Enterprise Plan appeared first on Anima Blog.

]]> Reading Time: 2 minutes

We are thrilled to announce the launch of Single Sign-On (SSO) support as part of our Enterprise Plan! This new feature is designed to enhance security, streamline access, and simplify user management for organizations of all sizes. With support for the Security Assertion Markup Language (SAML) protocol, we are taking authentication to the next level.

What is SSO and SAML?

Single Sign-On (SSO) is a powerful authentication process that allows users to access multiple applications with a single set of credentials. By integrating SSO, organizations can improve security and provide a seamless login experience for their teams. Gone are the days of juggling multiple usernames and passwords.

SAML, or Security Assertion Markup Language, is an open standard for exchanging authentication and authorization data between parties, in particular, between an identity provider (IdP) and a service provider (SP). SAML enables SSO by securely transmitting user identities from the IdP to the SP, ensuring that users can access resources without needing to re-enter credentials.

How SSO Works

Integrating SSO is a collaborative effort between us and the client. Here’s how the process works:

  1. Exchange of Information:

    To get started, the client provides us with their Identity Provider (IdP) metadata. This metadata includes essential details such as the IdP certificate, attribute mapping, and other necessary information.

  2. Configuration and Setup:

    In return, we provide the client with our Service Provider (SP) metadata, which includes our certificate, assertion service URL, and other relevant information. This exchange ensures that both parties have the necessary data to configure their systems securely.

  3. Seamless Login Experience:

    Once the setup is complete, users can enjoy a seamless login experience. After selecting the SSO option, users will enter their work email and continue. They will then be redirected to the IdP login page for authentication. Once authenticated, users will be redirected back to the web app to complete the login or signup process with Anima.

Why Choose SSO?

Implementing SSO offers several key benefits:

  • Enhanced Security: By centralizing authentication, SSO reduces the risk of password breaches and provides an additional layer of security. Users no longer need to manage multiple passwords, which reduces the likelihood of weak or reused passwords.
  • Streamlined Access: SSO simplifies the login process, allowing users to access multiple applications with a single set of credentials. This streamlined approach boosts productivity and eliminates the need to remember numerous passwords.
  • Simplified Management: For IT teams, SSO offers a centralized platform to manage user access and permissions. Onboarding and offboarding become more efficient, reducing administrative overhead and ensuring compliance with security policies.

Getting Started with SSO

This new SSO feature is available exclusively as part of our Enterprise Plan. If you’re interested in upgrading or learning more about how SSO can benefit your organization, please contact our sales team.

Stay tuned for more exciting updates!

 

The post New Feature Alert: Enhance Your Enterprise Security with Single Sign-On (SSO) Now Available in Anima’s Enterprise Plan appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/enterprise/new-feature-alert-enhance-your-enterprise-security-with-single-sign-on-sso-now-available-in-animas-enterprise-plan/feed/ 0 Generative code: how Frontier solves the LLM Security and Privacy issues https://www.animaapp.com/blog/genai/generative-code-how-frontier-solves-the-security-and-privacy-issues/ https://www.animaapp.com/blog/genai/generative-code-how-frontier-solves-the-security-and-privacy-issues/#respond Wed, 05 Jun 2024 14:17:50 +0000 https://www.animaapp.com/blog/?p=9968 Reading Time: 3 minutes AI and LLM code generation typically suffer from Privacy and Security issues, particularly with Enterprise users. Frontier is a VSCode that generates code through LLMs, which uses local AI models in order to firewall the user's data and codebase from being exposed to the LLM. This unique approach isolates the codebase and ensures compliance and inter-developer cooperation without compromising the security of the code repo.

The post Generative code: how Frontier solves the LLM Security and Privacy issues appeared first on Anima Blog.

]]> Reading Time: 3 minutes

When it comes to generative AI and LLMs, the first question we get is how we approach the security and privacy aspects of Frontier. This is a reasonable question given the copyright issues that many AI tools are plagued with. AI tools, after all, train on publicly available data and so could expose companies to potential copyright liability.

But it’s not just that, companies have invested heavily in their design language and design systems, which they would never want to expose externally and their code base is also a critical asset which they would never want to partake in LLM or AI training. 
 
When designing Frontier, privacy and security were foremost concerns from day one. First, it was clear to us that Frontier users cannot expose their codebase to anyone, including us. That means that much of the data processing had to take place on the user’s device, which is quite difficult given that we are running in a sandbox inside a VSCode Extension. Secondly, we needed to expose the minimum amount of data and design to the cloud. Additionally, any data that needed to be stored, had to be stored in such a way where it could be shared by multiple team members, but should not be stored on the cloud. Finally, none of our models could have any way to train from the user’s design or codebase.
The first part was isolating the Figma designs. By building a simplified data model, built in memory from within VSCode, using the user’s own credentials, we are effectively facilitating an isolated connection between the user and Figma APIs without us in between and without our servers even seeing a copy of the design.
 
The typical implementation used for generative code generation is to collect the entire code base, break it into segments, encode the segments into embeddings and storing them into a vector database. This approach is effective but won’t work well in our case, since storing this data on our servers would mean we are exposed to the data. In addition, the code base is continually evolving and would need to be reencoded and stored every so often, which would make this process slow and ineffective. 
 
Instead, our approach was to develop an in-memory embedding database, which can be stored and retrieved locally and rebuilds extremely quickly, even on large codebases. In order to secure this data, we store it on the user’s workspace, where it can be included in the git repository and shared between the users, or simply rebuilt per-user.
 
But this would be useless if we would have to send a large code sample to an LLM for each line of code we generate. Instead, we implemented a local model that runs in VSCode, so when we do need to use an LLM, we share the interface of the components instead of needing code. Users can improve the results by opting in to include some real-world usage examples of how Button is used in the codebase, sharing with the LLM a simplified thin code showing how Button component is used in the code base, but not how Button is implemented or what it actually looks like or does…
 
By limiting the amount of data and anonymizing it, we can guarantee that the LLM doesn’t get trained or store the user’s code in any way.
 
But how do we guarantee that data doesn’t get “leaked” from outside sources that the LLM trained on back into the codebase, exposing the company to potential copyright risk? First, we limit the type of code that the LLM can generate to specific component implementations, only after it passes a guard rail system. The LLM Guard rail validates the code makes sense, and can identify hallucinations that might invalidate the code or introduce copyright liability to the code base. If the code passes the guard rail system, we are extremely sure that the results correlate with what the user expects from the component code.
 
Finally, for full transparency, we store the data in open JSON files inside the .anima folder on your project’s workspace. Different workspaces would have different settings and components. Sharing this information between users can be done through git (or a shared file system of any kind), which eliminates Anima from being exposed to any of the cached data for components, usage or the entire codebase or Figma design data.

The post Generative code: how Frontier solves the LLM Security and Privacy issues appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/genai/generative-code-how-frontier-solves-the-security-and-privacy-issues/feed/ 0 Meet the People Behind the Product: An Inside Look at Anima’s Dynamic Team https://www.animaapp.com/blog/inside-anima/meet-the-people-behind-the-product-an-inside-look-at-animas-dynamic-team/ https://www.animaapp.com/blog/inside-anima/meet-the-people-behind-the-product-an-inside-look-at-animas-dynamic-team/#respond Wed, 06 Mar 2024 12:00:48 +0000 https://www.animaapp.com/blog/?p=9591 Reading Time: 3 minutes Anima, a seven year old thriving startup making waves in the world of design to code, has been turning heads not just for its groundbreaking product but also for the small but extraordinary team driving its success. In this article, we delve into the personalities and passions of the people behind Anima, discovering how this tight-knit group carries diverse worlds on their journey to success.

The post Meet the People Behind the Product: An Inside Look at Anima’s Dynamic Team appeared first on Anima Blog.

]]> Reading Time: 3 minutes

Anima, a seven year old thriving startup making waves in the world of design to code, has been turning heads not just for its groundbreaking product but also for the small but extraordinary team driving its success. In this article, we delve into the personalities and passions of the people behind Anima, discovering how this tight-knit group carries diverse worlds on their journey to success.

Size Doesn’t Matter – It’s the Minds That Count

With just 20 team members, Anima manages to leave a lasting impression on users. Led by the mastermind Vice President of Research and Development, Ofer Laor, orchestrates a symphony of skills. Ofer, ensures that every team member has what they need for their coding endeavors and that there is always the correct balance of tasks and strategies between product and development.

Passions Beyond Code

Diving deeper into the team, we discover the multifaceted individuals shaping Anima’s success. Haim, the Director of R&D and a talented musician, dreams of releasing an album in 2024, finding inspiration in the team’s “can do” attitude. Moez appreciates the flexibility and support Anima provides, while Bruno thrives on the diversity of tasks, ensuring the job never gets dull. Myriam shared her love for the people and the product, loving and believing in the product is even more so important as the head of marketing.
Omer revels in the high intensity of work and constant development of new ideas.
When asking Andrico about his standout moment from 2023, he shared the thrill and excitement while witnessing Anima’s spotlight at Config 2023, showcased in front of a captivated audience of thousands. To Yarden, with AI launching, 2023 was a year of bringing things to life.

“I really love the product, which is so important in my line of work” (Myriam, Head of Marketing).

Diversity Powers Innovation

Anima strongly believes in the power of diversity, fostering a global team with members from all around the globe including Morocco, Italy, Brazil, London, Paris, Germany, Spain, Montenegro and Israel. Each member brings a unique perspective, contributing to a vibrant and enriching work environment.

Team Unity

What makes this team truly unique? According to Aymeric, it’s the continuous learning from each other. Being part of a startup where you feel that you are exactly where you belong.
Anima’s core philosophy revolves around clear goals, shared direction, and recognizing the value each team member brings. Vision for success? According to Federico to have a tool in the daily toolkit of every frontend developer.

Dreaming Big

When asked about Anima going big, Ognjen points out the challenge of building trust with users and shares that when the day comes that Anima goes big potential users will recognize Anima’s coolness, fall in love with the product, and create meaningful projects.

“Anima going big will be when it is a part of my work flow as a developer, what Anima does is something I do everyday so it has to be integrated in my day to day, every time I open my code Anima’s logo will pop up on my screen” (Moez)

The Unsung Heroes

Behind the scenes, individuals like Leonardo, a “firefighter” at Anima, tackles daily challenges, listens to customers feedback, and works collaboratively to enhance the product. As Andres wisely notes, in an era dominated by AI, it’s crucial to maintain the human element. Anima aims to prioritize users, ensuring they feel appreciated and valued. Alicia, Anima’s recruiter commends the dynamic work environment, the impact of Anima in the industry, and the gratitude received from people eager to be part of the journey.

Conclusion

Anima’s journey is not just about coding; it’s about the people who breathe life into the product. It’s a testament to the belief that a small, passionate team can create waves of innovation and redefine the landscape of design and development.
Wanna join us in transforming front end? Apply here! 

The post Meet the People Behind the Product: An Inside Look at Anima’s Dynamic Team appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/inside-anima/meet-the-people-behind-the-product-an-inside-look-at-animas-dynamic-team/feed/ 0 The culture at Anima App https://www.animaapp.com/blog/inside-anima/the-culture-at-anima/ https://www.animaapp.com/blog/inside-anima/the-culture-at-anima/#respond Mon, 14 Feb 2022 13:32:57 +0000 https://www.animaapp.com/blog/?p=7168 Reading Time: 5 minutes There's stiff competition for tech companies to attract top talent. Here's how Anima draws, retains, and rewards the best of the best.

The post The culture at Anima App appeared first on Anima Blog.

]]> Reading Time: 5 minutes

In this article, we’ll show you what it’s like to work at Anima. We know how important it is to hire the right people, and then to keep them happy and motivated—but this is not an easy job in such a competitive climate!

Here at Anima, however, we’ve spoken to our employees, run anonymous surveys, and done a lot of external research to understand how to build and maintain a culture that appeals to top talent.

First of all, who are the people Anima wants to attract?

Here’s what our team members have to say:

As you can see, here at Anima we look for humble, kind, and highly skilled people. People that like working with a high degree of autonomy, and making an impact by solving complex problems in a collaborative, fast-paced, and fun environment.

Does this sound like you? Join us! 🙂

Secondly, what do these people value the most in an organization?

Our research tells us that they care most about the team, the people, and the environment. What is it like to work for our company? What does collaboration look like? How do we have fun together?

In addition, people want to work on a great product, experience new and interesting challenges, and grow personally and professionally.

But mostly, our employees value the relationships they have with their teammates.

So how do we build and maintain a culture that appeals to top talent?

Here are some of our key initiatives! 👇

We listen to our people—A LOT!

Our HR team and co-founders are always asking for feedback. Every month, each employee has a discussion with HR to review their experiences at Anima, give feedback, and offer suggestions. And it’s not limited to HR.

There are also weekly conversations between our co-founders, team leads, and team members to generate additional insights and compile meaningful feedback. We’re always listening, and any issues that arise are solved quickly, with new initiatives added as needed.

We collaborate

Despite the challenges of being a distributed team, collaboration is REALLY important to us here at Anima. In addition to daily stand-ups, we do a ton of online collaboration via Slack, Asana, Dropbox paper, and Loom (to name a few 😁). We document and make information easily accessible to anyone in the company at any time. This helps us stay agile and informed.

 

We share knowledge

When you’re surrounded by very talented people, it’s important to leverage the unique, specialized knowledge of every individual! We organize meetings for the tech team with the sole purpose of sharing ideas, insights, and discoveries.

Our tech people are always experimenting and innovating, and as a result, they are learning constantly! Everything each of us learns is shared with everyone else, so we grow and expand together 🙂.

Another cool way we share our knowledge and expertise is by organizing tech Hackathons—and it’s not a hackathon without Pizza (as you can see here👇)!

We share business insights

Once a week we host a meeting for the entire company. Thirty-five people, all teams on deck, for an hour of business mixed with pleasure! 

Our co-founders and product owners share business updates, upcoming projects, OKRs, road maps, and anything else relevant to the company, its strategy, and our collective goals. This ensures that everyone knows what each team is working on and that current priorities are clear. We connect the dots, generate ideas, and bring everything back to our own teams for the week to come.

And we always spare 20-30 minutes for socializing at the end 😀.

We keep engagement up

How? By organizing interactive games like Secret Santa, or sending team members nice surprises for their birthdays, weddings, or work anniversaries! 😉

We also organize weekly games like Kahoot, Trivia, Pictionary, and Video Charades where people have a chance to get to know team members they don’t usually work with!

We have fun! 

And of course, we celebrate, reward, and mingle!

Last but not least, we share our lives with the team!

We respect our teammates’ privacy, but for those who are eager to share, we’re always excited to see their little ones grow, how their vacations went, and how much fun they have with their pets 🐶.

This is just a peek into Anima’s culture 👀. We hope you liked it!

Want to hear more? Reach out to us!

We’re currently hiring kind, curious, smart people who want to have the time of their lives while changing the way UI to code happens.😉

Want to join our amazing team? Check out Anima’s open positions!

The post The culture at Anima App appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/inside-anima/the-culture-at-anima/feed/ 0 Anima raises $2.5M in seed round https://www.animaapp.com/blog/inside-anima/anima-raises-2-5m-in-seed-round/ https://www.animaapp.com/blog/inside-anima/anima-raises-2-5m-in-seed-round/#respond Wed, 16 Sep 2020 09:56:29 +0000 https://www.animaapp.com/blog/?p=4992 Reading Time: 3 minutes Setting our focus on continuous design-to-development and developer-friendly code.

The post Anima raises $2.5M in seed round appeared first on Anima Blog.

]]> Reading Time: 3 minutes

Back in 2017, when we started Anima, one thing was crystal clear. Handoff tools have improved our lives. But, there was still a critical gap in the design-to-development process.

As a developer (married to a designer), I knew first-hand how tense design handoff can be. So did Michal and Or, my co-founders. We lived through the pain from both sides and felt a deep determination to solve it.

And so, we set out to solve the problem. We founded Anima.

Anima’s goal is to help product teams deliver better products, faster.

Product and community first

We graduated Y-Combinator Summer 2018 batch. At the time, we decided to focus on the product rather than fundraise. Converting design to high-quality code is a hard task. Winning the hearts of designers and engineers is 10x harder.

We started with bringing code capabilities to design tools (Today an industry standard). Then, animations and interactions, then high-fidelity prototypes based on code. And all that time, we pursued our end goal — Automating the design-to-code process.

Our fantastic community grew to over 300,000 designers and developers. Today, we have users from product teams at Google, IBM, Verizon, Salesforce, BlueJeans, Starbucks, and many other great companies.

image of Pugsy the dog of one of the founders of Anima

Bugsy. The team’s mascot

Taking it to the next level

By the end of 2019, Anima was already profitable. Companies worldwide were getting real value out of it. And, we’ve had a clear vision and understanding of where we were headed.

Our roadmap for becoming the first continuous design-to-development platform was drawn. To execute it, we decided to fundraise. At the time, we already knew Hetz Ventures, and the choice to go with investors who share our vision was natural. Along with Hetz, joined Zohar Gilon — an Israeli super-angel.

If you’ve been tracking Anima, you might have seen our recent announcements. With our Adobe XD support and Figma support, we have opened Anima gates to all product designers.

Looking ahead, our focus is set on developers and developer-friendly code. We believe component-based systems are essential to a continuous design-to-development process.

The next version of Anima will address developer-friendly code. Coming before the end of the year.

Building and growing during the pandemic

The Anima team has tripled in size during Covid-19. Although it was far from ideal, we decided to turn the lemon into lemonade.

Image of a Zoom meeting with all the staff of Anima working remotely

Anima team. Operating 100% Online, including beer night

Working 100% online, we broadened our horizons and hired people from all over the world. We now have team members in Tel-Aviv, NYC, Australia, Morocco, and Barcelona — and we’re still hiring globally. We joke that wherever you are in the world, the weekend beer and ice cream will find you.

Anima in the news

Thank you.

A big thank you to our community. For allowing us to evolve using their amazing feedback and for spreading the word. To our talented team. To our investors. And to everyone else who has helped along the way. The best is yet to come.

The post Anima raises $2.5M in seed round appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/inside-anima/anima-raises-2-5m-in-seed-round/feed/ 0 Introducing Anima 5: bringing Material Design to Adobe XD and Figma https://www.animaapp.com/blog/inside-anima/introducing-anima-5-bringing-material-design-to-figma-and-adobe-xd/ https://www.animaapp.com/blog/inside-anima/introducing-anima-5-bringing-material-design-to-figma-and-adobe-xd/#respond Mon, 11 Oct 2021 14:31:49 +0000 https://www.animaapp.com/blog/?p=6480 Reading Time: 3 minutes Another milestone on Anima’s journey to connect your design tool with your codebase

The post Introducing Anima 5: bringing Material Design to Adobe XD and Figma appeared first on Anima Blog.

]]> Reading Time: 3 minutes

Here at Anima, we’re on a mission to reinvent the design-to-development workflow. We’re constantly thinking of ways to improve how designers and developers work—both individually and collaboratively—because we are designers and developers. We experience the friction of the traditional designer-developer relationship the same way you do.

Our design-to-code platform gives designers the power to build high-fidelity, code-based prototypes in their existing design tools without actually touching code. They can convey their concepts as intended, collaborate with teammates in real-time, and hand developers fully functional prototypes along with pixel-perfect HTML, React, and Vue code.

We’re integrating all of the features that used to require multiple tools into a one-stop-shop: your design tool paired with Anima’s platform.

But we still have a lot more to do.

I’m proud to announce that today’s launch of Anima 5 marks another milestone on our mission to perfect the design-to-development workflow: truly functioning Material Design in Figma and Adobe XD. This means you can now build prototypes using actual code-based Material UI components.

Anima 5 unlocks the full potential of Material Design

The Material Design dilemma

If you build with Material Design in your current design tool, you’re limited to flat, static, image-based Material Design components.

Instead of a responsive, interactive prototype that looks and functions like the final product, you get a static mockup with no functionality that merely resembles it.

This results in inadequate user-testing, frictional developer handoff, delayed buy-in from stakeholders, and more iterations. Not to mention a final product that likely differs from what you designed in the first place.

Anima 5 adds truly functioning Material Design

Anima 5 brings a truly functioning, code-based Material Design library into Figma and Adobe XD, allowing you to create realistic, responsive prototypes in the design tools you already know and love. It’s as simple as customizing fully interactive components like buttons, drop-down menus, text fields, and sliders, then dragging and dropping them into your design.

Anima 5 brings truly functioning Material Design to Figma and Adobe XD

Anima 5 brings truly functioning Material Design to Figma and Adobe XD

Our plugin lets you use Material Design to communicate your vision through high-fidelity prototypes that look, feel, and function exactly like the final product.

From flat and static to dynamic and interactive

You can now reap the full benefits of Google’s game-changing Material Design system in your own design tool with building blocks that are dynamic and interactive instead of flat and static:

image-based vs. code-based Material Design Anima

The benefits for designers and product teams that work with Material Design can’t be overstated:

  • More effective user-testing → more relevant user feedback and easier implementation
  • Faster buy-in → no time wasted explaining value and functionality since stakeholders and clients can interact with a prototype that feels real
  • More efficient developer handoff → developers get self-explanatory, fully functional prototypes along with pixel-perfect HTML (formatting, styles, fonts, image assets)
  • Fewer iterations and faster TTM → streamlining user-testing, buy-in, and handoff means bringing better products to market in a fraction of the time

Anima’s vision for the future

We don’t believe in the status quo. We want to change the way designers and developers work, bring users better digital experiences more quickly and at scale, and eliminate the friction of the traditional design handoff process. No more silos, no more miscommunication, and no more unnecessary grunt work.

Our next iteration won’t just allow designers to provide developers with high-fidelity prototypes built on Material Design. It will give developers complete UI component code based on various open source projects they already use.

We’re working around the clock to improve code quality and accelerate the pace of innovation so that you can accomplish more, in less time, with greater success.

Stay tuned—there’s a lot more to come!

Start building high-fidelity prototypes today

 

The post Introducing Anima 5: bringing Material Design to Adobe XD and Figma appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/inside-anima/introducing-anima-5-bringing-material-design-to-figma-and-adobe-xd/feed/ 0 “The transition from designer to developer should be automatic” https://www.animaapp.com/blog/inside-anima/michal-cohen-the-transition-from-designer-to-developer-should-be-automatic/ https://www.animaapp.com/blog/inside-anima/michal-cohen-the-transition-from-designer-to-developer-should-be-automatic/#respond Sun, 02 May 2021 10:17:16 +0000 https://www.animaapp.com/blog/?p=5755 Reading Time: 6 minutes Originally published on Portfolio Magazine | by Yuval Sa’ar

The post “The transition from designer to developer should be automatic” appeared first on Anima Blog.

]]> Reading Time: 6 minutes

Michal Cohen, co-founder, CPO and design leader of Anima, simplifies the transition from designers to developers. “We wanted to make the process of creating digital products easier, with an emphasis on user experience.

״The transition from designer to developer should be automatic, something there was not working well”.

Five years ago, at the age of 30, Michal Cohen began a certification course in visual communication at Shenkar College of Practical Engineers, Israel. This was after a bachelor’s degree in Management and Economics at Ben-Gurion University. She specialized in finance, with three and a half years at Bank Leumi under her belt. “I liked the job and liked the capital market, but I did not like the style of work,” she says.

“I always knew I would be self-employed, that I would have something of my own, and the study of visual communication made me realize what I wanted. I could not afford to do a four-year degree, I did not quite know what this field means, but I realized that even when I studied business administration I had creative and different solutions from other people. I felt I had found my place”.

While studying, she began working on Anima with her husband, Avishay, and another partner. The meaning of anima is to animate, to give life, in Cohen’s context the desire was to give life to the design, to the code, and to the product. “We wanted to make the process of creating digital products easier, with an emphasis on user experience. The transition from designer to developer should be automatic, something there was not working well”.

What do you mean?

“There is frustration from both sides – from the designers on one hand, every point in their design has meaning, every element has been taken into consideration, and when it comes to development a lot of things fall by the wayside. On the part of the developer on the other hand – there is a lot of grunt work that is accompanied by unnecessary mistakes, and this process can be terribly frustrating for both parties, and require concessions and compromises due to lack of time. We wanted the programmer not to have to deal with moving pixels but only what was important behind the interface”.

Anima helps product teams deliver the best version of their vision

I’ve heard designers say “the programmer told me to send it in Anima”

Anima’s system offers a complete “design-to-development” platform, which allows designers and developers to share a common work environment and one language. Contrary to the accepted form of work, when designers finish their work and handoff the design to the development team, where the developers have to translate the design into a live code and product from scratch.

With Anima, product designers can continue to work on the tools they are used to such as Adobe XD, Sketch, and Figma, and at the end of the design process, export the design to the Anima platform, turning it into a code-based prototype that also includes animations, dynamic files, and project assets.

This allows the designer to fulfill his design vision in full, without losing components or functionality in the translation between design and development.

On the developer’s side, the option to automatically translate the design into developer-friendly code saves most of the grunt work and dramatically shortens development time, allowing the developer to invest in the architecture and precise tuning of the interface.

Anima is currently used by 300,000 designers (mostly in the United States), developers, and product managers, from companies such as Google, Amazon, Walmart, Facebook, Verizon, Salesforce, and Starbucks. Every week, the Anima community converts more than 4,000 designs into code.

“Large portion of our users are designers: the goal is first and foremost to give value to the designer, even to the individual designer within the organization. We want to grow from the bottom up, from the design team to the development team. I’ve heard designers say “the programmer told me to send it in Anima”.

Anima's design language

How did you start the work?

“We built our own studio, made a first version but the difficulty was that users had to learn a new tool. From our conversations, we realized that the feature we were most excited about was the responsive layout. We released a plugin for the Sketch software and it had a really hysterical buzz, suddenly YouTube uploaded videos of how to use it, everything was organic. Back then, Sketch dominated the market, most of the development teams worked with them, there was our target audience. Today, it is already available for all the design tools”.

“Slowly we began to improve the product, we no longer had to force users to learn something from scratch. We could let them work with the tools they are used to working with, and pass the design onto the developer with a tool they are used to. Making sure that the whole process is done with as few complications as possible along the way”.

In 2018, Anima was accepted to an accelerator in Silicon Valley, Y Combinator. “We moved there for 6 months, made connections, met companies that were potential customers, and started looking for the niche we wanted to get into. So the idea came up for the first time to produce a code-based product”.

“At the end of last year, we released our latest big version, the novelty of which is that the developer can select one element in the design and automatically get his code. You no longer receive a complete code for the entire site”.

Anima: empowering product teams by turning their designs into React, HTML, & CSS code

What can be automated, should be automated

Up until a year ago, Cohen was the only designer in Anima, and in the past year, she recruited three more designers to the team. “We try to create a discourse that dominates the whole of society, that there will be a match at the design and artistic level. We talk to designers, our users, develop new features, do a lot of A/B testing on every feature, and always measure everything”.

How do they get to you?

“A lot of them come through the new plugins, and they meet a product loaded with features. We see how many have downloaded and activated, and on the other hand many are downloading the plugins and have no idea what to do next, how to proceed. Our focus now is to improve the user experience and increase the value we give to designers.

“You keep coming up with ideas for improvement, drawing conclusions, and seeing the impact it makes. You do something small and see that you have an X amount of more downloads, or more users paying. It’s our whole life, all day long: and the most amazing part is that you take an idea, and in a very short amount of time it reaches our hundreds of thousands of users. You can really make an impact”.

“It’s constant learning: learning the right methodologies every day, and then suddenly we’re a team of 20 people. You say to yourself, wait a minute, let’s do it right, let’s understand how to create the right product workflow until it reaches down to design and development. We are improving all the time, once you live the product it comes to you naturally. It’s crazy that it’s been only four years, it feels like my whole life”.

Is it not tiring?

No. I keep things for retirement; for example, I’m dying to do an illustration course… 2020 was supposed to be a crazy year, I gave birth in April, and it really was a crazy year but from the other perspectives, I wouldn’t change anything. We really appreciate the point where we are today, it’s not taken for granted”.

What next?

“We would like to be the obvious choice used in every product team, in every transition between design and development team. This is a very hot field, the amount of funds facing us is very large. It was to invent from scratch something that did not exist: it’s not that you have an idea, there are similar products, and you see how others have solved the problem”.

How do you explain that?

“While the design tools are very advanced when it comes to user experience, everything related to how to write code is like 30 years back; Nothing has changed.

“It cannot be that the attitude has not changed, it is simply a problem that is very difficult to solve”

We believe that what can be automated should be automated. It cannot be that the attitude has not changed, it is simply a problem that is very difficult to solve. We are not the first to think about it, we just do it differently. Our advantage is that we are not changing work habits”.

Do you think your track plays a part in it?

“Maybe in retrospect I would have taken a different route, but I’m not sorry, it gave me a business mindset at the entrepreneurial level, with all the risks of setting something up from scratch. From understanding economics and business and researching myself, what pushes me in the end, to get to the design, all the way to the product, it connected me to the whole puzzle. At the end, I got to where I needed to be”.

 

The post “The transition from designer to developer should be automatic” appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/inside-anima/michal-cohen-the-transition-from-designer-to-developer-should-be-automatic/feed/ 0 Introducing the 1st design-to-development platform https://www.animaapp.com/blog/inside-anima/introducing-the-1st-design-to-development-platform/ https://www.animaapp.com/blog/inside-anima/introducing-the-1st-design-to-development-platform/#respond Tue, 27 Oct 2020 07:20:46 +0000 https://www.animaapp.com/blog/?p=5234 Reading Time: 3 minutes Anima 4.0 is here - high-fidelity prototypes, developer-friendly code and continuous team collaboration.

The post Introducing the 1st design-to-development platform appeared first on Anima Blog.

]]> Reading Time: 3 minutes

After months of hard work, we’re proud to introduce Anima 4.0! The first design-to-development platform.

In a nutshell, Anima has evolved into an end-to-end solution that transforms the design-development handoff into a continuous and integrated process. This means less grunt work, minimal iterations, less pixel-pushing, and more time to be creative.

For the first time, developers can cherry-pick design elements and get runnable React code!

Let’s dive into Anima 4.0’s top features:

Responsive high-fidelity prototypes

Whether you’re designing a mobile app, web dashboard, or website, Anima empowers you to deliver experiences rather than screenshots.

  • Direct integration: A quick plugin installation in Figma, Sketch, or Adobe XD and you’re ready to roll.
  • Live, interactive prototypes: Add videos, animations, real input fields, hover effects, and even embed custom code.
  • Automatic flex-box layout: Use breakpoints and pins to create a single prototype for all screen sizes.

GIF showing how to make responsive high-fidelity prototypes with AnimaAnima’s Responsive Prototypes

Developer-Friendly React Code

The new developer-friendly code mode allows you to select any design element and instantly generate high-quality code that you can quickly build upon.

  • Works with your development stack: Translate any design element into clean code for HTML/JS/CSS and React (Vue.js and Angular soon).
  • Time-saving: Instead of coding UI from scratch, eliminate grunt work, and build upon a runnable boilerplate code.
  • Clear, readable code: Copy and paste code components without stressing about dependencies or code refactoring.
  • Code overrides: Developers can add code and tweak Anima’s code as required in real-time.

GIF showing developer friendly code for designsGet developer-friendly React code

Code Overrides

Overrides allow you to tweak the code generated by Anima, whether that be by adding a snippet of HTML or CSS properties. This is particularly helpful when you’d like to fine-tune or improve on particular components while still working closely with the original design.

  • Instant tweaks: Edit the code directly in Anima and instantly see the results rendered in real-time.
  • Everything in one place: Review all overrides in a single list.
  • Robust playground environment: View or hide all overrides with a single Off/On switch to compare the original design to the tweaked design.
GIF showing code overrides for generated code for designs with Anima

Anima’s code override

Compare Mode

Increase clarity and collaboration across design, development, and product teams through the new Compare mode. This mode seamlessly overlays original designs with dev-tweaked ones using the actual running code.

  • Transparent overlays: Get an instant comparison of how altered designs line up with the original UI creative vision.
  • Minimize handoff back-and-forth: Have a point of reference to help developers stay faithful to original UI designs at all times.

Collaborate

Master the art of design-to-development workflows with Anima’s dynamic collaboration features and get everyone on the same page.

  • Build consensus: Team members, stakeholders, and clients can accurately feedback on the true experience of your design, rather than on static images.
  • Continuous handoffs: Provide developers with accurate, structured specs and code-friendly prototypes that sync with your design as it evolves.

We have more exciting features lined up, so stay tuned to learn more on how to up your design-to-code handoff game. For now, take Anima 4.0 for a spin.

Tap into workable developer-friendly code, smoother design-to-dev collaboration, and easy, breezy feedback loops that make redline specs a thing of the past.

Try Anima 4.0 now.

The post Introducing the 1st design-to-development platform appeared first on Anima Blog.

]]> https://www.animaapp.com/blog/inside-anima/introducing-the-1st-design-to-development-platform/feed/ 0