How to animate any UI icon with Figma Motion

@janm_ux

60.8K followers · usually 3.7K views a post

Views

22.8K

Likes

1.1K

Comments

3

Shares

75

Promoted product

Figma Motion

Figma is the canvas where design, code, and AI come together. From first idea to shipped product — go from concept to production with your whole team, in one place.

2 videos2 creators

Why it worked

The video provides a clear, step-by-step tutorial on a specific feature within a popular design tool, making it highly valuable for designers looking to enhance their skills. The visual demonstration and concise instructions cater to a learning audience, driving engagement.

Summary

This video demonstrates how to animate a UI icon using Figma Motion. It guides the viewer through preparing the vector, dividing it into parts, switching to the motion tab, adding animations like path drawing, and setting delays to achieve the final animation.

Free account

Transcript, structure and on-screen text

6 beats and 9 lines of on-screen text — the parts you need to write your own version.

Original caption

How to animate any UI icon with Figma Motion 1. First prepare the vector 2. Divided into two parts 3. Switch to motion 4. Select the first vector 5. Add new motion 6. Choose path with draw animation 7. Do the same for the second vector 8. Finally set a delay 9. Here is how to animate any UI icon #ui #figma #figmamotion #motiondesign #ux