All Collections
Popular Articles
Password Fields, Emails Validation and More, Right Inside Sketch, Adobe XD, and Figma.
Password Fields, Emails Validation and More, Right Inside Sketch, Adobe XD, and Figma.

New and improved Anima forms

Avishay Cohen avatar
Written by Avishay Cohen
Updated over a week ago

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

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' Field

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.

How does it work?

  1. Design your form in Sketch, Adobe XD, or Figma

  2. Choose the wanted field and define its purpose (email, password, etc.) by pressing on the “forms” button

3. Hit 'Preview in Browser' 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.

Learn More

Did this answer your question?