Figma Motion basics: Use shaders in your animations

By Figma

Categories: Design, Product

Summary

Figma Motion now enables granular shader animation through keyframe-based controls, letting designers layer visual effects with pixel-perfect timing. The new AI agent feature can auto-generate initial keyframes, reducing animation setup time while maintaining full manual refinement capabilities.

Key Takeaways

  1. Add individual keyframes to each shader parameter (fills, effects, gradients) for granular animation control rather than animating entire layers at once, enabling precise temporal adjustments.
  2. Use the three-step keyframe workflow: configure shader settings → insert first keyframe → move playhead → update values → insert second keyframe. Figma interpolates automatically between frames.
  3. Temporarily hide shader effects during animation by clicking the eye icon in the right sidebar, improving visibility of underlying elements while fine-tuning complex layered animations.
  4. Leverage the Figma agent to describe desired motion in natural language and receive auto-generated shader effects plus initial keyframes, reducing setup time before manual adjustments.
  5. Layer multiple shader effects for visual depth, using interpolation between keyframes to create smooth transitions without manually calculating intermediate values.

Related topics

Transcript Excerpt

Let's learn how to animate shaders in Figma motion. Shaders are visual effects you can apply to layers, either as fills that [music] generate patterns, gradients, and textures, or as effects [music] that modify how the layer looks. You can animate these fills and effects using keyframes in Figma [music] motion. When you open a shader settings, you'll notice an add keyframe button [music] next to each option. This gives you granular control over how each aspect of the shader moves. Configure the shader, then insert a keyframe for each setting you want to animate. Move the playhead to a different point in time, then update the shader's values to add a second set of keyframes. [music] Figma motion fills in the gaps between keyframes to create a smooth animation. Keep moving the playhead and a…

More from Figma