Каталог MCP
mhmzdev
mhmzdev/Figma-Flutter-MCP

mhmzdev/Figma-Flutter-MCP

Figma to Flutter MCP Server извлекает дизайн-данные из Figma (компоненты, стили, макеты) и передает их в AI-агент для генерации Flutter-кода. Ускоряет реализацию интерфейсов, работает в Cursor и др...

README

13 инструментов

Установить сервер

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
- 🔑 Figma API Key
- 🏹 MCP in Cursor
- 🚀 Quick Start for Local Testing
🧱 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.

analyze_figma_component

Анализирует компонент Figma или набор компонентов, чтобы извлечь информацию о расположении, стилях и структуре для создания виджетов Flutter. Для полных макетов экрана используйте analyze_full_screen.

Analyze Figma Component

Параметры

inputstringобязательный
Figma component URL or file ID
nodeIdstring
Node ID (if providing file ID separately)
userDefinedComponentboolean
Treat a FRAME as a component (when designer hasn't converted to actual component yet) (default: false)
maxChildNodesnumber
Maximum child nodes to analyze (default: 10)
includeVariantsboolean
Include variant analysis for component sets (default: true)
variantSelectionstring[]
Specific variant names to analyze (if >3 variants)
projectPathstring
Path to Flutter project for asset export (defaults to current directory)
exportAssetsboolean
Automatically export image assets found in component (default: true)
useDeduplicationboolean
Use style deduplication for token efficiency (default: true)
generateFlutterCodeboolean
Generate full Flutter implementation code (default: false)
resetStyleLibraryboolean
Reset style library before analysis (default: false)
autoOptimizeboolean
Auto-optimize style library during analysis (default: true)

analyze_full_screen

Анализирует полный экран/фрейм Figma, чтобы извлечь информацию о расположении, секциях, навигации и структуре для реализации экрана Flutter.

Analyze Full Screen

Параметры

inputstringобязательный
Figma screen URL or file ID
nodeIdstring
Node ID (if providing file ID separately)
maxSectionsnumber
Maximum sections to analyze (default: 15)
extractNavigationboolean
Extract navigation elements (default: true)
extractAssetsboolean
Extract and export screen assets (default: true)
projectPathstring
Path to Flutter project for asset export (defaults to current directory)
deviceTypeDetectionboolean
Detect device type and orientation (default: true)

export_flutter_assets

Экспортирует изображения из узлов Figma и настраивает директорию ресурсов Flutter с pubspec.yaml

Export Flutter Assets

Экспортирует изображения из узлов Figma и настраивает директорию ресурсов Flutter с pubspec.yaml

Параметры

fileIdstringобязательный
Figma file ID
nodeIdsstring[]обязательный
Array of node IDs to export as images
projectPathstring
Path to Flutter project (defaults to current directory)
formatenum
Export format
pngjpgsvg
scalenumber
Export scale (1x, 2x, 3x, 4x)
includeMultipleResolutionsboolean
Generate @2x, @3x variants for different screen densities

export_svg_flutter_assets

Экспортирует SVG-ресурсы из узлов Figma. Обнаруживает SVG-контент, анализируя процент векторных элементов - узлы с векторным содержимым более 30% считаются SVG-ресурсами. Обрабатывает вложенные структуры GROUP/FRAME со смешанным содержимым.

Export SVG Flutter Assets

Параметры

fileIdstringобязательный
Figma file ID
nodeIdsstring[]обязательный
Array of node IDs to export as SVG assets
projectPathstring
Path to Flutter project (defaults to current directory)

extract_theme_colors

Извлекает цвета из тематического фрейма Figma, содержащего образцы цветов с подписями.

Extract Theme Colors from Frame

Извлекает цвета из тематического фрейма Figma, содержащего образцы цветов с подписями.

Параметры

fileIdstringобязательный
Figma file ID
nodeIdstringобязательный
Theme frame node ID containing color swatches
projectPathstring
Path to Flutter project (defaults to current directory)
generateThemeDataboolean
Generate Flutter ThemeData class (defaults to false)

extract_theme_typography

Извлекает стили типографики из тематического фрейма Figma, содержащего образцы текста с разными стилями.

Extract Theme Typography from Frame

Извлекает стили типографики из тематического фрейма Figma, содержащего образцы текста с разными стилями.

Параметры

fileIdstringобязательный
Figma file ID
nodeIdstringобязательный
Theme frame node ID containing text style samples
projectPathstring
Path to Flutter project (defaults to current directory)
generateTextThemeboolean
Generate Flutter TextTheme class (defaults to false)
familyVariableNamestring
Name for shared font family variable (defaults to 'fontFamily')

generate_flutter_implementation

Генерирует полный код виджета Flutter с использованием кэшированных определений стилей.

Generate Flutter Implementation

Генерирует полный код виджета Flutter с использованием кэшированных определений стилей.

Параметры

componentNodeIdstringобязательный
Node ID of the analyzed component
includeStyleDefinitionsboolean
Include style definitions in output (default: true)
widgetNamestring
Custom widget class name

inspect_component_structure

Получите быстрый обзор структуры компонентов, дочерних элементов и вложенных компонентов. Используйте inspect_screen_structure для полных экранов.

Inspect Component Structure

Параметры

inputstringобязательный
Figma component URL or file ID
nodeIdstring
Node ID (if providing file ID separately)
userDefinedComponentboolean
Treat a FRAME as a component (when designer hasn't converted to actual component yet) (default: false)
showAllChildrenboolean
Show all children regardless of limits (default: false)

inspect_screen_structure

Получает быстрый обзор структуры экрана, разделов и навигационных элементов.

Inspect Screen Structure

Получает быстрый обзор структуры экрана, разделов и навигационных элементов.

Параметры

inputstringобязательный
Figma screen URL or file ID
nodeIdstring
Node ID (if providing file ID separately)
showAllSectionsboolean
Show all sections regardless of limits (default: false)

inspect_theme_frame

Исследует структуру фрейма темы, чтобы понять его содержимое перед извлечением.

Inspect Theme Frame Structure

Исследует структуру фрейма темы, чтобы понять его содержимое перед извлечением.

Параметры

fileIdstringобязательный
Figma file ID
nodeIdstringобязательный
Frame node ID to inspect

inspect_typography_frame

Изучает структуру шрифтового фрейма, чтобы понять его текстовое содержимое перед извлечением.

Inspect Typography Frame Structure

Изучает структуру шрифтового фрейма, чтобы понять его текстовое содержимое перед извлечением.

Параметры

fileIdstringобязательный
Figma file ID
nodeIdstringобязательный
Frame node ID to inspect

list_component_variants

Перечисляет все варианты в наборе компонентов Figma для помощи при выборе варианта.

List Component Variants

Перечисляет все варианты в наборе компонентов Figma для помощи при выборе варианта.

Параметры

inputstringобязательный
Figma component set URL or file ID
nodeIdstring
Node ID (if providing file ID separately)

style_library_status

Получает полный отчёт о состоянии кэшированной библиотеки стилей.

Style Library Status

Получает полный отчёт о состоянии кэшированной библиотеки стилей.

Параметры

Без параметров.

Github Сайт сервера

Конфиг для установки сервера

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

Также mhmzdev/Figma-Flutter-MCP можно установить в Cursor по ссылке автоматически.

FAQ

Для чего этот сервер?

Этот MCP-сервер соединяет Figma с AI-агентами вроде Cursor и передаёт им данные о дизайне — цвета, шрифты, расположение элементов, структуру компонентов. Разработчики на Flutter используют эту информацию, чтобы AI точнее генерировал виджеты и экраны, которые повторяют оригинальный макет. Вместо ручного переноса сервер автоматически снабжает агента нужными деталями, и код получается ближе к задумке дизайнера.

Что он умеет?

Экспортирует изображения и SVG из Figma в Flutter-проект, настраивает assets и pubspec.yaml. Анализирует компоненты и экраны — извлекает layout, стили, структуру, навигацию. Генерирует Flutter-виджеты на основе кэшированных стилей. Извлекает цвета и типографику из тематических фреймов. Просматривает варианты компонентов и структуру вложенности.

Информация о сервере

Номер в рейтинге: #152
Звезд на Github: 239
Форков на Github: 25
Язык реализации: TypeScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 19.07 в 09:10
Идентификатор: np9eGlQMsQeUbDVv
Категории: Автоматизация приложений, Агенты для программирования, Инструменты дизайна, Инструменты для разработчиков

Другие проверенные MCP-сервера

chrishayuk/mcp-cli

MCP CLI — интерфейс командной строки для взаимодействия с MCP-серверами. Позволяет общаться с LLM, выполнять инструменты, строить исполняемые планы и управлять контекстом через виртуальную память. ...

blockrunai/blockrun-mcp

официальный

BlockRun MCP — сервер реал-тайм данных для Claude: рынки, исследования, X/Twitter и крипто без API ключей. Оплата за вызов из USDC-кошелька, подходит трейдерам и аналитикам.

caol64/wenyan-mcp

文颜 MCP Server — 基于 MCP 协议的排版发布工具，专为 AI 写作到微信公众号场景设计。直接在聊天框内完成 Markdown 转微信富文本、上传图片、存草稿，无需切换编辑器。适合需要快速发布高质量公众号文章的作者和团队。

skyhook-io/radar

Radar - MCP сервер, который даёт AI-ассистентам прямой доступ к Kubernetes: визуализирует топологию, показывает ресурсы и логи, управляет Helm и GitOps. Устанавливается одним бинарником без агентов. Полезен DevOps и SRE.

posthog/mcp

официальный

MCP сервер для интеграции с PostHog — платформой продуктовой аналитики. Позволяет запрашивать данные о событиях, сессиях и пользователях через ИИ-ассистентов (Claude, Cursor, VS Code). Полезен продакт-менеджерам и разработчикам для быстрого анализа.

microsoft/azure-devops-mcp

MCP сервер для Azure DevOps предоставляет AI-агентам доступ к проектам, рабочим элементам и вики. Рекомендуется удаленная версия, доступна и локальная. Инструмент упрощает взаимодействие с DevOps-данными через естественный язык.

mhmzdev/Figma-Flutter-MCP

Figma to Flutter MCP Server

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

📋 Table of Contents

🦋 Observable Flutter #70

🎥 Short Video Demo

📝 Getting Started

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Параметры

Другие проверенные MCP-сервера

chrishayuk/mcp-cli

blockrunai/blockrun-mcp

caol64/wenyan-mcp

skyhook-io/radar

posthog/mcp

microsoft/azure-devops-mcp

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