- Anima for Sketch
- Anima for Sketch
- Install Plugin
- Install Plugin
- Create a Project
- Create a Project
- Preview & Sync Project
- Preview & Sync Project
- Upgrade a Team
- Upgrade a Team
- Tutorial Files
- Tutorial Files
- Introduction
- Introduction
- Pins
- Pins
- Stacks (Flexbox)
- Stacks (Flexbox)
- Padding
- Padding
- Screen Presets
- Screen Presets
- Keyboard Shortcuts
- Keyboard Shortcuts
- Symbols
- Symbols
- Examples
- Examples
- Introduction
- Introduction
- Links
- Links
- Breakpoints
- Set Homepage
- Breakpoints
- Set Homepage
- Hover Effects
- Hover Effects
- Entrance Animation
- Entrance Animation
- Fixed Position
- Fixed Position
- Text Input & Forms
- Text Input & Forms
- Videos/GIFs/Lottie
- Videos/GIFs/Lottie
- Embed Code
- Embed Code
- Interaction & Animation
- Interaction & Animation
- Interactions Intro
- Interactions Intro
- Samples
- Samples
- Play
- Breakpoints Viewport
- Comments
- Code
- Share Prototype
- Manage Access Levels
- Publish Website
- Publish Website
- Custom Domains
- Custom Domains
- Analytics
- Analytics
- Project Settings
- Project Settings
Getting Started
Layout
Prototype
Collaborate
Prototype Link
Project Settings
Built with ❤️   in NYC & TLV
Anima for Sketch
Main Features
Prototype has 3 main sections:
Flow
- Links - In Sketch, each artboard is a screen. You can set up links between artboards, to external websites, or overlay an artboard over another
- Breakpoints - A way to make your design look great in Mobile, Tablets, and Desktops
Smart Layers
- Forms - You can set up forms and allow users submit information such as their contact information
- Text Input - Add real Text Input fields that include input validation for Email, Password, Numbers, and Required fields that users can enter in Forms
- Embed Code - Embed HTML snippets that enhance your prototype’s 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 user hovers their mouse over a specific element
- Entrance Animation - Animation that is activated when loading a screen or scrolling
- Videos - You can embed a video player in the prototype. We support YouTube, Vimeo, MP4, GIFs or Lottie.
Interaction/Animation
- Interaction - Add Click, Hover, or Timer actions to trigger state transitions
- Animation - States transition automatically without a trigger
How Does It Work?
Designers can take their design to production in a matter of seconds.
Here are the steps for creating a prototype or website from a Sketch document:
- Design your prototype or website in Sketch, where each screen is represented by an artboard
- Make the design responsive by using Layout
- Add Links, Forms, Videos, and any other Smart Layer feature
- Create a preview to verify that the website looks as desired
- Share it others and collaborate!
Get Help
Say Hi to Nola
Nola is your personal digital assistant to Anima. Nola will give you tips and will also answer your questions.
If something is wrong, Nola will be sure to let you know. To get even more tips, click Nola’s button.
Sample File
Try it yourself in Sketch!
See some of the feature listed above on a live prototype:
- Download the Sketch sample file
- Click the Preview in Browser button in the Anima panel to see it live
- Explore!
Caught a mistake or want to contribute to the documentation?
Edit this page on Github!