New in Anima: Better Forms with Input Types, Auto-Complete, and Validation

Anima App
Anima App
Apr 27 · 3 min read
Image for post
Image for post
Demo file | Live demo website

Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Image for post
Image for post
From design to code, automated.

One of the most unique features in Anima is the ability to have live forms inside your design.

Anima supports four different input types:

  • Email
  • Password
  • Text
  • Number

By specifying which input type an input field is intended for, your prototype feels much more real.

For example, by specifying that an input field is intended for Email, the browser will let the user know if the email they entered isn’t a valid email address. This is called “form validation.”

Image for post
Image for post
Demo file | Live demo website

Also, if users have their email stored in their browser data, then the browser will suggest Auto-Complete and enter their full email into the field automatically.

If you use Anima for a real live website, this will likely increase conversion as it makes it easier for users to sign up.

Another great new feature is the “required” checkbox. If the field is required, then trying to submit the form without it will present an alert asking the user to fill out that field.

Image for post
Image for post
Demo file | Live demo website

How does it work?

  1. Design your form in Sketch, Adobe XD, or Figma(or use our demo file)
  2. Choose the wanted field and define its purpose (email, password, etc.) by pressing on the “forms” button

3. Export your form to HTML or CSS in one single click and see the magic

When you’re done designing your form, you can publish it or export your page to working HTML and CSS code.

Image for post
Image for post
From design to code, automated.

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima team

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store