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

mhmzdev/Figma-Flutter-MCP

от mhmzdev
Figma to Flutter MCP Server извлекает дизайн-данные из Figma (компоненты, стили, макеты) и передает их в AI-агент для генерации Flutter-кода. Ускоряет реализацию интерфейсов, работает в Cursor и др...
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
  • 🎥 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:

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

    Auto-optimize style library during analysis (default: true)

  • exportAssetsboolean

    Automatically export image assets found in component (default: true)

  • generateFlutterCodeboolean

    Generate full Flutter implementation code (default: false)

  • includeVariantsboolean

    Include variant analysis for component sets (default: true)

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

    Figma component URL or file ID

  • maxChildNodesnumber

    Maximum child nodes to analyze (default: 10)

  • nodeIdstring

    Node ID (if providing file ID separately)

  • projectPathstring

    Path to Flutter project for asset export (defaults to current directory)

  • resetStyleLibraryboolean

    Reset style library before analysis (default: false)

  • useDeduplicationboolean

    Use style deduplication for token efficiency (default: true)

  • userDefinedComponentboolean

    Treat a FRAME as a component (when designer hasn't converted to actual component yet) (default: false)

  • variantSelectionstring[]

    Specific variant names to analyze (if >3 variants)

analyze_full_screen

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

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

Параметры
  • deviceTypeDetectionboolean

    Detect device type and orientation (default: true)

  • extractAssetsboolean

    Extract and export screen assets (default: true)

  • extractNavigationboolean

    Extract navigation elements (default: true)

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

    Figma screen URL or file ID

  • maxSectionsnumber

    Maximum sections to analyze (default: 15)

  • nodeIdstring

    Node ID (if providing file ID separately)

  • projectPathstring

    Path to Flutter project for asset export (defaults to current directory)

export_flutter_assets

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

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

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

    Figma file ID

  • formatenum

    Export format

  • includeMultipleResolutionsboolean

    Generate @2x, @3x variants for different screen densities

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

    Array of node IDs to export as images

  • projectPathstring

    Path to Flutter project (defaults to current directory)

  • scalenumber

    Export scale (1x, 2x, 3x, 4x)

export_svg_flutter_assets

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

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

Параметры
  • 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, содержащего образцы цветов с подписями.

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

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

    Figma file ID

  • generateThemeDataboolean

    Generate Flutter ThemeData class (defaults to false)

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

    Theme frame node ID containing color swatches

  • projectPathstring

    Path to Flutter project (defaults to current directory)

extract_theme_typography

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

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

Параметры
  • familyVariableNamestring

    Name for shared font family variable (defaults to 'fontFamily')

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

    Figma file ID

  • generateTextThemeboolean

    Generate Flutter TextTheme class (defaults to false)

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

    Theme frame node ID containing text style samples

  • projectPathstring

    Path to Flutter project (defaults to current directory)

generate_flutter_implementation

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

Генерирует реализацию 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 для полных экранов.

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

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

    Figma component URL or file ID

  • nodeIdstring

    Node ID (if providing file ID separately)

  • showAllChildrenboolean

    Show all children regardless of limits (default: false)

  • userDefinedComponentboolean

    Treat a FRAME as a component (when designer hasn't converted to actual component yet) (default: false)

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

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

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

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

    Figma file ID

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

    Frame node ID to inspect

inspect_typography_frame

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

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

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

    Figma file ID

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

    Frame node ID to inspect

list_component_variants

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

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

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

    Figma component set URL or file ID

  • nodeIdstring

    Node ID (if providing file ID separately)

style_library_status

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

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

Параметры

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

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

GLips/Figma-Context-MCP

GLips/Figma-Context-MCP

Framelink MCP для Figma даёт AI-ассистентам вроде Cursor доступ к макетам из Figma. Сервер упрощает данные дизайна, передавая только релевантную информацию о расположении и стилях — так модель точн...

TypeScript⭐ 15834
themesberg/flowbite-mcp

themesberg/flowbite-mcp

MCP сервер для работы с компонентами Flowbite на Tailwind CSS. Даёт доступ к 60+ UI-элементам, умеет генерировать тему по hex-цвету и превращать Figma-макет в код. Помогает разработчикам быстрее создавать интерфейсы.

JavaScript⭐ 41
vkhanhqui/figma-mcp-go

vkhanhqui/figma-mcp-go

Открытый Figma MCP-сервер с полным доступом на чтение и запись через плагин. Не требует API и не имеет лимитов — подходит дизайнерам и разработчикам. Работает с AI-инструментами. Управляйте стилями...

Go⭐ 1178
musepy/genable

musepy/genable

Genable — MCP сервер, превращающий текстовый запрос в редактируемые слои Figma: авто-макет, переменные цветов и шрифтов, светлая и темная темы. Полезен дизайнерам и разработчикам для агентных инструментов (Claude Code, Cursor). Совместим с Gemini, Claude, OpenAI.

Astro⭐ 1
kenneives/design-token-bridge-mcp

kenneives/design-token-bridge-mcp

MCP сервер для трансляции дизайн-токенов: извлекает из Tailwind, CSS, Figma или W3C DTCG и генерирует темы под Kotlin, SwiftUI, Tailwind и CSS-переменные. Полезен разработчикам и дизайнерам в пайплайне v0 → Figma → Claude Code.

TypeScript⭐ 5
pzfreo/build123d-mcp

pzfreo/build123d-mcp

MCP сервер для 3D CAD на build123d, позволяющий AI-агентам создавать, инспектировать и итерировать геометрию. Закрывает цикл обратной связи: AI видит результат, а не пишет вслепую. Полезен инженера...

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

Лука Никитин