Skip to main content
Book a demo

Connect Figma to Claude Code

Give Claude Code governed access to Figma’s 47 tools through Runlayer, with identity, policy, scanning, and audit on every call.

Book a demo Claude Code setup guide

Set up

Add Figma to Claude Code in four steps

Admins approve the server once. Everyone in Claude Code then gets it through the same governed connection.

  1. 1

    Approve Figma in Runlayer

    Add Figma from the catalog and choose who can use it and which of its tools are allowed.

  2. 2

    Connect Claude Code to Runlayer

    Runlayer’s CLI installs the Runlayer Plugin natively in Claude Code, and an Anthropic org install also reaches Claude Code. With direct tool listing turned on for your deployment, Figma’s 47 tools show up in Claude Code’s own tool list (supported Claude Code versions).

    Claude Code setup guide
  3. 3

    Sign in to Figma

    Each user signs in to Figma with OAuth. Runlayer keeps the tokens out of the client’s configuration.

  4. 4

    Use Figma from Claude Code

    Figma’s approved tools appear in Claude Code. Every call is checked against policy and recorded.

Tools

47 Figma tools in Claude Code

Runlayer policy decides which of these Claude Code users can call. 23 read data only and 5 can change or delete data.

  • Add code connect mapping

    Map a Figma node to a code component in your codebase using Code Connect.

  • Create generative plugin

    Creates a new generative plugin in the authenticated user's account library and returns its id.

  • Create new file

    Create a new blank Figma file.

  • Create shader

    Set kind to effect for a shader that transforms the layer beneath it, or fill for a shader that generates its own pixels.

  • Download assets

    Download assets from a Figma file for a single node: an exported render, the original source images, and SVGs of the vector layers.

  • Export video

    Export a Figma timeline node as an MP4 video.

  • Generate diagram

    Create a flowchart, decision tree, gantt chart, sequence diagram, state diagram, or entity relationship diagram in FigJam, using Mermaid.js.

  • Generate Figma design

    Capture a live web page by URL into an existing Figma design file.

See all 47 Figma tools

Control

What Runlayer can see and stop in Claude Code

Some controls apply to every client at the gateway. Others depend on what Claude Code exposes to Runlayer.

  • Gateway policy (available)

    Every Figma call from Claude Code passes through Runlayer, where your policies can allow, alert, mask, or block it.

  • Audit trail (available)

    Each call is recorded with the user, Claude Code as the client, the tool, and the policy and scanner decisions.

  • Client hooks (available)

    Capture supported prompts, reasoning, local and MCP tool calls, responses, and scanner decisions in real time.

  • Anthropic inference hooks (available)

    With Claude Enterprise, Anthropic sends each governed Claude Code prompt to Runlayer before inference, with nothing installed on devices (Anthropic beta).

  • OTLP telemetry (available)

    Claude Code can export OpenTelemetry logs to Runlayer for observe-only session reconstruction.

  • Stop a call before it runs (available)

    Runlayer can deny a tool call before Claude Code runs it.

  • Block output after it runs (available)

    Runlayer can block a tool’s output before Claude Code’s model sees it.

  • Redact output in place (available)

    Runlayer can mask sensitive parts of a tool’s output in Claude Code and pass the rest through.

In Claude Code

  • When a tool fails, Runlayer records the error but cannot hide it.

Frequently asked questions

Connect more

Find another combination