Custom Pivot Points in Figma — Advanced Animation Tutorial (No Plugins)

Custom Pivot Points in Figma — Full Video Tutorial

In this tutorial, you’ll learn how to use custom pivot points in Figma to create more realistic and advanced animations — without using any plugins.

If you’ve ever struggled with unnatural rotations in Figma, this technique will completely change how you approach animation.

---

What You’ll Learn

• Why default Figma rotation feels unrealistic in many cases
• How to create custom pivot points using frames
• Step-by-step method to control object rotation precisely
• How to animate real-world movements like clocks, doors, and pendulums
• Using Smart Animate + pivot points for advanced interactions

---

Why Custom Pivot Points Matter in Figma

By default, Figma rotates objects from their center — but that’s rarely how things move in the real world.

Examples:

• 🚪 A door rotates from its hinge
• 🕒 Clock hands rotate from the center base
• 🌿 Leaves swing from their stems

Using custom pivot points, you can mimic real physics and create more believable UI animations.

---

Step-by-Step: Create Custom Pivot Points in Figma

Step 1 — Understand Default Behavior

Figma rotates objects from the center point.
To override this, we’ll use frame nesting.

---

Step 2 — Create a Custom Pivot

Follow this exact workflow:

1. Create your object (rectangle, shape, icon, etc.)
2. Add a small ellipse/dot where you want the pivot
3. Select both → Press Ctrl + G (Group)
4. Convert group to frame → Ctrl + Alt + G
5. Move pivot layer to the top (for visibility)
6. Rotate the frame

✅ Now your object rotates around the custom pivot — not the center

---

Step 3 — Build a Real Animation (Clock Example)

Let’s apply this in a practical animation:

Clock Animation Setup

• Create hour, minute, and second hands
• Place each inside its own frame
• Position pivot at the bottom of each hand
• Convert each into a component

Add Animation

• Create variants (start + rotated state)
• Apply Smart Animate
• Adjust easing, delay, and duration

🎯 Result: Smooth, realistic clock movement

---

Advanced Use Cases

Character Animation

• Set pivot points at joints (shoulders, elbows, knees)
• Nest body parts properly
• Animate using Smart Animate

👉 Creates natural human-like motion

---

Leaf / Petal Animation

• Assign pivot at the base of each leaf
• Rotate slightly with variation
• Combine multiple elements

👉 Perfect for micro-interactions & UI decoration

---

Robotic Arm / Mechanical Motion

• Each segment gets its own pivot
• Chain movements together
• Animate sequentially

👉 Ideal for tech UI, dashboards, and product visuals

---

Pro Tips (Most People Miss This)

• Always convert groups → frames (critical step)
• Keep pivot markers small & aligned precisely
• Use components + variants for scalable animations
• Combine with easing curves for realism
• Avoid over-rotation — subtle motion feels premium

---

Related Learning

If you want to go deeper into Figma animation:

👉 Explore More Figma Tutorials

---

Join UX Mate Community

Stay ahead in UI/UX, animation, and design trends:

• 📢 https://t.me/ux_mate
• 📸 https://www.instagram.com/_uxmate/
• 💬 https://chat.whatsapp.com/J8RTpZStlRPG3Hn977fzI0

---

Final Thoughts

Mastering custom pivot points in Figma unlocks a whole new level of animation control.

Once you start using this technique, your animations will instantly feel:

• More realistic
• More intentional
• More professional

🚀 Next up: Text animations & title motion techniques in Figma