BeClaude

figma-implement-design

New
19.9kSmitheryGeneralby davila7

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

First seen 6/12/2026

Install & Usage

1
Open your MCP config
~/.claude.json
2
Add the server config

Add the configuration to "mcpServers": { "figma-implement-design": { "command": "...", "args": [] } }

3
Restart Claude Code
/mcp
View source on GitHub
designmcpcoding

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is figma-implement-design?

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

How to install figma-implement-design?

To install figma-implement-design: open your mcp config (~/.claude.json), then add the config to "mcpServers": { "figma-implement-design": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.

What is figma-implement-design best for?

figma-implement-design is a mcp categorized under General. It is designed for: design, mcp, coding. Created by davila7.