Time2Frame

About this plugin

A powerful Figma plugin that lets you analyze, adjust, and visualize animation settings in real-time—enhancing precision and efficiency in motion design.

How It Works:

1. Animation Data Extraction

Instantly retrieve animation properties from selected frames, including:

1. Animation Type: Move In, Fade, Smart Animate, and more.
2. Direction: Left, Right, Top, Bottom.
3. Easing Curve: Ease In, Ease Out, Linear, Custom Spring.
4. Timing Details: Delay and duration (in milliseconds).

Effortlessly gain insights into how animations behave within your prototypes.

2. Frame Rate Conversion

Easily convert animation timing into frame counts based on industry-standard frame rates:

1. 24 FPS
2. 30 FPS
3. 60 FPS

The plugin automatically recalculates delays and durations into frames, ensuring precise control over motion timing.

3. Real-Time Input Adjustments

Modify Delay and Duration values directly in the plugin and see instant updates in:

1. Milliseconds (for precise timing).
2. Frames (for seamless animation alignment across FPS settings).

No need for manual calculations—Time2Frame does it all for you.

4. Animation Preview

Visualize how your animation moves, scales, and fades with an interactive preview. The preview dynamically adjusts to reflect extracted animation properties, allowing designers to fine-tune their animations with confidence.

5. Custom Spring Curve Calculation & Visualization

If a Custom Spring easing is detected, Time2Frame breaks it down into:

1. Stiffness
2. Damping
3. Mass

The plugin generates a real-time graph that illustrates the spring curve, making it easy to refine complex motion dynamics.

Key Features:

1. Animation Data Extraction – Retrieve animation type, easing, and timing in seconds.
2. Frame Rate Conversion – Automatically convert timing into frames for 24, 30, or 60 FPS.
3. Instant Adjustments – Modify animation values with real-time updates.
4. Live Animation Preview – See how animations behave with accurate visual feedback.
5. Custom Spring Analysis – Break down spring physics and visualize easing curves.
6. Smart UI Integration – Works seamlessly with Figma’s native environment.

Who Is It For?

Time2Frame is built for motion designers, UX/UI designers, and developers who need precise animation breakdowns and real-time adjustments in Figma. Whether you’re fine-tuning micro-interactions or optimizing complex motion flows, this plugin streamlines your workflow and improves animation predictability across different frame rates.