mcpField
F
figma-canvas-editor

figma-canvas-editor

github.com/sergekostenchukDesign & UI3250 installsUpdated 18w ago
Repository

About figma-canvas-editor

A skill for making scoped changes to Figma files, including canvas objects, styles, variables, FigJam content, and Slides when supported. It uses metadata checks and evidence-based reporting to track edits and their boundaries.

Key features

  1. 01Create and update Figma objects
  2. 02Edit FigJam content
  3. 03Edit Slides when available
  4. 04Check metadata before and after
  5. 05Report evidence and rollback path

Use cases

  1. 01Build or revise frames and layouts
  2. 02Apply scoped changes to styles or variables
  3. 03Remove specified obsolete objects
  4. 04Document results of a Figma edit

MCP support

The skill uses Figma MCP for file operations and requires invoking `figma:figma-use` before `use_figma` calls. FigJam and Slides may also require their respective installed Figma skills.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-canvas-editor

After installing, type/figma-canvas-editorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
canvas-edit-report.md
evals/
evals.json

Details

From the project README

Figma Canvas Editor

Use this skill for direct Figma mutations. Read-only understanding belongs to figma-context-reader; token/library governance belongs to figma-design-system-sync.

Modes

  • create: add frames, sections, components, objects, or layouts.
  • update: change selected nodes, layout, styles, variables, text, or component instances.
  • delete: remove effects, nodes, variants, or obsolete objects only with explicit scope.
  • figjam: edit FigJam objects, sections, connectors, and shapes.
  • slides: edit Figma Slides content when the Slides skill is available.

Workflow

  1. Confirm target file/page/frame/node and exact mutation scope.
  2. Prefer duplicating important frames before broad changes.
  3. Invoke figma:figma-use before any use_figma call. For FigJam or Slides, invoke the relevant installed Figma skill as well.
  4. Read current metadata before editing.
  5. Apply changes using native Figma objects, auto layout, components, variables, and styles where possible.
  6. Read metadata back after editing and capture screenshot/export evidence when available.
  7. Report changed targets, evidence, skipped checks, and rollback path.

Mutation Boundaries

  • Do not make broad destructive changes without explicit approval.
  • Do not detach instances, flatten vectors, rasterize editable text, or remove variables/styles unless the user requests that outcome.
  • Do not invent node IDs or claim a selected node exists without MCP evidence.
  • Keep design-system naming consistent with the existing file when visible.

Output Shape

Use assets/canvas-edit-report.md.

Validation And Eval

  • Verify that every mutation report includes target, scope, before evidence, after evidence, and skipped checks.
  • Treat missing readback as Skipped or Blocked, not as successful mutation evidence.
  • Use evals/evals.json to forward-test scoped creation and destructive-delete prompts.

Comments

Markdown supported