What is Sunnyside Figma MCP?
Sunnyside Figma MCP is a Figma context server with a companion plugin. The plugin sends the layer you selected, including native CSS from getCSSAsync, to the server. The agent then calls tools that return React, Tailwind or styled-components code, design tokens and token change reports. A REST path also works.
Sunnyside Figma MCP turns Figma designs into production code through two data paths. The plugin bridge uses Figma's native getCSSAsync() from inside the editor and works on any plan, even Drafts. The REST path works headless from a file key and node id.
The server and the MCP endpoints live in one Node process, so the plugin's extraction buffer and the tools share memory. That is why the README recommends SSE when the plugin is in play.
A typical run, step by step
- In Figma, select a frame, run the plugin and click Extract Dev Code.
- Wait for the message that data was sent to the MCP server successfully.
- Ask your agent for a React and Tailwind component from the latest extraction, which calls
get_tailwind_component. - For a whole file, click Scan Entire Project and ask for a summary of tokens and conflicts.
Where it fits and where it does not
Best for
- Developers who want pixel level CSS and tokens from the layer they are looking at, compared with the Framelink server it builds on in concept.
- Design system owners who want to simulate, apply and roll back token changes. Related: a design systems MCP.
- Teams that already use Figma's own MCP and want React, Tailwind and styled-components output.
Watch out for
- The license. The README calls it proprietary with specific terms and points commercial inquiries to the author.
- Drafts files. The REST tools do not work on Drafts, so move the file to a team or project or use the plugin path.
- The official Dev Mode bridge needs a Figma Professional plan with Dev Mode enabled.
Use it with UiChemy
Sunnyside produces React code, not WordPress pages. If the Figma file is headed for a WordPress site, UiChemy's Figma to WordPress converts the design, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Sunnyside Figma MCP: Figma Plugin Bridge to React and Tailwind to your AI client
git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP && cd sunnysideFigma-Context-MCP && npm install && npm run build && npm startPrepare
You need Node 18 or newer and a Figma personal access token.
Configure and run
Create a
.envwithFIGMA_API_KEY,PORT=3333andOUTPUT_FORMAT=json, then runnpm start.Install the plugin once
In Figma Desktop choose Plugins, Development, Import plugin from manifest, and pick
figma-dev-plugin/manifest.json.Point your client at it
Use the SSE block above when the plugin is in play. stdio spawns a fresh process that will not see plugin extractions from a separate server.
Client configuration
{
"mcpServers": {
"sunnyside-figma": {
"type": "sse",
"url": "http://localhost:3333/sse"
}
}
}Endpoints and ports
http://localhost:3333/sseRecommended with the pluginhttp://localhost:3333/mcpNeeds a session initialize firsthttp://localhost:3333/plugin/*Where the Figma plugin sends extractionslocalhost:3845Figma's official Dev Mode MCP serverWhat you can do with it
- Plugin bridgeNative getCSSAsync output from the editor gives the highest fidelity and works on any plan.
- REST fallbackHeadless reads from a file key and node id work for files your token can reach.
- Three code outputsReact with a CSS module, React with Tailwind, and React with styled-components.
- Token lifecycleExtract tokens, map dependencies, simulate a change, review impact, apply, roll back and generate migration code.
- Project scanScan Entire Project lets an agent summarize tokens and flag conflicts across a whole file.
- Official Dev Mode bridgeOptional tools reach Figma's Dev Mode MCP server on localhost 3845 for Professional plans.
- Three transportsstdio, SSE and Streamable HTTP expose the same tools against one server.
Tools it exposes
get_figma_dev_history
Lists past extractions with name, id and layout.
get_Basic_CSS
Root element CSS via getCSSAsync.
get_All_Layers_CSS
CSS for every layer in the selection.
get_JSON
Structured data: id, fills, variables, design tokens and allLayersCSS.
get_react_component
TypeScript React plus a CSS module.
get_tailwind_component
React with Tailwind classes using arbitrary values.
get_styled_component
React with styled-components.
get_plugin_project_overview
Summary of a scanned project. Needs Scan Entire Project in the plugin.
analyze_app_structure
Architectural breakdown of a scanned project.
get_figma_data
Raw file or node JSON from the REST API.
get_figma_page_structure
Page level tree for orientation.
get_figma_project_overview
Team or project level summary.
analyze_figma_components
Component detection across a file.
download_figma_images
Batch SVG and PNG export to disk.
extract_design_tokens
Builds a token catalog from the current selection.
build_dependency_graph
Maps which layers consume which tokens.
debug_token_registry
Inspects the current registry state.
track_design_system_health
Coverage and conflict report.
simulate_token_change
Dry run of a rename or value change.
analyze_token_change_impact
Blast radius report for a proposed change.
apply_token_change
Commits a simulated change.
rollback_token_change
Reverts an applied change.
list_token_simulations
Lists staged simulations.
generate_migration_code
Produces codemod style output for the change.
check_figma_dev_connection
Probes the official Dev Mode server.
get_figma_dev_mode_code
React and Tailwind from Figma's own generator.
generate_codegen_plugin
Scaffolds a new Figma Dev Mode codegen plugin.
Frequently asked questions
What is Sunnyside Figma MCP?
Sunnyside Figma MCP is a server that bridges Figma designs and AI coding agents. A companion plugin sends the selected layer to the server, and tools return CSS, tokens and React, Tailwind or styled-components code. A REST API path covers files the plugin has not touched.
How do I install it?
Clone the repo, run npm install and npm run build, add a .env with your Figma token, then npm start. Import figma-dev-plugin/manifest.json in Figma Desktop. The README shows no npm package or one line client command.
Why is SSE recommended over stdio?
The Figma plugin posts extractions to the running HTTP server, and the MCP tools read that same memory. A stdio client spawns its own process, which will not see extractions from a separate server, so SSE or Streamable HTTP is the safer choice with the plugin.
Does it work on Figma Drafts?
The plugin bridge does, on any plan. The REST API tools do not work on Drafts, so the README says to move the file into a team or project. The Dev Mode bridge additionally needs a Professional plan with Dev Mode enabled.
What license does it use?
The README says to see the LICENSE file and describes the project as proprietary with specific terms, built on concepts from Framelink but substantially different. Commercial inquiries go to the author. Read the license before using it commercially.
How many tools does it have?
The tool reference lists 27 tools across plugin bridge, REST API, design token lifecycle, Figma Dev Mode and one utility. All 27 are available on whichever transport you choose, since both expose the same set.
Which agents can connect?
Any MCP client that supports stdio, SSE or Streamable HTTP. The README architecture diagram names Claude, Selene and Cursor as example clients. Config blocks are given for each of the three transports.