# Figma to Flutter

> Use this tool when you need to automatically convert Figma designs into Flutter widget code, solving the problem of manual UI development and accelerating the translation of design mockups into production-ready code. It takes Figma design files as input and generates corresponding Flutter widgets with proper styling and layout properties as output. Ideal for use in Flutter development projects where rapid UI prototyping and design-to-code conversion are required.

Canonical page: https://skillsregistry.net/skills/figma-flutter  
JSON: https://api.skillsregistry.net/v1/skills/figma-flutter

## Description

This Figma-to-Flutter MCP server enables AI assistants to automatically convert Figma designs into Flutter widget code through direct integration with the Figma API. Built with TypeScript and the MCP SDK, it extracts design elements from Figma files, analyzes component structures, and generates corresponding Flutter widgets with proper styling, layout properties, and project organization. The implementation features intelligent design extraction with deduplication of colors, text styles, and components into reusable libraries, automatic categorization of UI elements into Flutter-appropriate widgets (buttons, cards, screens), and generation of complete project structures with proper file organization and imports. It handles complex design hierarchies, converts Figma styling properties to Flutter equivalents, and provides retry mechanisms with rate limiting for robust API interactions, making it particularly useful for Flutter developers who want to accelerate UI development by automatically translating design mockups into production-ready code.

## Trust

- **Trust score (0–1):** 0.78
- **Verification tier:** verified
- **Last scanned:** 2026-09-19

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** file-system
- **Updated:** 2026-09-19

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/figma-flutter)
- **Repository:** <https://github.com/mhmzdev/figma-flutter-mcp>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "figma-flutter"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/figma-flutter` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/figma-flutter/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt