Skip to content
Trending 2026One of the top-searched agent skills of 2026.

// Figma Dev Mode MCP and Code Connect — pull design context, variables, and component maps to generate design-system code.

Figma Dev Mode MCPVerified Creator

git log --oneline --stat
HEAD
Stars
6.2k
Forks
400
Updated
Jun 24, 2026
repo --stat
  • stars

    6.2k

  • forks

    400

  • last update

    Jun 24, 2026

  • license

    MITv1.3.0

quickstart.sh
3 steps
  1. Install

    // Drops SKILL.md into ~/.claude/skills/

    $ claude skills add figma-dev-mode-mcp-design-to-code
  2. Invoke

    // Run from any project directory

    $ claude --skill figma-dev-mode-mcp-design-to-code "give my landing page a hero treatment"
  3. Iterate

    // Re-run with edits — Claude keeps the skill loaded

    $ claude --skill figma-dev-mode-mcp-design-to-code "now refactor it"
figma-dev-mode-mcp-design-to-code/
references
SKILL.md
readonly
name:
Figma Dev Mode MCP
slug:
figma-dev-mode-mcp-design-to-code
version:
v1.3.0
license:
MIT
author:
@figma-craft
repository:
github.com/figma-craft/figma-dev-mode-mcp-design-to-code
categories:
tags:
#figma#mcp#design-to-code#code-connect#design-tokens
description:

Figma Dev Mode MCP and Code Connect — pull design context, variables, and component maps to generate design-system code.

features.md
3 capabilities

// What you can do with it

  • Automates the tedious parts of the workflow.
  • Gives Claude the right context, tools, and guardrails.
  • Produces consistent, reviewable output every time.

README.md

figma-dev-mode-mcp-design-to-code/README.md
5 sections
Loading README…

$ cat reviews/

Reviews

// No reviews yet. Be the first.
Loading review form…

$ ls related/

explore all →