Trending 2026→One 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

repo --stat

quickstart.sh

3 steps

Install

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

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

Invoke

// Run from any project directory

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

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
categories:: Frontend
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.

README.md

figma-dev-mode-mcp-design-to-code/README.md

11 sections

Loading README…

$ cat reviews/

// No reviews yet. Be the first.

Loading review form…