Interface animation
Figma — Figma Motion
Synchronize the motion preview with the timeline so the playhead position matches the object's state.
Video reference only; no editable project supplied.
Interface animation
Figma — Draw inspiration
Present the artwork first, then show how control points and parameters change it; each feature must have a visible before-and-after difference.
Video reference only; no editable project supplied.
Text animation
Figma — Q2 Highlights
Keep feature windows in the foreground and oversized text texture in the background; do not merge these layers.
Video reference only; no editable project supplied.
Text animation
Figma — Q1 2026
Pack oversized lettering of different widths tightly with color blocks, using cropped edges to create density; keep the bottom information strip fixed.
Video reference only; no editable project supplied.
Graphic animation
Figma — Make-a-thon
Center the two brands as participant bubbles enter from the edges; collective responses lead into the event announcement.
Video reference only; no editable project supplied.
Interface animation
Figma — Bring code to the canvas
The code-generated interface becomes a canvas object, placed beside design variants for comparison; it remains the same code layer after updates.
Video reference only; no editable project supplied.
Interface animation
Figma — Agents on the canvas
Make suggestions, apply styles and expand content for the same product; do not treat each result as an unrelated artwork.
Video reference only; no editable project supplied.
Text animation
Figma — CONFIG
Letter fragments begin scattered, then assemble into a title as the progress line grows independently; on exit, the letters dissolve before progress completes.
Video reference only; no editable project supplied.
Interface animation
Figma — Roundtrip between code and canvas
State the two-way workflow first, demonstrate the ecosystem's breadth with a horizontal tour of icons, and finally focus on the core tool.
Video reference only; no editable project supplied.
Text animation
Figma — MAKEATHON
Establish the event's identity through patterns and lettering at the start, quickly demonstrate participant outcomes with artwork in the middle, and announce the launch at the end.
Video reference only; no editable project supplied.
Interface animation
Figma — Connect Google Drive
Read external feedback, make design changes, then produce a document recording the reasons for those changes, completing a read/write loop.
Video reference only; no editable project supplied.
Interface animation
Figma — Figma in Weave
Turn a design frame into a connectable node, connect text and images to their respective slots, then branch the output into different use cases.
Video reference only; no editable project supplied.
Interface animation
Figma — Design to implementation
Select annotated design frames first, then pass that selection context to the implementation agent; implementation results must correspond to the selected screens.
Video reference only; no editable project supplied.
Interface animation
Figma — Specs
Bring business, design and code evidence together in a document, use comments to drive reorganization, and finally turn it into an actionable implementation handoff specification.
Video reference only; no editable project supplied.
Interface animation
Figma — Generate, edit, animate
Newly generated assets remain selectable, editable in color and animatable; demonstrate editability through these three stages.
Video reference only; no editable project supplied.
Interface animation
Figma — Image editing
Present every example as selection → operation → result; highlighting the subject is only an intermediate state.
Video reference only; no editable project supplied.