Figmaの画面をFlutterへ実装する時は、見た目をそのまま写すのではなく、構造、状態、再利用部品へ分解することが重要です。
この記事の結論
FigmaからFlutterへ実装する基本手順は、Frameを読む、Auto LayoutをRow/Columnへ分解する、色や文字をThemeへ寄せる、画像をassetsへ書き出す、最後に複数サイズで確認する、という流れです。
Figma側で確認するもの
- Frameサイズとレスポンシブ想定
- Auto Layoutの方向とgap
- VariablesやColor Style
- Typographyの名前とサイズ
- 画像やアイコンの書き出し範囲
- Prototypeの遷移
Widgetへ分解する考え方
縦方向のまとまりはColumn、横方向はRow、重なりはStack、繰り返しはListViewとして考えます。Figmaのレイヤー名より、実際のUI構造を優先します。
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Title"),
SizedBox(height: 12),
Text("Description"),
],
)Themeへ寄せる
色や文字サイズをWidgetに直書きし続けると、後で修正が難しくなります。共通の色、文字、余白はThemeや定数へまとめます。
AIやMCPの使いどころ
Figma MCPは、選択Frameの構造やトークンをAIへ渡す補助として有効です。ただし、生成コードをそのまま採用するより、既存ThemeやWidgetへ統合するレビューが重要です。
実装後に確認すること
- Frame単位で実装範囲を区切ったか
- Row/Column/Stackの構造を説明できるか
- 色や文字をThemeへ寄せたか
- 画像assetsの名前と解像度を確認したか
- 複数画面幅で崩れを確認したか
よくあるつまずき
- Figmaの絶対座標をそのままFlutterへ写す
- 固定サイズだけでレスポンシブを考えない
- 色や文字サイズを全Widgetに直書きする
- 生成コードをレビューせず貼り付ける
次に読む記事
- Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
- Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い — FlutterのListViewを初心者向けに解説します。childrenで作る基本、ListView.builderとの違い、横スクロール、Column内での注意点を整理します。
- PencilデザインをFlutterコードへ変換する方法｜Widget分解と確認手順 — Pencilで作ったデザインをFlutterコードへ落とし込む流れを解説します。.pen、MCP、AI支援、Widget分解、Theme統合、レビュー観点を整理します。
まとめ
FigmaからFlutterへの実装は、見た目の再現だけでなく、Widget構造とTheme設計が重要です。Frameを小さく分け、既存Widgetへ統合しながら進めましょう。