Figma-to-Code MCP server for you to PROPERLY vibe code UI components with Design Systems & Tokens.
I built a SMARTER Figma-to-Code MCP server for you to PROPERLY vibe code UI components with Design Systems & Tokens.
I made https://lnkd.in/egeYy37d, a fork of the Framelink's Figma MCP server, to convert your Figma design system into structured docs in your repo, making it easier for AI agents to read & generate design-consistent UI code.
What this MCP server does:
Converts your Figma design system file into .json and .md documentation.
Extracts design tokens (colors, spacing, typography, effects) for use in code.
Gives AI agents persistent context so they can generate components that follow your design system, as docs can be reused across AI sessions or development workflows.
Example AI workflow (using Cursor, Windsurf, Claude Desktop, etc.):
1. Copy your Figma file link.
2. Use prompts to generate design tokens and system docs (see github/npm page for examples).
3. Ask your AI agent to generate ANY NEW component (e.g., login card, multi-select chips, project display card) using those files as context.
The result: cleaner, design-aligned UI code, without needing repeated AI models & Figma API calls
When is this useful?
Rapid component generation for indie or vibecoding projects.
When you want AI agents to stay aligned with a specific Figma design system that you made/like.
For workflows that treat a Figma file as the single source of truth.
Quality of generated design system & tokens files depends on:
How well-structured your Figma file is (a design system Figma file vs. a normal Figma file)
Strength of your AI model.
When this tool is probably not necessary:
If you're already using a large-scale design system with design-to-code pipelines.
What larger teams use instead:
Design token pipelines: Figma → Style Dictionary → JSON/NPM packages (Shopify Polaris, IBM Carbon).
Token syncing tools: Specify, Tokens Studio, or Zeroheight sync tokens directly to GitHub.
Design system docs platforms: Tools like Zeroheight, Storybook, or Backstage act as centralized documentation hubs.
What's new in this fork:
I added two new endpoints to the MCP:
generate_design_tokens: Extracts and structures tokens from Figma.
generate_design_system_doc: Outputs markdown docs that help AI tools understand your system.
You can also still use the existing tools from the original Framelink version: get_figma_data and download_figma_images without any issue.
This MCP helps AI agents stay consistent with your design system, without extra API calls or plugin dependencies.
Try it out:
NPM: https://lnkd.in/egeYy37d
GitHub: https://lnkd.in/ezmM4CN5
Make sure to replace API placeholder with your actual Figma API key during installation in local IDE setting.
I built this for fun to streamline my own design-oriented vibe coding workflow, and it’s open source.
I would love to hear any feedback & thoughts, and hope that this is helpful 😁
Let me know what you think below!
#ai #mcp #designsystem #figma #design #storybook #zeroheight