MSP · Motion Spec Plugin

About this plugin

AboutIn traditional motion specification workflows, designers spend most of their time organizing parameters and arranging layouts, while engineers manually translate these specs into code — a slow and error-prone process. Motion Spec Plugin (MSP) streamlines this collaboration with two core features: Fast Annotation and Instant Parameter Extraction, helping both teams align on motion data and deliver animations more efficiently.Fast Annotation：MSP simplifies core motion properties into 8 customizable panels. Designers can generate these panels freely, input parameters directly, and build clean, well-structured motion specification documents in minutes.Instant Parameter Extraction：Engineers can quickly pull structured animation data from any panel using the plugin, with one-click support for H5 (CSS/JS) and XML (Android) formats, cutting down manual transcription work.Quick Start Guide1. Interface Overview* Property Panels: Click buttons in the plugin UI to generate the corresponding property panels on your Figma canvas.* Parameter Extraction: Select a property panel, then click the "H5 Format" or "XML Format" button to extract parameters in the corresponding format.2. Core Input Fields* Basic Properties (Position/Scale/Color/Opacity/Rotation): Enter values directly into the panel fields; use「0」as the default.* Easing Curves: Use standard keywords (ease-in/ease-out/linear) or input custom Bézier values.* Additional Notes: Add anchor point coordinates, deformation descriptions, loop counts, or other context; use「/」as the default.* Trigger Conditions: Define the action and target object name; use「/」as the default.3. Pro Tips* Arrange panels horizontally along a timeline to clearly show animation sequence and duration.* Add visual references (screenshots/keyframes) for complex animations to help engineers map effects accurately.*This plugin is built to make motion annotation faster and easier. The motion property panel concept is inspired by @Milessssss’s Polyphony 2.0 Motion Annotation System (CC BY 4.0). The UI and code were created entirely from scratch.