Figma Prototype +
Animate
Addressing Figma’s limitations with prototyping and animating.
Overview
With Figma’s recent shift into illustration, it’s time to get caught up with two vital design mediums: prototyping and animation.
Case study
2025
SKILLS
Product thinking
Brand direction
TOOLS
Figma
Illustrator
FIGMA SHOULD BE A ONE-STOP FOR DESIGNERS
Figma users want more out of motion graphics. With Figma’s recent shift into more illustrative tools, the door is wide open to be a one-stop application for designers, including basic motion graphics and animating
INTRODUCING FIGMA PROTOTYPE AND ANIMATE
FIGMA PROTOTYPE
Adding a timeline and keyframes are two simple additions that drastically speeds up, simplifies, and expands Figma’s prototyping capabilities
Enter prototype mode and click on a frame. Open the timeline using the hot key Option + Command + T
Timeline
Select an item you want to edit in timeline. The timeline automatically adds once the user clicks an item.
Cursor is added to the timeline
Add keyframes using either the hot key Shift + K, or manually from the timeline or side panel
Ease curves can be added to keyframes.
Multiple prototyping frames can simplify into frame, clearing up user space and simplifying workflow
HOT KEYS
Open timeline
Option + Command + T
Add keyframe
Shift + K
FIGMA ANIMATE
Creatives can create GIFS, to which developers can easily export as JSON files for development.
Open Figma Animate to see the workspace
The top timeline resembles that of a traditional flip book animation.
Once the user is ready to make a new frame, they can click add frame (this is the same workflow as Figma Slides)
Users can add overlay preview (onion skin) to preview the last frame.
The top timeline resembles that of a traditional flip book animation.
Adding in-betweens, curves, holds, and staggers gives users more control in their animations.
When users are complete, animations are exported as GIFs or JSON files.
HANG TIGHT
A more complete case study is coming soon...
Figma Prototype +
Animate
Addressing Figma’s limitations with prototyping and animating.
Overview
With Figma’s recent shift into illustration, it’s time to get caught up with two vital design mediums: prototyping and animation.
Case study
2025
SKILLS
Product thinking
Brand direction
TOOLS
Figma
Illustrator
FIGMA SHOULD BE A ONE-STOP FOR DESIGNERS
Figma users want more out of motion graphics. With Figma’s recent shift into more illustrative tools, the door is wide open to be a one-stop application for designers, including basic motion graphics and animating
INTRODUCING FIGMA PROTOTYPE AND ANIMATE
FIGMA PROTOTYPE
Adding a timeline and keyframes are two simple additions that drastically speeds up, simplifies, and expands Figma’s prototyping capabilities
Enter prototype mode and click on a frame. Open the timeline using the hot key Option + Command + T
Timeline
Select an item you want to edit in timeline. The timeline automatically adds once the user clicks an item.
Cursor is added to the timeline
Add keyframes using either the hot key Shift + K, or manually from the timeline or side panel
Ease curves can be added to keyframes.
Multiple prototyping frames can simplify into frame, clearing up user space and simplifying workflow
HOT KEYS
Open timeline
Option + Command + T
Add keyframe
Shift + K
FIGMA ANIMATE
Creatives can create GIFS, to which developers can easily export as JSON files for development.
Open Figma Animate to see the workspace
The top timeline resembles that of a traditional flip book animation.
Once the user is ready to make a new frame, they can click add frame (this is the same workflow as Figma Slides)
Users can add overlay preview (onion skin) to preview the last frame.
The top timeline resembles that of a traditional flip book animation.
Adding in-betweens, curves, holds, and staggers gives users more control in their animations.
When users are complete, animations are exported as GIFs or JSON files.
HANG TIGHT
A more complete case study is coming soon...
Figma Prototype +
Animate
Addressing Figma’s limitations with prototyping and animating.
Overview
With Figma’s recent shift into illustration, it’s time to get caught up with two vital design mediums: prototyping and animation.
Case study
2025
SKILLS
Product thinking
Brand direction
TOOLS
Figma
Illustrator
FIGMA SHOULD BE A ONE-STOP FOR DESIGNERS
Figma users want more out of motion graphics. With Figma’s recent shift into more illustrative tools, the door is wide open to be a one-stop application for designers, including basic motion graphics and animating
INTRODUCING FIGMA PROTOTYPE AND ANIMATE
FIGMA PROTOTYPE
Adding a timeline and keyframes are two simple additions that drastically speeds up, simplifies, and expands Figma’s prototyping capabilities
Enter prototype mode and click on a frame. Open the timeline using the hot key Option + Command + T
Timeline
Select an item you want to edit in timeline. The timeline automatically adds once the user clicks an item.
Cursor is added to the timeline
Add keyframes using either the hot key Shift + K, or manually from the timeline or side panel
Ease curves can be added to keyframes.
Multiple prototyping frames can simplify into frame, clearing up user space and simplifying workflow
HOT KEYS
Open timeline
Option + Command + T
Add keyframe
Shift + K
FIGMA ANIMATE
Creatives can create GIFS, to which developers can easily export as JSON files for development.
Open Figma Animate to see the workspace
The top timeline resembles that of a traditional flip book animation.
Once the user is ready to make a new frame, they can click add frame (this is the same workflow as Figma Slides)
Users can add overlay preview (onion skin) to preview the last frame.
The top timeline resembles that of a traditional flip book animation.
Adding in-betweens, curves, holds, and staggers gives users more control in their animations.
When users are complete, animations are exported as GIFs or JSON files.
HANG TIGHT
A more complete case study is coming soon...