{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-flutter-mcp",
        "--figma-api-key=YOUR_FIGMA_API_KEY",
        "--stdio"
      ]
    }
  }
}

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-flutter-mcp",
        "--figma-api-key=YOUR_FIGMA_API_KEY",
        "--stdio"
      ]
    }
  }
}

# Clone repository
git clone https://github.com/mhmzdev/figma-flutter-mcp.git
cd figma-flutter-mcp

# Install dependencies
npm install

# Create .env file
echo "FIGMA_API_KEY=your_figma_api_key_here" > .env

# Start HTTP server for testing
npm run dev

{
  "mcpServers": {
    "local-figma-flutter": {
      "url": "http://localhost:3333/mcp"
    }
  }
}

https://www.figma.com/file/ABC123/ProjectName?node-id=1%3A2

Prompt: "Setup Flutter theme from <figma_link> including all color definitions as ColorScheme"

Prompt: "Extract typography system from <figma_link> and create TextTheme for Flutter"

// lib/theme/app_theme.dart
import 'package:flutter/material.dart';

class AppTheme {
  static ThemeData get lightTheme {
    return ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.light(
        primary: Color(0xFF6750A4),
        secondary: Color(0xFF625B71),
        tertiary: Color(0xFF7D5260),
        surface: Color(0xFFFFFBFE),
        background: Color(0xFFFFFBFE),
      ),
      textTheme: TextTheme(
        displayLarge: TextStyle(
          fontFamily: 'Inter',
          fontSize: 57,
          fontWeight: FontWeight.w400,
          letterSpacing: -0.25,
        ),
        bodyMedium: TextStyle(
          fontFamily: 'Inter',
          fontSize: 14,
          fontWeight: FontWeight.w400,
          letterSpacing: 0.25,
        ),
      ),
    );
  }
}

Prompt: "Create Flutter widget from figma COMPONENT link: <figma_link>, use named constructors for variants"

// lib/widgets/custom_button.dart
import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback? onPressed;
  final bool isEnabled;

  const CustomButton({
    Key? key,
    required this.label,
    this.onPressed,
    this.isEnabled = true,
  }) : super(key: key);

  const CustomButton.disabled({
    Key? key,
    required String label,
  }) : this(
    key: key,
    label: label,
    isEnabled: false,
  );

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: isEnabled ? onPressed : null,
      style: ElevatedButton.styleFrom(
        minimumSize: Size(327, 56),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      ),
      child: Text(
        label,
        style: Theme.of(context).textTheme.labelLarge,
      ),
    );
  }
}

Prompt: "Convert this frame to a Flutter widget from <figma_link>, it should be reusable"

Prompt: "Design this screen from figma link <figma_link>, ensure code is modular with separate widget files"

// lib/screens/intro_screen.dart
import 'package:flutter/material.dart';
import 'package:my_app/widgets/custom_button.dart';
import 'package:my_app/theme/app_theme.dart';

class IntroScreen extends StatelessWidget {
  const IntroScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Image.asset(
                'assets/images/intro_illustration.png',
                height: 300,
              ),
              SizedBox(height: 48),
              Text(
                'Welcome to App',
                style: Theme.of(context).textTheme.displaySmall,
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 16),
              Text(
                'Get started with our amazing features',
                style: Theme.of(context).textTheme.bodyLarge,
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 48),
              CustomButton(
                label: 'Get Started',
                onPressed: () {
                  // Navigation logic
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Prompt: "Export this image asset from figma link: <figma_link>"

Prompt: "Export this as SVG asset from Figma link: <figma_link>"

// Add flutter_svg to pubspec.yaml
import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/home_icon.svg',
  width: 24,
  height: 24,
  color: Theme.of(context).colorScheme.primary,
)

# Flutter Code Generation Rules

## Architecture
- Use feature-based folder structure
- Separate widgets into lib/widgets/
- Keep screens in lib/screens/
- Create lib/theme/ for theming

## Code Style
- Always use const constructors where possible
- Prefer named parameters for widgets
- Use Theme.of(context) over hardcoded values
- Follow Flutter/Effective Dart conventions

## Assets
- Image assets in assets/images/
- SVG assets in assets/icons/
- Always declare in pubspec.yaml

## State Management
- Use StatefulWidget for local state
- Mention if using Provider/Riverpod/Bloc

## Naming
- Widgets: PascalCase (CustomButton)
- Files: snake_case (custom_button.dart)
- Variables: camelCase (isEnabled)

# .env
FIGMA_API_KEY=figd_your_api_key_here

export FIGMA_API_KEY=figd_your_api_key_here
npx figma-flutter-mcp --figma-api-key=$FIGMA_API_KEY --stdio

Prompt: "Analyze all components in this Figma page <figma_link> and create a Flutter widget library with consistent styling"

Prompt: "Generate responsive Flutter layout from <figma_link> supporting mobile, tablet, and desktop breakpoints"

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 900) {
      return DesktopLayout();
    } else if (constraints.maxWidth > 600) {
      return TabletLayout();
    }
    return MobileLayout();
  },
)

Prompt: "Extract navigation structure from Figma prototype <figma_link> and implement Flutter navigation"

// lib/routes/app_routes.dart
class AppRoutes {
  static const String intro = '/intro';
  static const String home = '/home';
  static const String profile = '/profile';

  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case intro:
        return MaterialPageRoute(builder: (_) => IntroScreen());
      case home:
        return MaterialPageRoute(builder: (_) => HomeScreen());
      default:
        return MaterialPageRoute(builder: (_) => NotFoundScreen());
    }
  }
}

# Update to latest version
npx clear-npx-cache
# Or force reinstall
npm uninstall -g figma-flutter-mcp
npx -y figma-flutter-mcp@latest --figma-api-key=$FIGMA_API_KEY --stdio

// Server includes retry with exponential backoff
// Wait time increases: 1s → 2s → 4s → 8s

# pubspec.yaml - verify indentation
flutter:
  assets:
    - assets/images/
    - assets/icons/

flutter pub get
flutter clean
flutter run

flutter:
  fonts:
    - family: Inter
      fonts:
        - asset: fonts/Inter-Regular.ttf
        - asset: fonts/Inter-Bold.ttf
          weight: 700

Prompt: "Process all button variants from Figma file <file_link>, create Flutter widget with factory constructors for each variant"

Prompt: "Convert <figma_link> to Flutter, add properties for: onTap callback, custom icon, theme override"

Prompt: "Analyze transition animations from Figma prototype <figma_link>, suggest Flutter animation implementation"

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  // ... properties
)