skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

figma-flutter-mcp-design-to-code

Extract Figma design tokens, components, and assets to generate Flutter code via MCP.

4|Updated May 16, 2026
Search Tags:#code generation#figma#mcp#design tokens#widget#flutter#asset export
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill figma-flutter-mcp-design-to-code-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-flutter-mcp-design-to-code
Source: https://github.com/reason-machines/design-skills/tree/main/skills/figma-flutter-mcp-design-to-code
Command: npx skills add https://github.com/reason-machines/design-skills --skill figma-flutter-mcp-design-to-code-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-flutter-mcp.

What problem does it solve? Translating Figma designs into Flutter code by hand is slow and error-prone, requiring developers to manually read colors, typography, spacing, and layout values from design files. This Skill bridges Figma and Flutter development through an MCP server that extracts structured design data so AI agents can generate accurate Flutter widgets, themes, and screens. ## Core Features & Use Cases - Design Token Extraction: Pull colors, typography, and spacing from Figma frames to build Flutter ColorScheme and TextTheme definitions. - Component and Screen Generation: Analyze Figma components and frames to produce reusable Flutter widgets and full screen layouts with Scaffold structure and navigation. - Asset Export: Export PNG, JPEG, and SVG assets directly into your Flutter project with automatic pubspec.yaml updates. - Use Case: You receive a Figma link for a new onboarding screen. Point the MCP at the link, and the AI agent generates a modular IntroScreen widget, extracts the illustration asset, and wires up the theme colors automatically. ## Quick Start Set up the Figma Flutter MCP server in Cursor with your Figma API key, then ask the AI to generate a Flutter screen from a specific Figma frame link.

Frequently Asked Questions about figma-flutter-mcp-design-to-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to Flutter code?▼

Install the figma-flutter-mcp server in an MCP client like Cursor with your Figma API key, then provide a Figma frame or component link in your prompt. The server extracts layout, styling, and structure so the AI agent generates corresponding Flutter widgets and screens.

How do I extract design tokens from Figma for a Flutter theme?▼

Create Figma frames containing your color palette and typography styles, then prompt the MCP to set up a Flutter theme from those links. It returns ColorScheme values and TextTheme mappings including font families, sizes, weights, and letter spacing.

What do I need to set up the Figma Flutter MCP server?▼

You need a Figma personal access token, Node.js 18 or later, and an MCP-compatible client such as Cursor. Add the npx figma-flutter-mcp command with your API key to the client's MCP settings configuration.

Does the Figma Flutter MCP generate production-ready code automatically?▼

No, it is not a code generator. It provides structured design context such as tokens, layout data, and assets, and the AI agent writes the actual Flutter code based on that context plus your project rules.

Why is the Figma Flutter MCP not responding or hitting rate limits?▼

Rate limit errors (HTTP 429) occur when too many requests hit the Figma API; wait 5-10 minutes and extract smaller design portions. For connection failures, clear the npx cache or reinstall the latest figma-flutter-mcp package.

How do I export SVG assets from Figma to a Flutter project?▼

Group the icon elements in Figma, place them in a dedicated frame, and prompt the MCP to export that frame as an SVG. Use the flutter_svg package in Flutter to render the exported asset with SvgPicture.asset.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

figma-swiftui

Translate Figma designs into SwiftUI code and push SwiftUI views back into Figma files.

Official
Advanced
partme-aipartme-ai
610

flutter

Guide Flutter development for widgets, state management, navigation, and platform channels.

Official
Intermediate
telum-aitelum-ai
2

visual-testing-mobile-flutter

Automate Flutter visual regression testing with Golden Tests, Alchemist, and Fastlane.

Official
Intermediate
AradotsoAradotso
3

figma-flutter-mcp-design-to-code

Extract Figma design tokens, components, and screens into structured Flutter guidance.

Official
Intermediate