Добавить сервер
mhmzdev/Figma-Flutter-MCP
  1. Каталог MCP
  2. mhmzdev/Figma-Flutter-MCP

mhmzdev/Figma-Flutter-MCP

от mhmzdev
Переводит Figma-макеты в Flutter-код: извлекает стили, цвета, типографику и структуру экранов, подсказывает подходящие виджеты и паттерны реализации.
GithubNPMСайт сервера
Theme Setup Example

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!
weekly downloads MIT License Twitter

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

Featured on Observable Flutter with enhanced explanation and demo:

Observable Flutter Figma to Flutter MCP

🎥 Short Video Demo

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

📝 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.

Анализирует компонент Figma

Параметры
  • autoOptimizeboolean

    Автоматически оптимизирует библиотеку стилей во время анализа (по умолчанию: true)

  • exportAssetsboolean

    Автоматически экспортировать графические ресурсы, найденные в компоненте (по умолчанию: true)

  • generateFlutterCodeboolean

    Генерирует полный код реализации Flutter (по умолчанию: false)

  • includeVariantsboolean

    Включать анализ вариантов для наборов компонентов (по умолчанию: true)

  • inputstringобязательный

    URL компонента Figma или ID файла

  • maxChildNodesnumber

    Максимальное количество дочерних узлов для анализа (по умолчанию: 10)

  • nodeIdstring

    Node ID (если идентификатор файла указывается отдельно)

  • projectPathstring

    Путь к проекту Flutter для экспорта ресурсов (по умолчанию — текущий каталог)

  • resetStyleLibraryboolean

    Сброс библиотеки стилей перед анализом (по умолчанию: false)

  • useDeduplicationboolean

    Используй дедупликацию стилей для экономии токенов (по умолчанию: true)

  • userDefinedComponentboolean

    Считать FRAME компонентом (когда дизайнер еще не превратил его в настоящий компонент) (по умолчанию: false)

  • variantSelectionstring[]

    Конкретные названия вариантов для анализа (если вариантов >3)

analyze_full_screen

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

Анализирует полный экран

Параметры
  • deviceTypeDetectionboolean

    Определяет тип устройства и ориентацию (по умолчанию: true)

  • extractAssetsboolean

    Извлекать и экспортировать экранные ресурсы (по умолчанию: true)

  • extractNavigationboolean

    Извлекает элементы навигации (по умолчанию: true)

  • inputstringобязательный

    URL экрана Figma или ID файла

  • maxSectionsnumber

    Максимальное количество разделов для анализа (по умолчанию: 15)

  • nodeIdstring

    Node ID (если идентификатор файла указывается отдельно)

  • projectPathstring

    Путь к проекту Flutter для экспорта ресурсов (по умолчанию — текущий каталог)

export_flutter_assets

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

Экспорт ресурсов Flutter

Параметры
  • fileIdstringобязательный

    ID файла Figma

  • formatenum

    Формат экспорта

  • includeMultipleResolutionsboolean

    Генерирует варианты @2x и @3x для разных плотностей экрана.

  • nodeIdsstring[]обязательный

    Массив идентификаторов узлов для экспорта в виде изображений

  • projectPathstring

    Путь к проекту Flutter (по умолчанию — текущая директория)

  • scalenumber

    Масштаб экспорта (1x, 2x, 3x, 4x)

export_svg_flutter_assets

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

Экспорт SVG-ресурсов Flutter

Параметры
  • fileIdstringобязательный

    ID файла Figma

  • nodeIdsstring[]обязательный

    Массив идентификаторов узлов для экспорта в виде SVG-ресурсов.

  • projectPathstring

    Путь к проекту Flutter (по умолчанию — текущая директория)

extract_theme_colors

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

Извлекает цвета темы из фрейма

Параметры
  • fileIdstringобязательный

    ID файла Figma

  • generateThemeDataboolean

    Генерирует класс Flutter ThemeData (по умолчанию равно false)

  • nodeIdstringобязательный

    ID узла фрейма темы, содержащий образцы цветов.

  • projectPathstring

    Путь к проекту Flutter (по умолчанию — текущая директория)

extract_theme_typography

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

Извлекает тему типографики из фрейма

Параметры
  • familyVariableNamestring

    Имя переменной общего семейства шрифтов (по умолчанию 'fontFamily')

  • fileIdstringобязательный

    ID файла Figma

  • generateTextThemeboolean

    Генерирует класс Flutter TextTheme (по умолчанию false)

  • nodeIdstringобязательный

    ID узла темы-фрейма, содержащий образцы стилей текста

  • projectPathstring

    Путь к проекту Flutter (по умолчанию — текущая директория)

generate_flutter_implementation

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

Генерирует реализацию Flutter.

Параметры
  • componentNodeIdstringобязательный

    Node ID анализируемого компонента

  • includeStyleDefinitionsboolean

    Включать определения стилей в вывод (по умолчанию: true)

  • widgetNamestring

    Имя пользовательского класса виджета

inspect_component_structure

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

Исследует структуру компонента

Параметры
  • inputstringобязательный

    URL компонента Figma или ID файла

  • nodeIdstring

    Node ID (если идентификатор файла указывается отдельно)

  • showAllChildrenboolean

    Показывает все дочерние элементы независимо от ограничений (по умолчанию: false)

  • userDefinedComponentboolean

    Считать FRAME компонентом (когда дизайнер еще не превратил его в настоящий компонент) (по умолчанию: false)

inspect_screen_structure

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

Инспектирует структуру экрана

Параметры
  • inputstringобязательный

    URL экрана Figma или ID файла

  • nodeIdstring

    Node ID (если идентификатор файла указывается отдельно)

  • showAllSectionsboolean

    Показывать все разделы независимо от ограничений (по умолчанию: false)

inspect_theme_frame

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

Инспектирует структуру фрейма темы

Параметры
  • fileIdstringобязательный

    ID файла Figma

  • nodeIdstringобязательный

    Идентификатор узла фрейма для проверки

inspect_typography_frame

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

Проверяет структуру типографского фрейма

Параметры
  • fileIdstringобязательный

    ID файла Figma

  • nodeIdstringобязательный

    Идентификатор узла фрейма для проверки

list_component_variants

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

Перечисляет варианты компонента

Параметры
  • inputstringобязательный

    URL набора компонентов Figma или ID файла

  • nodeIdstring

    Node ID (если идентификатор файла указывается отдельно)

style_library_status

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

Статус библиотеки стилей

Параметры

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

0.3.3основная
0.3.2
0.3.1
0.3.0
0.2.0
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0

Выберите клиент, чтобы установить mhmzdev/Figma-Flutter-MCP:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

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

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "mhmzdev-figma-flutter-mcp-5ufxis3un1": {
      "command": "npx",
      "args": [
        "-y",
        "figma-flutter-mcp",
        "--figma-api-key=YOUR-API-KEY",
        "--stdio"
      ]
    }
  }
}
VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

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

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"mhmzdev-figma-flutter-mcp-5ufxis3un1\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"figma-flutter-mcp\",\"--figma-api-key=YOUR-API-KEY\",\"--stdio\"]}"
ClaudeClaude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "mhmzdev-figma-flutter-mcp-5ufxis3un1": {
      "command": "npx",
      "args": [
        "-y",
        "figma-flutter-mcp",
        "--figma-api-key=YOUR-API-KEY",
        "--stdio"
      ]
    }
  }
}
Claude CodeClaude Code

Добавьте сервер одной командой в терминале:

claude mcp add mhmzdev-figma-flutter-mcp-5ufxis3un1 -- npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

Либо через JSON-конфиг:

claude mcp add-json mhmzdev-figma-flutter-mcp-5ufxis3un1 "{\"command\":\"npx\",\"args\":[\"-y\",\"figma-flutter-mcp\",\"--figma-api-key=YOUR-API-KEY\",\"--stdio\"]}"
CodexCodex

Добавьте сервер командой в терминале:

codex mcp add mhmzdev-figma-flutter-mcp-5ufxis3un1 -- npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.mhmzdev-figma-flutter-mcp-5ufxis3un1]
command = "npx"
args = ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
PerplexityPerplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

  1. Откройте Настройки аккаунта → Connectors.
  2. Установите вспомогательное приложение PerplexityXPC (один раз).
  3. Нажмите Add Connector → вкладка Simple.
  4. В поле Server Name укажите mhmzdev/Figma-Flutter-MCP, а в поле команды запуска — строку ниже:
npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

Нажмите Save и дождитесь статуса Running.

WindsurfWindsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

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

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "mhmzdev-figma-flutter-mcp-5ufxis3un1": {
      "command": "npx",
      "args": [
        "-y",
        "figma-flutter-mcp",
        "--figma-api-key=YOUR-API-KEY",
        "--stdio"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}
Continue

Создайте файл в .continue/mcpServers/ (например mhmzdev-figma-flutter-mcp-5ufxis3un1.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: mhmzdev-figma-flutter-mcp-5ufxis3un1
    command: npx
    args:
      - "-y"
      - "figma-flutter-mcp"
      - "--figma-api-key=YOUR-API-KEY"
      - "--stdio"
Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

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

Похожие MCP-сервера

particlefuture/MCPDiscovery

particlefuture/MCPDiscovery

от particlefuture

MCP сервер для автоматического поиска, выбора и настройки других MCP серверов на вашей машине. Устанавливаете только этот инструмент — он находит подходящие серверы под вашу задачу, используя Quick Search для явных запросов или Deep Search для сложных целей с поэтапным планированием. Полезен разр...

Python⭐ 51
mmntm/weblate-mcp

mmntm/weblate-mcp

от mmntm

MCP-сервер для управления переводами в Weblate через AI-ассистентов. Позволяет искать, обновлять переводы, управлять проектами, компонентами и получать статистику. Ускоряет локализацию и автоматизи...

TypeScript⭐ 23
21st-dev/Magic-MCP

21st-dev/Magic-MCP

от 21st-dev

Создаёт готовые React-компоненты по текстовому описанию прямо в Cursor, Windsurf и VS Code. Подтягивает стили из 21st.dev и показывает превью на лету.

TypeScript⭐ 6127
JinNing6/Noosphere

JinNing6/Noosphere

от jinning6

Noosphere — MCP сервер для коллективного сознания: загружайте озарения, отладочные паттерны и решения, чтобы ИИ-агенты учились на общем опыте. Полезен разработчикам, исследователям и всем, кто хочет делиться инсайтами с сообществом через текстовые, голосовые и мультимодальные MCP-инструменты.

Python⭐ 18
davewind/mysql-mcp-server

davewind/mysql-mcp-server

от dave-wind

MCP сервер для безопасного read-only доступа к MySQL: позволяет LLM инспектировать схемы таблиц и выполнять SELECT-запросы. Автоматическое обнаружение структуры БД и строгая валидация только чтения — полезно для аналитики и интеграции.

JavaScript⭐ 16
KyaniteLabs/DialectOS

KyaniteLabs/DialectOS

от kyanitelabs

DialectOS — MCP-сервер для перевода контента на 25 региональных вариантов испанского языка: мексиканский, аргентинский, колумбийский и другие. Сохраняет Markdown-разметку, глоссарии и проверяет кач...

TypeScript⭐ 4
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин