Use Claude to Generate a Design System in Figma

I saw a post on LinkedIn by the Southleft team demonstrating how Claude can generate a design system in Figma. This video explains how to set up that pipeline.

Southleft's post about this process with examples:
https://southleft.com/insights/ai/figma-console-mcp-ai-powered-design-system-management/

My instructions:
1. Sign up for a Figma pro seat ($20 per month) and Claude pro ($20 per month) or Max 5x ($100 per month).

2. Install node.
https://nodejs.org/en/download

3. Install Claude Code.
https://code.claude.com/docs/en/setup?cmdf=install+claude+code+macos

4. Create Figma token.
https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens?cmdf=how+to+create+figma+token

5. Enable Figma Dev Mode MCP.
https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server?cmdf=enable+figma+dev+mode+mcp

6. Configure Figma MCP server.
https://developers.figma.com/docs/figma-mcp-server/local-server-installation/

7. Install Figma Console MCP (local version).
https://github.com/southleft/figma-console-mcp

8. Install Design Systems Assistant MCP.
https://github.com/southleft/design-systems-mcp

9. Install Desktop Bridge Plugin.
https://github.com/southleft/figma-console-mcp?tab=readme-ov-file#-desktop-bridge-plugin-local-mode-only

10. Install Figma MCP server in Claude desktop.

11. Quit and relaunch Claude desktop.

12. Enter "check figma status."

13. Prompt away!

Видео Use Claude to Generate a Design System in Figma канала David Klein