Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma.
Install
npx skills add figma/mcp-server-guide --skill figma-generate-librarynpx skills add figma/mcp-server-guide --skill figma-generate-library -a claude-code -gnpx skills add figma/mcp-server-guide --skill figma-generate-library -a codex -ggemini skills install https://github.com/figma/mcp-server-guide.git --path skills/figma-generate-librarygh skill install figma/mcp-server-guide figma-generate-librarygit clone --depth 1 https://github.com/figma/mcp-server-guide /tmp/figma__mcp-server-guide
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/figma__mcp-server-guide/skills/figma-generate-library ~/.claude/skills/figma-generate-library # Claude Code
cp -R /tmp/figma__mcp-server-guide/skills/figma-generate-library ~/.agents/skills/figma-generate-library # Codex, Cursor, Gemini CLI, Copilot, OpenCode