はじめに
最近またFlutterで個人開発をしています。その中で地味にめんどくさくて時間を取るのがUIの作成。
AIで自動化できたら楽なのに......
そこで、この記事では、FigmaMCPとClaudeCodeを連携させることで、FigmaのデザインURLを渡すだけで直接Flutter画面コードを生成する方法を紹介します。
前提
- ClaudeCode のセットアップが完了していること
- 現状、Figma 公式の MCP を利用できるのは、プロフェッショナル、ビジネス、またはエンタープライズプランのシートのみ（学生プランも対象のようです👀）
Dev Mode MCPサーバー利用ガイド- こちらで紹介されているMCPサーバであれば誰でも使えそう
セットアップ方法
1. Figma にて Dev Mode MCP を有効化
2. MCP設定ファイル作成
.claude/mcp.jsonを作成し、FigmaMCPサーバーを設定：
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
3. ClaudeCode にて MCP を有効化
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
実際の作業フロー
1. FigmaデザインのURLを指定
https://www.figma.com/design/hogehoge このページを再現
2. 自動でデザイン分析とコード生成
ClaudeCodeが以下を自動実行：
-
FigmaMCPでデザイン取得
- 指定したnode IDからデザインを画像として取得
- UIコンポーネントの構造を解析
-
Flutter実装コードを生成
- 既存のコードベース規約に合わせた実装
- 適切なウィジェット構成とスタイリング
3. コードの生成
今回作成されたAlbumsスクリーンのコード
import 'package:flutter/material.dart';
class AlbumsView extends StatelessWidget {
const AlbumsView({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
backgroundColor: Colors.white,
body: const Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
SizedBox(height: 16),
_BigAlbumImageTile(),
SizedBox(height: 16),
Expanded(
child: _AlbumGrid(),
),
],
),
),
);
}
PreferredSizeWidget _buildAppBar() {
return AppBar(
backgroundColor: Colors.white,
elevation: 0,
toolbarHeight: 64,
title: Container(),
bottom: const PreferredSize(
preferredSize: Size.fromHeight(1),
child: Divider(
height: 1,
thickness: 1,
color: Color(0xFF848484),
),
),
);
}
}
class _BigAlbumImageTile extends StatelessWidget {
const _BigAlbumImageTile();
Widget build(BuildContext context) {
return Container(
height: 240,
width: double.infinity,
decoration: BoxDecoration(
color: const Color(0xFFD9D9D9),
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text(
'image',
style: TextStyle(
fontSize: 12,
color: Colors.black,
fontFamily: 'Inter',
),
),
),
);
}
}
class _AlbumGrid extends StatelessWidget {
const _AlbumGrid();
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: 12,
itemBuilder: (context, index) {
return const _AlbumImageTile();
},
);
}
}
class _AlbumImageTile extends StatelessWidget {
const _AlbumImageTile();
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: const Color(0xFFD9D9D9),
borderRadius: BorderRadius.circular(8),
),
);
}
}
Figmaデザインと実装の比較
Figmaのデザイン
FigmaMCPで取得したデザイン画像
実装された画面
Flutterで実装された実際の画面
所感
- 画像コンポーネントに角丸のスタイルがあたってしまっていますが、たたき台としては十分及第点かと思います。
- 今回のレイアウトは数分で実装されました。俺でなきゃ見逃しちゃう速さ。
実際の効果
作業時間の短縮
- 従来: デザインを見ながら手動コーディング（1-2時間かかることも）
- 今回: URLを渡すだけで自動生成（数分）＋ 修正(数分)
まとめ
FigmaMCP と ClaudeCode の連携によって開発の効率がめちゃくちゃ上がる手応えを得ました。
プロジェクトごとのコーディングルールや、リント関係についてもClaude.mdに設定されていればある程度従ってくれるので最終的な手直しも最小限にできると思います！
また、開発スピードの向上だけではなく、ClaudeCodeの実装と自分の実装を見比べて文句を言ったり勉強したりするのも楽しそうです。
おまけ
Figma のデザインが十分に構造化されていない場合、コードも微妙になってしまいます。
(Assets 類も構造化されている場合は勝手に Figma からインポートしてくれる)
再現してほしかった画面
Discussion