Design + Sketch
Published in

Design + Sketch

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

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
Demo file | Live demo website

3. Export your form to HTML or CSS in one single click 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.

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

--

--

--

A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

Recommended from Medium

Kaizen: an app for building skills incrementally

Tekera Resource Centre —A Holistic Approach to Design

‘HLH’: S01.E07-E11. “Hidden London Hangouts”

How We Designed the LC Waikiki Mobile Application? — E.4: Homepage

Engagement Ring Tutorials 6b: Create Four Ring Shanks

Review of CXL Mini Degree as UX Designer (week 5)

An accidental tryst with the Gift Card industry in the UAE

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
Anima App's medium blog

Anima App's medium blog

Design to development platform

More from Medium

Responsive layout grid guide for designers

breakpoints example

Pixel Pioneers Speaker Spotlight: Bianca Berning on Variable Fonts and the Future of Web Typography

Building a Pattern Library | Design Systems & Components

Theoretical base on coloristic for UI/UX designer