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

Anima App's medium blog
Design + Sketch
Published in
3 min readApr 27, 2020
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.

From design to code, automated.

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

Why use Input Types?

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.”

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.

Required Feature

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.

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.

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

--

--