sunnysideFigma-Context

This MCP server bridges Figma designs with AI-powered agents to extract production-ready code, assets, and design tokens. It supports converting design descriptions into React, Vue, CSS, Tailwind, or styled-components code, as well as token extraction and asset handling. The server integrates with a local or remote Figma environment via the provided Figma API key and exposes three main access points: a real-time Figma plugin, a development bridge, and a direct API for programmatic control. After starting, you can interact with the MCP integration to describe designs, select elements in Figma, and request generated components, tokens, or assets.

To use the capabilities, first ensure your environment has Node.js 18+ and a valid FIGMA_API_KEY. The MCP will start alongside the plugin server when you run the start script. You can then describe what you want (e.g., turn a button into a React component, or extract color tokens) and the agent will return production-ready code, complete with types and styling as requested. You can also send Figma links directly to AI agents or operate through the dedicated API for automation workflows.

Prerequisites

• Node.js 18+ installed on your machine
• Git installed
• A Figma API key obtained from Figma

Install and run locally

1. Clone the repository

git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP
cd sunnysideFigma-Context-MCP

2. Install dependencies

npm install

3. Create a .env file with required credentials

FIGMA_API_KEY=your_figma_api_key_here

4. Start the MCP server (and plugin bridge)

npm run start

Notes

• The start script launches both the Figma plugin server and the MCP integration.
• If you modify configuration, restart the server to apply changes.

Tips and caveats:

• Ensure your FIGMA_API_KEY is valid and has access to the needed Figma files.
• The MCP supports multiple output formats (React, Vue, CSS, Tailwind, styled-components). Specify your preferred format in the request or configuration where supported.
• Assets (SVGs, PNGs) can be downloaded and optimized automatically; ensure you have write permissions to the output directories.
• If you encounter plugin previews freezing in Figma, rely on the asset download path and API-based generation as a workaround.
• Environment variables can be extended for additional capabilities; refer to the docs for optional keys like design token naming preferences or token extraction rules.