figma.motion

note

The Motion API is available in Beta. This API is subject to change.

These APIs are available on figma.motion and provide access to Motion animation styles in the current document.

For example, a plugin can read the available Motion animation styles, convert physical spring parameters to a normalized spring value, apply one to the selected node, add a manual keyframe track, and adjust the node's timeline duration.

const node = figma.currentPage.selection[0]
const [style] = figma.motion.figmaAnimationStyles()

if (node && style) {
  node.applyAnimationStyle(style.styleId, {
    duration: 0.4,
    timelineOffset: 0,
  })

  node.applyManualKeyframeTrack(
    { type: 'PROPERTY', name: 'TRANSLATION_X' },
    {
      baseValue: { type: 'FLOAT', value: 0 },
      keyframes: [
        { timelinePosition: 0, value: { type: 'FLOAT', value: 0 } },
        {
          timelinePosition: 0.4,
          easing: {
            type: 'CUSTOM_SPRING',
            easingFunctionSpring: {
              bounce: figma.motion.physicalSpringToNormalized({
                mass: 1,
                stiffness: 100,
                damping: 10,
              }),
            },
          },
          value: { type: 'FLOAT', value: 120 },
        },
      ],
    },
  )

  const [timeline] = node.timelines
  if (timeline) {
    node.setTimelineDuration(timeline.id, 1.2)
  }
}

figmaAnimationStyles(): AvailableAnimationStyle[]

Returns the Motion animation styles available in the current document.

View more →

---

physicalSpringToNormalized(spring: PhysicalSpring): number

Converts physical spring parameters to Motion's normalized bounce value from 0 to 1.

View more →

---