lubanqihao9875/dsh-figma-mcp

中文

Overview

The one-click Figma MCP connector for DSH, paste a Figma link into chat, and the Agent can read/write nodes, layers, variables, and styles, generate React/Vue code, secure OAuth login, token stored locally, with built-in workflow commands and Skill to guide the way.

Install

From npm

dsh plugin add dsh-figma-mcp

From GitHub

dsh plugin add github:lubanqihao9875/dsh-figma-mcp

Local development

Clone the repo and enter the directory first:

git clone https://github.com/lubanqihao9875/dsh-figma-mcp.git
cd dsh-figma-mcp

Then link the current directory into DSH:

# macOS / Linux
dsh plugin add link:$(pwd)

# Windows (PowerShell)
dsh plugin add link:"$PWD"

After installing, restart DSH. The "Settings → DSH Figma MCP" card appears — click "Connect Figma" to complete the authorization.

Card

The card has two sections: "Connection" (authorization state) and "Skill" (whether the Figma MCP usage is injected into the Agent skill list)

Connection

Status chip	Meaning	Action
Not connected	Not yet authorized	Click "Connect Figma" to open the browser
Connected	Token is valid	Nothing to do
Expiring soon	Less than 24h left	Suggested: click "Refresh auth"
Expired	Token is no longer valid	Click "Reauthorize"

After authorization the card switches from "Not connected" to "Connected" automatically.

Skill

The "Skill" toggle controls whether dsh-figma-mcp-skill is injected into the Agent's skill list. dsh-figma-mcp-skill tells DSH how to pick the mcp__figma__* tools. It is on by default.

Expiry and refresh

The token lifetime follows what Figma issues. As the token approaches expiry, the status chip turns yellow ("Expiring soon"). "Refresh auth" silently renews the token in the background without opening a browser; only when it is completely invalid do you need "Reauthorize" to go through the browser flow again.

Disconnect and uninstall

"Disconnect" only clears local data: the token and refresh credentials in the patch file are deleted immediately. Click Disconnect before uninstalling the plugin, otherwise a still-valid token will remain in the patch file.

Usage examples

After connecting, paste a Figma link directly into a DSH chat and tell the Agent what you want. The Agent automatically calls the mcp__figma__* tools to read content and run the task.You can also start a fixed workflow with /dsh-figma-mcp <command> [extra context]. When required information is missing, the Agent asks for it interactively one field at a time and continues automatically after each answer. Actions that write to Figma, download assets, or write local files ask for confirmation first.

Read design content

Show me what's in this design file: your Figma file URL (e.g. https://www.figma.com/design/<file-id>)

Extract copy and build an i18n table

Pull every button and heading label from the Figma file above and produce a Chinese/English i18n table

Generate code from the design

Convert the Figma page above into React code

Troubleshooting

• Clicking "Connect Figma" does not open a browser: check whether a popup blocker stopped the OAuth window.