Figma Motion is currently in open beta. Features may change and you may experience performance issues as we continue to improve Figma Motion. Learn more about what's included in the beta.
After building animations in Figma Motion, developers can use Dev Mode and the Figma MCP server to inspect animation details and implement them accurately.
Dev Mode
To inspect an animation in Dev Mode:
- Select the animated frame.
- Open the Motion tab in the Inspect panel.
- Click Show in timeline view.
Timeline view provides a read-only view of the animation alongside the code used to recreate it.
To copy the animation code:
- Select Code under the Motion tab in the Inspect panel.
- By default, code is displayed as CSS. Use the format selector to switch between CSS, React, and JSON outputs.
- Click Copy to copy the generated code.
MCP integration
Figma Motion is compatible with the MCP server.
In Dev Mode, MCP details appear in the Inspect panel. Copy the frame link and provide it to your coding agent. The MCP server supplies the full animation context, including:
- Keyframes
- Motion type
- Timing values
- Easing curves
This allows coding agents to generate implementations that closely match the original animation.