Shortcut to switch between design/Prototype - “Shift + E”

How does it work?

1. Two components: State & Trigger
2. There can be multiple types of trigger
3. There can be multiple triggers for State A
4. One trigger will lead to only one state

Let’s understand this side panel

1. View designs on your preferred device
2. Background color for prototype view.
3. Flows are the starting point of your animation

Smart Animate will work properly if State A and State B of the object has same layer name.

Components of a Prototype

• Trigger
• Action
• Destination
• Animation type
• Easing
• Duration
• Reset scroll position

Bezier Presets

A Bézier curve is a curve used in computer graphics and related fields.

There are 7 curves you need to know. Most designers use only 2

1. Linear- This is the default choice. As objects in nature rarely move at a constant speed, linear curves can look unnatural or robotic.
2. Ease In - Creates an animation that starts slowly and accelerates as it reaches the end of its duration. This works well for smoothly transitioning objects out of view. One downside is it can feel sluggish.
3. Ease Out - Ease Out is the opposite of an Ease In curve, where the animation starts fast and slows down as it reaches the end of its duration. It works well for moving objects into view.
4. Ease In And Out - Starts the animation slowly, accelerates in the middle, and slows at the end of its duration. It feels smooth and responsive, but can feel unnatural or too perfect when applied to everything.
5. Ease In And Out - Starts the animation slowly, accelerates in the middle, and slows at the end of its duration. It feels smooth and responsive, but can feel unnatural or too perfect when applied to everything.
6. Ease Out Back - Is the opposite of Ease In Back. The animation starts fast, then slows and goes past the ending keyframe's value.
7. Ease In And Out Back - Starts the animation slowly as it overshoots the initial keyframe’s value, then accelerates quickly before it slows and overshoots the ending keyframes value.

Prototyping Using Variable

• Declare A variable
• While prototyping set Action to “Set Variable”
• You can change anything you want while clicking that certain component.
• The Sad part is this is available in “Professional Plan”