Figma MCP Server

Created By
j4ckp0t85a year ago
experimental gen ai mcp server to generate figma tokens
Overview

What is Figma MCP Server?

Figma MCP Server is an experimental AI-powered server designed to generate Figma tokens and facilitate access to Figma design data for coding tools like Cursor, Windsurf, and Cline.

How to use Figma MCP Server?

To use the Figma MCP Server, run the server using the command: npx figma-developer-mcp --figma-api-key=<your-figma-api-key>. After starting the server, connect it to Cursor and use the tools in Cursor's composer to interact with your Figma designs.

Key features of Figma MCP Server?

  • Detailed CSS Extraction: Extracts exact CSS properties from Figma designs.
  • Design Tokens Generation: Automatically generates design tokens in various formats (CSS, SCSS, TypeScript, JSON).
  • Enhanced Rendering: Provides accurate rendering of designs to code, including support for gradients and multi-layered backgrounds.

Use cases of Figma MCP Server?

  1. Extracting detailed CSS properties for web development.
  2. Generating design tokens for consistent styling across projects.
  3. Facilitating AI-assisted design implementation in coding tools.

FAQ from Figma MCP Server?

  • Can I use Figma MCP Server with any Figma file?

Yes! You can use it with any Figma file as long as you have the appropriate access token.

  • Is there a cost to use Figma MCP Server?

No, it is free to use.

  • What programming languages does it support?

The server is built with TypeScript and can generate tokens for various formats.

Project Info
Created At
a year ago
Updated At
a year ago
Author Name
j4ckp0t85
Star
0
Language
TypeScript
License
MIT license

Recommend Servers

View All
Bring your real authenticated browser session to AI coding agents. Local-first MCP server + Chrome MV3 extension. No cloud. No telemetry.
@Cubenest

peek records the user's actual logged-in browser (DOM via rrweb, console events, network metadata, optional response bodies via opt-in Deep capture) through a Chrome MV3 extension. The extension ships events through a native-messaging stdio bridge to a local MCP server (peek-mcp), which persists them to a SQLite database at ~/.peek/sessions.db. AI coding agents (Claude Code, Cursor, Cline, Windsurf) read sessions from the database via 10 MCP tools: Tool What it does list_recent_sessions List recently recorded sessions (id, origin, ts, event count). get_session_summary LLM-readable narrative summary of a session. get_session_console_errors Console errors recorded in a session. get_session_network_errors Failed/notable network requests in a session. get_user_action_before_error Last N user actions before a console error. generate_playwright_repro Generate a runnable Playwright test from a session. get_dom_snapshot Reconstruct the DOM at a given timestamp. query_dom_history Timeline of attribute/text changes for a selector. request_authorization Side-panel consent for write actions (Level 3). execute_action Dispatch a UI action (gated by permission level + destructive blocklist). Why local-first matters Every other "browser session for AI" tool ships to a vendor cloud. peek's SQLite + extension live on the user's machine — no remote endpoints, no telemetry. The privacy policy (docs/peek/PRIVACY_POLICY.md) is the source of truth. Install # 1. Add the MCP server to Claude Code claude mcp add peek -- npx -y @peekdev/mcp # 2. Install the Chrome extension from the Chrome Web Store # (link added once the CWS listing is approved)

2 days ago
Voyei

4 hours ago