Mastering Custom Pivot Points for Advanced Figma Animations

Introduction

In the world of UI/UX design, animations play a crucial role in enhancing user experience. Figma, being a powerful design tool, provides numerous ways to create engaging animations. One of the most advanced techniques in Figma animation is the use of custom pivot points. In this tutorial, we will walk you through the process of creating custom pivot points in Figma without using any plugins and show you how to leverage this technique for complex animations.

Why Use Custom Pivot Points in Figma?

By default, when you rotate an object in Figma, it rotates around its center. However, in real-world applications, different objects have different pivot points. For example:

• A door rotates from its hinge, not its center.
• A clock’s hands rotate from the center of the clock face.
• A pendulum swings from a fixed point.

Using custom pivot points allows you to create realistic animations that mimic real-world movements.

How to Create Custom Pivot Points in Figma

Step 1: Understanding the Default Rotation Behavior

When you select an object in Figma and rotate it, the default behavior is to rotate around the center of the object. However, we can manipulate this behavior by nesting objects inside frames.

Step 2: Creating a Custom Pivot Point

To create a custom pivot point, follow these steps:

1. Draw the Object: Start by creating an object (e.g., a rectangle or a circle).
2. Create a Pivot Reference: Draw a small ellipse or dot where you want the pivot point to be.
3. Group the Object and the Pivot Point: Select both elements and press Ctrl + G (Windows) or Cmd + G (Mac) to group them.
4. Convert into a Frame: Select the group and press Ctrl + Alt + G to turn it into a frame.
5. Adjust Layer Positioning: Move the ellipse to the top in the layer stack so it remains visible.
6. Rotate the Frame: Now, when you rotate the frame, the object rotates around the pivot point instead of its center.

Step 3: Creating a Complex Animation

Now that we have set up a custom pivot point, let’s use this method to create an animated clock.

Creating a Clock Animation:

1. Create Clock Hands: Design the hour, minute, and second hands.
2. Set Individual Pivot Points: Place each hand inside a frame, positioning its pivot at the bottom.
3. Make a Component: Convert each framed hand into a component.
4. Add Variants and Smart Animation:
   • Create two variants of the clock hands (initial and rotated positions).
   • Apply a smart animate transition with a delay and duration settings.
5. Preview the Animation: Run the prototype mode to see the clock hands rotate smoothly.

Advanced Use Cases of Custom Pivot Points

1. Character Animation

You can use custom pivot points to animate characters with realistic movements. For instance:

• Define joints (shoulders, elbows, knees) as pivot points.
• Nest body parts within frames to achieve natural limb rotations.
• Use Smart Animate to create smooth transitions.

2. Leaf or Petal Animation

By using pivot points, you can create animations where leaves or petals sway naturally in the wind. Follow these steps:

• Create multiple leaves.
• Assign a common pivot point to each leaf.
• Rotate them individually to simulate a natural effect.

3. Robotic Arm Animation

This technique is also useful for mechanical animations such as robotic arms. Each segment of the arm can have its pivot point, allowing smooth, realistic movement.

Conclusion

Custom pivot points in Figma provide a powerful way to create advanced animations without relying on plugins. By mastering this technique, you can enhance your design projects with dynamic and interactive motion effects.

Key Takeaways:

• Default Figma rotations happen around the center, but frames allow for custom pivot points.
• Nesting objects inside frames enables custom pivot-based animations.
• Smart Animate combined with pivot techniques can create complex movements.

By applying these methods, you can elevate your animations and design projects to the next level. Stay tuned for upcoming tutorials on text-based animations and title animations in Figma! Read Other Articles.

🚀 Don’t forget to subscribe to UX Mate for more design tips and tutorials!