Skip to main content
Book a demo

Connect Figma to VS Code

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

Book a demo VS Code setup guide

Set up

Add Figma to VS Code in four steps

Admins approve the server once. Everyone in VS 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 VS Code to Runlayer

    Runlayer’s CLI installs the Runlayer Plugin natively in VS Code; users can also add it over MCP. With direct tool listing turned on for your deployment, Figma’s 47 tools show up in VS Code’s own tool list (VS Code 1.103 or newer).

    VS 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 VS Code

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

Tools

47 Figma tools in VS Code

Runlayer policy decides which of these VS 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 VS Code

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

  • Gateway policy (available)

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

  • Audit trail (available)

    Each call is recorded with the user, VS 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.

  • Stop a call before it runs (available)

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

  • Block output after it runs (available)

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

  • Redact output in place (available)

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

Frequently asked questions

Connect more

Find another combination