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 the active Motion timeline playhead and Motion animation styles in the current document.
For example, a plugin can read the current playhead position and 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 playheadPosition = figma.motion.playheadPosition
const node = figma.currentPage.selection[0]
const [style] = figma.motion.figmaAnimationStyles()
if (node) {
if (style) {
node.applyAnimationStyle(style.styleId, {
duration: 0.4,
timelineOffset: 0,
})
}
if (playheadPosition !== undefined) {
const endPosition = playheadPosition + 0.4
node.applyManualKeyframeTrack(
{ type: 'PROPERTY', name: 'TRANSLATION_X' },
{
baseValue: { type: 'FLOAT', value: 0 },
keyframes: [
{
timelinePosition: playheadPosition,
easing: {
type: 'CUSTOM_SPRING',
easingFunctionSpring: {
bounce: figma.motion.physicalSpringToNormalized({
mass: 1,
stiffness: 100,
damping: 10,
}),
},
},
value: { type: 'FLOAT', value: 0 },
},
{
timelinePosition: endPosition,
value: { type: 'FLOAT', value: 120 },
},
],
},
)
const [timeline] = node.timelines
if (timeline) {
node.setTimelineDuration(timeline.id, Math.max(timeline.duration, endPosition))
}
}
}
playheadPosition: number | undefined [readonly]
The current playhead position of the Motion timeline, in seconds.
figmaAnimationStyles(): AvailableAnimationStyle[]
Returns the Motion animation styles available in the current document.
physicalSpringToNormalized(spring: PhysicalSpring): number
Converts physical spring parameters to Motion's normalized bounce value from 0 to 1.