Figma Flutter Mcp

Name: Figma Flutter Mcp
Author: mhmzdev

by mhmzdev

An MCP server that provides the coding agents Figma's design token to write Flutter code.

235 0 tools GitHub

No known CVEs

MIT license

Maintained

Last commit 81d ago

Works with most clients

Transport: stdio, sse, http

0 tools

Grade F

Edit this pageView history

Design Developer Tools

Step 1

Install in your client

Config is the same across clients — only the file and path differ.

Supported in Claude Desktopstdio, sse, http · Node 18+

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "args": [
        "-y",
        "figma-flutter-mcp",
        "--figma-api-key=YOUR-API-KEY",
        "--stdio"
      ],
      "command": "npx"
    }
  }
}

Are you the author?

Add this badge to your README to show your security score and help users find safe servers.

Embed in your READMEAbout badges →

[![MCPpedia Score](https://mcppedia.org/api/badge/figma-flutter-mcp)](https://mcppedia.org/s/figma-flutter-mcp)

Read me

What Figma Flutter Mcp does

An MCP server that provides the coding agents Figma's design token to write Flutter code.

Test This Server

No automated test available for this server. Check the GitHub README for setup instructions.

Loading README…

Scored, not listed

Why this score

Five weighted categories — click any category to see the underlying evidence.

Score breakdown

38/100across 5 weighted dimensions

How we score →

0255075100

−62

Security

Maintenance

Efficiency

Documentation

Compatibility

Categoriesclick a row to see evidence

Security

OSV.dev

No known CVEs.

No package registry to scan.

Help improve this page

This server is missing a description. Tools and install config are also missing.If you've used it, help the community.

Add information

Community

Reviews

Be the first to review

Have you used this server?

Share your experience — it helps other developers decide.

How easy was setup?Did it work reliably?How was the documentation?

Frequently Asked Questions

Is Figma Flutter Mcp safe to use?: Figma Flutter Mcp has no known CVEs as of the latest MCPpedia security scan. It does not require authentication, so any local process can connect — keep this in mind in shared environments. Licensed under MIT.
How do I install Figma Flutter Mcp?: Figma Flutter Mcp supports copy-paste install configs on its MCPpedia page for Claude Desktop, Cursor, and Claude Code. Scroll to the Quick Install section and select your client.
What AI clients work with Figma Flutter Mcp?: Figma Flutter Mcp is compatible with claude-desktop, cursor, claude-code. It uses stdio and sse and http transport.
Is Figma Flutter Mcp actively maintained?: Figma Flutter Mcp is recently maintained — last commit was 81 days ago. It has 235 GitHub stars.

Similar servers

Others in design / developer-tools

View all →

XcodeBuildMCP97

A Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects.

5.7k 2

XcodeBuildMCP97

XcodeBuildMCP provides tools for Xcode project management, simulator management, and app utilities.

5.7k 1

Supabase MCP Server97

Manage Supabase projects — databases, auth, storage, and edge functions

2.7k 4

Mcp Gitlab96

MCP server for using the GitLab API

1.5k 12

MCP Security Weekly

Get CVE alerts and security updates for Figma Flutter Mcp and similar servers.

Community

Discussion

Start a conversation

Ask a question, share a tip, or report an issue.

Has anyone used this with Cursor?How do you handle auth?Any alternatives?

{ "mcpServers": { "Figma Flutter MCP": { "args": [ "-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio" ], "command": "npx" } } }

📚 How it works | Details Here

✅ Extract Figma node data: Layout, styling, dimensions, colors, text content, etc.

✅ Analyze structure: Child elements, nested components, visual importance

✅ Provide guidance: Suggest Flutter widgets and implementation patterns

❌ NOT generating actual Flutter code files

✅ Extract screen metadata: Device type, orientation, dimensions

✅ Identify sections: Header, footer, navigation, content areas

✅ Analyze navigation: Tab bars, app bars, drawers, navigation elements

✅ Provide Scaffold guidance: Suggest Flutter screen structure

❌ NOT generating actual Flutter screen

Since its just helping AI write Flutter code so it means the better your prompt will be the better results you'll get.

Frequently Asked Questions

Is Figma Flutter Mcp safe to use?

Figma Flutter Mcp has no known CVEs as of the latest MCPpedia security scan. It does not require authentication, so any local process can connect — keep this in mind in shared environments. Licensed under MIT.

How do I install Figma Flutter Mcp?

Figma Flutter Mcp supports copy-paste install configs on its MCPpedia page for Claude Desktop, Cursor, and Claude Code. Scroll to the Quick Install section and select your client.

What AI clients work with Figma Flutter Mcp?

Figma Flutter Mcp is compatible with claude-desktop, cursor, claude-code. It uses stdio and sse and http transport.

Is Figma Flutter Mcp actively maintained?

Figma Flutter Mcp is recently maintained — last commit was 81 days ago. It has 235 GitHub stars.

Figma to Flutter MCP Server

🌐 Available in: 한국어 (Korean) | 日本語 (Japanese) | 简体中文 (Simplified Chinese) | 繁體中文 (Traditional Chinese)

Utilize Figma's rich data in your coding agent.
Implement designs in Flutter way!

Use Cursor or other AI-powered tools to access Figma's rich files, data, components and much more using MCP server.

📋 Table of Contents

🦋 Observable Flutter #70
🎥 Short Video Demo
📝 Getting Started
📚 How it works
🛠️ Usage
🧱 Basic Workflow
- 🤖 AI Coding Agent Assistance
- ⚠️ If SVG assets don’t work with screen generation
⚠️ Disclaimers
🙌🏼 Acknowledgments
🧱 Other framworks
🔑 License
🙋‍♂️ Author
- Muhammad Hamza

🦋 Observable Flutter #70

Featured on Observable Flutter with enhanced explanation and demo:

🎥 Short Video Demo

Showcased almost all the features of Figma Flutter MCP with real figma design.

English: https://youtu.be/lJlfOfpl2sI
Urdu/Hindi: https://youtu.be/mepPWpIZ61M

📝 Getting Started

You may explore the detailed getting started docs or the demo video as quick-start. As its a First Release hence there's a lot of room for improvements so you can checkout the issues to see what else there's to work or to improve.

📚 How it works | Details Here

Components/Widgets

✅ Extract Figma node data: Layout, styling, dimensions, colors, text content, etc.
✅ Analyze structure: Child elements, nested components, visual importance
✅ Provide guidance: Suggest Flutter widgets and implementation patterns
❌ NOT generating actual Flutter code files

Screens

✅ Extract screen metadata: Device type, orientation, dimensions
✅ Identify sections: Header, footer, navigation, content areas
✅ Analyze navigation: Tab bars, app bars, drawers, navigation elements
✅ Provide Scaffold guidance: Suggest Flutter screen structure
❌ NOT generating actual Flutter screen

Since its just helping AI write Flutter code so it means the better your prompt will be the better results you'll get.

🛠️ Usage

Following steps shows a minimal usage and setup instructions:

... View full README on GitHub

Figma Flutter Mcp

Install in your client