Skip to content

Latest commit

 

History

History
executable file
·
74 lines (51 loc) · 3.44 KB

index.md

File metadata and controls

executable file
·
74 lines (51 loc) · 3.44 KB
title platform type sidebarSorting categories order
Anima for Figma
figma
getting-started
1
Getting Started
1

Anima in Figma Editor

What Is Anima App?

Anima App enables designers to create real experiences, rather than clickable prototypes, and offers collaboration tools to build consensus across teams and organizations. Anima also converts Figma, Sketch and Adobe XD designs to React, Vue or HTML/CSS websites that can be hosted on Anima servers or can be downloaded as a React, Vue or HTML/CSS code package and self-hosted. No coding needed!

Anima App is a great tool for:

  • High-Fidelity Prototypes (Learn how you can create one)
  • Landing Pages
  • Marketing websites
  • Static websites
  • Websites based solely on HTML and CSS

Anima App does not currently support:

  • Dynamic websites with Javascript

Anima App is great for:

  • Freelance designers
  • Designers in startup teams
  • Web Design agencies

Main Features

Anima for Figma has 2 main sections:

Flow

  • Links - Anima supports Figma's native prototyping links and adds Anchor Links
  • Breakpoints - A way to make your design look great in Mobile, Tablets, and Desktops
  • Set as Homepage - Set frame as the homepage of your prototype of website

Smart Layers

  • Forms - You can set up forms and enable visitors of the website to submit information such as their contact information
  • Text Input - Add real Text Input fields that include input validation for Email, Password, and Numbers
  • Embed Code - Embed HTML snippets that enhance your website functionality
  • Fixed Position - Fixes components in one place while the rest of the content moves behind them on scrolling
  • Hover Effect - Animations that happen when a visitor hovers their mouse over a specific element
  • Entrance Animation - Animation that is activated on scroll
  • Videos - You can embed a video player in the website. YouTube, Vimeo, MP4, GIFs or Lottie files are all supported

Panel Screenshot

How Does It Work?

Here are the steps for creating a prototype or a website from an Figma document:

  1. Design your website in Figma where each web page is represented by a frame
  2. Add Links, Forms & Text Inputs, Videos, Hover Effects, and other Smart Layers
  3. Create a preview in the browser to verify that the website looks as desired
  4. Sync to Project and publish!

Sample File

Try it yourself in Figma!

  1. Download and install Anima for Figma
  2. Open the edited Figma sample file
  3. Click the Preview in Browser button in the Anima panel
  4. See it live in the browser. [Open]