← all plugins
Design Agent - Claude Bridge logoLive

Design Agent - Claude Bridge

Claude Code's live two-way bridge to Figma: read, build, and edit the canvas in real time, then build production UI from a design-system-faithful DESIGN.md.

@sherizan · sherizan/designagent-figma

Design Agent - Claude Bridge preview

Quick install

/plugin marketplace add sherizan/designagent
/plugin install designagent@designagent

Already added the marketplace? /plugin marketplace update designagent first.

How it works

What it does

Claude Code is a strong designer with one problem: it can't see your canvas. designagent fixes that. It opens a live, two-way bridge into Figma: Claude reads what's there, builds new frames and components, and edits existing ones in real time. The same bridge exports a design-system-faithful DESIGN.md you build production UI from.

Two halves of one loop:

  • Canvas → code. Export tokens, components, and layout as DESIGN.md, then let the bundled design-to-code skill build UI that respects your tokens and component system, instead of hardcoding values Coco would immediately delete.
  • Code → canvas. Have Claude read the open file, annotate issues, create shapes and text, restyle layers, and render HTML straight onto the canvas.

What you can do with it

  • "Read the open Figma frame and build it as a React component using our tokens."
  • "Create a pricing section on the canvas with three tiers and a featured plan."
  • "Audit this screen for spacing and contrast issues and annotate them in place."
  • "Turn this HTML into Figma frames."

How it works

The plugin bundles an MCP server that talks to a companion Figma plugin over a local WebSocket bridge. Install it through Claude Code and the server wires itself up. Claude gets a toolset for reading and mutating the canvas (get_design_md, create_frame, set_fill, instantiate_component, html_to_design — the full tool reference is at the bottom of this page). The design-to-code skill turns a DESIGN.md spec into framework-faithful UI code. No pixel-pushing by hand, which is exactly how Coco likes it.

Install

It's the flagship, its plugin name is simply designagent:

  • Add the marketplace: /plugin marketplace add sherizan/designagent
  • Install: /plugin install designagent@designagent

Release notes

v0.20.0

  • New: export_asset — Claude exports icons, logos, images, and illustrations straight from the design into real SVG/PNG files in your project, including assets inside nested component instances. Vectors come out as clean SVG, images as PNG with transparency intact. No more screenshots-as-assets or rebuilt wordmarks.
  • Lookups on nested-instance layers fail fast with a clear message instead of hanging for 20 seconds.
  • Heavy exports are queued, so bursts of screenshots no longer drop the bridge.

v0.19.0

  • New collapsible Update card in the panel with the exact update steps (/plugins → designagent → Update now, then /reload-plugins).
  • The connected-project state got a proper card treatment.

v0.18.0

  • Anonymous usage telemetry: the MCP server counts tool-call names (never design content or parameters) so we know which tools earn their keep. Opt out with DESIGNAGENT_TELEMETRY=0.

Tools · 43

Read & inspect

8
  • status

    Bridge check — connected file, current page, and what's selected.

  • get_spec

    Structured UI spec (hierarchy, tokens, layout, text) of the selection as JSON.

  • get_design_md

    Export the selection as a DESIGN.md spec, ready to build from.

  • export_tokens

    Resolved Figma variables as CSS, W3C JSON, Tailwind, or SCSS.

  • list_page_nodes

    Top-level nodes on the current page — find frames by name or position.

  • take_screenshot

    Render the selection or page to a PNG so Claude can see the result.

  • export_asset

    Write nodes to real SVG/PNG files in the project — icons, logos, illustrations, even inside nested instances.

  • console_logs

    The plugin's captured console output, for debugging.

Select & navigate

2
  • focus

    Scroll and zoom a node into view.

  • select

    Set the Figma selection to one or more nodes.

Create

5
  • create_frame

    Create a frame, optionally with Auto Layout, anywhere in the tree.

  • create_text

    Create a text node — font loading handled automatically.

  • create_rectangle

    Create a rectangle.

  • create_ellipse

    Create an ellipse.

  • html_to_design

    Render HTML into real Figma layers — frames, text, images.

Style

8
  • set_fill

    Solid fill color on an existing node.

  • set_stroke

    Add or change a border.

  • set_corner_radius

    Round corners, together or per-corner.

  • set_shadow

    Add a drop shadow.

  • set_text

    Replace a text node's content.

  • set_text_style

    Font size, weight, color, and alignment.

  • set_opacity

    Node opacity, 0–1.

  • set_rotation

    Rotate by degrees.

Images

2
  • set_image

    Fill a node with an image from a URL, file, or base64.

  • place_image

    Place a new image node on the canvas.

Layout & structure

8
  • move

    Move a node to new coordinates.

  • resize

    Resize a node.

  • reparent

    Move a node into a different parent, at a chosen index.

  • delete

    Delete a node.

  • group

    Group nodes.

  • ungroup

    Dissolve a group back into its parent.

  • clone

    Duplicate a node, optionally into another parent.

  • instantiate_component

    Create an instance of a local or library component.

Effects & motion

7
  • set_grid

    Turn a frame into a native Figma grid layout.

  • list_shaders

    Shaders available to the file.

  • set_shader

    Apply a shader as fill, stroke, or effect.

  • list_animation_styles

    Figma Motion styles in the document (beta).

  • apply_animation

    Apply an animation style to a node (beta).

  • get_animations

    Read a node's applied animations (beta).

  • remove_animation

    Remove an applied animation (beta).

Workflow

3
  • annotate

    Pin a design-intent annotation to a node.

  • apply_fix

    Auto-fixes like converting a frame to Auto Layout.

  • batch

    Run many operations in one call; failures don't stop the rest.