figma-code-to-canvas

Figma Code To Canvas

Use this skill for the reverse direction: code or browser UI into Figma canvas. This is tool-availability-sensitive and privacy-sensitive.

Modes

capture-local: convert a local dev server page into Figma layers.
capture-public: convert a public URL into Figma layers.
capture-private: plan a safe path for authenticated/staging pages.
reconcile: compare generated Figma layers with the source UI and list drift.
fallback: produce manual rebuild instructions when code-to-canvas tools are unavailable.

Confirm URL/app source, viewport, target Figma file/page, and privacy class.
For local pages, start or verify the dev server and capture a screenshot before Figma generation.
If code-to-canvas or generated design is requested, invoke the installed figma:figma-generate-design skill when present.
Do not send private authenticated pages, cookies, customer data, or internal URLs through remote services without explicit approval.
After generation, read back Figma metadata or capture a Figma screenshot when possible.
Produce a reconciliation report: source URL, viewport, generated target, visible mismatches, and follow-up edits.

If Figma MCP is unavailable: provide a manual frame/component rebuild plan.
If the page cannot be reached: request a screenshot/export and route to figma-canvas-editor.
If privacy blocks remote generation: keep the work local and describe a human-assisted import route.

Read $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md before promising capability.