mhmzdev/figma-flutter-mcpMCPMCP Server

figma-flutter-mcp

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

235stars

23forks

TypeScript

designfigmafigma-flutter-mcpfluttermcp

Quality signals

StaleNo testsNo CIThin docsNo licensePopular

Open Repository Download ZIP

AI summary

Auto-generated overview of what this skill does and when to reach for it.

Converts Figma design tokens into Flutter code for agents or developers.

Use this when

You need Figma design tokens converted to Flutter widgets automatically
An AI coding agent must generate Flutter UI from Figma designs
You're prototyping a Flutter app from existing Figma files
You want to sync design changes from Figma to Flutter code
Your team uses Figma for design and Flutter for development

Don't use when

You're not using Figma for design work
Your target platform isn't Flutter
You need pixel-perfect manual implementation without automation

Capabilities

Extracts design tokens (colors, typography, spacing) from Figma
Generates Flutter widgets from Figma components
Supports auto-layout conversion to Flutter Row/Column
Handles responsive design tokens for different screen sizes
Exports Flutter code snippets for direct integration
Works with Figma REST API for live design updates

InstallMCPRun via npx (Node)

Universal installANY TOOL

$ npx skillcity@latest mhmzdev/figma-flutter-mcp

Auto-detects the skill or MCP server in this repo and installs it for Claude Code, Codex, Cursor, Cline, OpenCode, Gemini CLI, Anti-Gravity, OpenClaw and Hermes.

Requires Node.js 18+ (ships with npx).

Or install manually

npx -y figma-flutter-mcp

MCP Configuration

Add this to your claude_desktop_config.json

{
  "mcpServers": {
    "figma-flutter-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-flutter-mcp"
      ]
    }
  }
}

Loading README…

Discover the toolingbehind modern intelligence

Discover the toolingbehind modern intelligence

figma-flutter-mcp