thierryc/litsquare-stage-integrations/litsquare-stage-figma-source

LitSquare Stage Figma Source

Use when Figma or an exported design is the source of the video.

Use host MCP tools for Stage app operations, or the shipped shared-client scripts when direct tools are unavailable. Never construct a raw {tool,payload} request.

Workflow

1. Inspect the Figma frame, screenshot, or exported assets.
2. Extract frame size, hierarchy, text, styles, colors, assets, and SVG paths.
3. Convert the design into local HTML/CSS/JS; do not render live from Figma at export time.
4. Map layers to semantic DOM/SVG nodes with stable IDs.
5. Initialize or update the LitSquare Stage project through litsquare-stage-init-project.
6. Define motion beats, then hand off to litsquare-stage-author-motion.
7. Compare a still render against the source frame before animating heavily.

Integration

If Figma plugin or MCP tools are available, use them to read design context and screenshots. If not, work from user-provided exports.

Output

Report source frame dimensions, local project path, converted assets, fidelity risks, and the next authoring or render step.