Demo file | Live demo website

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

Demo file | Live demo website

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

Demo file | Live demo website

3. Hit 'Preview in Browser' and see the magic

Demo file | Live demo website

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?