FigmaのMCPを活用した Next.js with TypeScriptの爆速実装ガイド デザインから実装までの効率化ワークフロー

https://odlsrhqv.gensparkspace.com こちら公開スライドの全体が動かして見えるURLです。

非公式のFigma MCPとStyle Dictionaryなどを使ってできるだけ楽にFigmaにデザインされた内容をNext.jsのフロントエンドに反映するためにどのようにやっているのか？をカミナシさんとTechBowlのクローズド勉強会で発表した内容です。当日はデモも含めた発表であるため、スライドだけだと分かりづらい可能性があります。

Transcript

1. FigmaのMCPを活用した Next.js with TypeScriptの爆速 実装ガイド  デザインから実装までの効率化ワークフロー 2025
2. FigmaのMCPとは何か Model Context Protocol MCPはAIとツールを接続する標準プロトコルで、AIがFigmaのデザイン データを直接理解・操作できるようにします。  デザインデータを構造化された形式でAIに提供  レイヤー、スタイル、コンポーネント情報をAIが解析可能に  WebSocketを通じてリアルタイム通信を実現 主なメリット  実装速度の大幅な向上  デザインとコードのギャップ解消  デザイナー・エンジニア協業の効率化 AIとの未来展望  "AIを活用してエージェントが理解しやすいデザインシステムに進化させることを目指していま す。将来的には、自然言語で指示を与えるだけで、デザインシステムの形式でUIが自動生成さ れる仕組みの構築に意欲を持っています。" — Daichi Watanabe  Figma デザインツール  MCP Server データ変換・構造化  Cursor/AI コード生成・実装  Next.js + TS 実装コード デザインデータ提供 構造化データ解析 コード生成  MCP実験例と成果  大木優氏のMCP実験では、画像以外の実装で一定の成果が得られた  デザインシステムとコード実装のコンポーネント紐づけで効率化が実 現 Machine Contextualization Platform 成果確認済 FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 2 / 8
3. MCPとデザインシステムの活用 ベストプラクティスとデザイントークン  "リブランディング時にサービスが多数分岐する中で、画面構成の効率化とブランディング統一のためにデザインシステムを構築しました。Figmaに集約 し、ビジュアル、コメント、使用例を記載して新メンバーにも分かりやすくしています。" — Daichi Watanabe  コンポーネント階層を整理 論理的な階層で再利用可能なコンポーネントを構造化することでMCPの認識精度が向上します。 基本要素 複合要素 ページ要素  命名規則の統一 一貫性のある英語での命名規則を適用することで、AIがコンポーネントの意図を理解しやすくなります。 Button/Primary/Large ※日本語のオブジェクト名はAIが認識しにくいため、英語命名に統一することが重要  デザイントークン定義 UIにおける見た目の各属性値を共通化するためにトークンとして定義し、実装とデザインの橋渡しをします。 カラートークン • プリミティブカラー • セマンティックカラー サイズトークン • spacing.xs: 4px • radius.s: 4px 文字トークン • 書体 • 文字の太さ 設計意図共有 変更管理効率化 クロスプラットフォーム 「TechTrain Terminal」のデザイントークンをnpmパッケージとして公開・活用する例が進行中 デザイントークン開発フロー 実践例：効率的な運用フロー 「デザインシステム定例で関係者を集め、運用方法や趣旨を説明。実装はLinearで進め、毎週進捗を確認しながら修正を加えていく。Figma上にデザインシ ステムのチャンネルを設け、細かいCOのやり取りを集約。 」— Takuma Kajikawa  デザイントークンの実装フロー  Next.js TypeScript実装例 // デザイントークン導入前 .primary-button { background-color: #3d3d5c; /* ハードコードされた色コード */ color: #fff; padding: 12px 24px; border-radius: 4px; font-size: 14px; } // デザイントークン導入後 .primary-button { b k d l ( l th i )  デザインとコードの完全な一貫性を実現 デザイントークンのメリット デザインの一貫性維持 同じ役割を持つ要素には同じトークンが適用され、視覚的な統一感が生ま れる 変更管理の効率化 トークン値を一箇所で変更するだけで、それを参照するすべての要素に反映 される  「Figmaのオブジェクト名とコンポーネントのIDを完全に一致させ、MCP対応を容易にすることで、デザインからコードへの変換をさらに効率化できま す。 」 Figma Variablesでトークン定義 Figmaの変数機能を使ってカラー、スペーシング、タイポグラフィなどのトークンを定義 1 DesignTokensプラグインでJSON出力 FigmaのVariables情報をJSON形式に変換・エクスポート 2 Style Dictionaryでコード生成 JSONファイルからCSS変数やJavaScript定数を自動生成 3 npmパッケージとして公開・実装 生成したコードをnpmパッケージ化し、様々なプロジェクトで一貫して利用 4  MCP変換プロセス FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 3 / 8
4. Style Dictionaryの活用と運用方法 Style Dictionaryとは  AmazonのOSSツール デザイントークンを様々なプラットフォーム向けにコード変換 Style Dictionaryは、単一ソースからマルチプラットフォームのデザイン値を生成するシステムです。 Figmaで定 義したデザイントークンをJSON形式で出力し、それを元に各プラットフォーム向けのコードを自動生成します。 主な機能  複数プラットフォーム対応  トークン間の参照関係処理  カスタム変換フォーマット 解決する課題  手動コード変換のミス  プラットフォーム間の非一貫性  デザイン変更の反映遅延  Style Dictionary運用のベストプラクティス 1. トークン階層の整理 基本トークン（色・サイズ）と意味トークン（UI用途）を分けて定義し、参照関係を明確に 2. CI/CDパイプラインへの組み込み デザイントークンの変更をトリガーにStyle Dictionaryを実行し、npmパッケージを自動更新 3. 変換前処理・後処理の活用 プラットフォーム固有の要件に合わせてトークン値を調整するカスタム処理を追加  運用効率化のヒント 新しいプロダクト開発に注力中でも、Style Dictionaryを活用することで少ないリソースでデザインシステムの一貫性を維持で きます。最初から完璧でなくても、徐々に改善していく体制が重要です。 Style Dictionary実装と出力例 config.js の設定例 style-dictionary/config.js 設定ファイル const StyleDictionary = require('style-dictionary'); module.exports = { source: ['tokens/**/*.json'], // トークンソースファイル platforms: { // CSS変数の生成設定 css: { transformGroup: 'css', buildPath: 'build/css/', files: [{ destination: 'variables.css', format: 'css/variables', options: { showFileHeader: false マルチプラットフォーム出力例  Web (CSS) :root { --color-theme-primary: #3d3d5c; --spacing-md: 16px; --radius-s: 4px; }  TypeScript export const tokens = { color: { theme: { primary: '#3d3d5c' } }, spacing: { md: '16px' }  iOS (Swift) import UIKit public class StyleDictionaryColor public static let themePrimary = }  CI/CDとの統合 GitHub ActionsやCircle CIなどのCI/CDパイプラインで、Figmaの変更を検知してStyle Dictionaryを実行し、npmパッケ ージを更新する自動化フローを構築することで、デザイントークンの変更をスムーズに反映できます。 Style Dictionary開発フロー  Figma デザイン定義  JSON トークン抽出  Style Dictionary 変換処理  npm パッケージ 配布・利用 FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 4 / 8
5. FigmaのMCPで読み取りやすい設定方法 MCPの認識精度を高めるための設定  命名規則の標準化  コンポーネントには英語で機能/役割を示す名前を付ける（Button、Card、NavItemなど）  スラッシュ(/)区切りで階層を表現：Button/Primary/Large  日本語のオブジェクト名はAIが認識しにくいため英語命名に統一 "AIの認識しやすさと人間の視認性のバランスを考えると、開発者が理解しやすい英語での命名規則が重要。特にMCPでは、日本語のオブジェク ト名が正確に認識されないケースがある。"  レイヤー構成の最適化  不要なレイヤーはマージまたは削除して階層を浅く保つ  コンテナフレームを使用してセマンティックな構造を作る  デベロッパーモードの名前を活用し、コンポーネント名との一致を確保する  コンポーネントプロパティの活用  変数機能で色やスペーシングなどのデザイントークンを定義  バリアント命名規則を一貫して使用（primary/secondary, sm/md/lg）  Takuma Kajikawaのアイデア "Figmaのオブジェクト名とコンポーネントのIDを完全に一致させ、対応表を作成することで、MCP連携の精度が高まります。これにより、AIが デザインとコードの関連性を正確に把握できるようになります。" 実装例と実践エピソード  デザインと実装のずれに関する実例 "ボタンのプライマリーとセカンダリーの扱いが、デザイン側では別コンポーネントとして分けているのに対し、実装ではバリアン トとして管理していました。バリアブルがMCPで読み込めない現状では、コンポーネントを分ける方が自動化には有利です。" MCPに最適なコンポーネント設計 状態ごとに独立したコンポーネント 明確な階層構造と命名規則 プロパティ名の統一 開発側での対応 コンバーターの作成 リンターでの厳格なルール適用 タイプセーフの徹底  MCPの精度を高める実践アドバイス  英語命名の徹底 AIモデルは英語で学習されているため、日本語より英語の方が認識精度が 高い  コード構造の模倣 実際のコード構造に近いFigmaの階層設計がAIの変換精度を向上させる  Auto Layout活用 Flexboxに自動変換されるため、レスポンシブデザインの実装が容易にな る  対応表の作成 Figma要素名とコンポーネント名の対応表を作成し、AIに提供することで さらに精度向上  Takuma Kajikawaは「理想の状態を定義し、そこに近づけ続けるループを回すことが重要。そのためには理想の状態を示すガードレールのようなも のが必要」と指摘しています。MCPの精度向上も同様に、継続的な改善プロセスの確立が重要です。  デザイン側  Button  Primary Button  Secondary Button 個別コンポーネントとして分離  実装側  Button.tsx type ButtonProps = { variant: 'primary' | 'secondary'; // その他のプロパティ... } バリアントとして単一コンポーネントで管理 VS FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 4 / 8
6. Cursor×MCPで実装する際の注意点 効率的な実装のためのポイント  Figma-MCPとCursorの連携設定  MCPサーバーを起動し、Figmaのアクセストークンを正しく設定する  Cursorでの.mcp.json設定ファイルで接続先を指定する  FigmaファイルのURLまたはファイルIDを正確に指定する  実装時の最大効率化ポイント  プロンプトは具体的に： 「〇〇コンポーネントをNext.jsで実装して」  対象のフレームやコンポーネントを明確に指定して混乱を避ける  コンポーネント単位でコード生成し、複雑すぎるページは分割する  よくある問題と対処法 "AIで開発が進む中でも、リンターを通らないコードは認められないという厳しいルールを適用していくべき。理想の状態を 定義し、そこに近づけ続けるループを回すことが重要です。" — Takuma Kajikawa コード品質が低い フレーム名に実装技術を明記する（例： 「Card-NextJS」 ） レスポンシブ対応不足 Auto Layoutを徹底し、Break Pointsを設定する 細部のズレが発生 実装後に具体的な修正指示を出す（ 「padding-leftを16pxに調整して」 ）  コーディング規約とAI開発のガードレール設計  タイプセーフな箇所はAIに任せ、人間はそれ以外のチェックに集中する分業が理想的  実装の自由度を減らし、関数型言語に近づけるようにルールを厳格化していく  クラスネームでのTailwind CSSの直接使用をほぼ禁止し、コンポーネント抽象化を促進 実装ワークフロー 1 MCPサーバー設定 MCPサーバーを起動し、Figmaとの接続を確立 $ npx figma-context-mcp --figma-api-key="figd_..." 2 Cursorの設定 プロジェクトルートに設定ファイルを作成 .mcp.jsonで接続先とFigma IDを指定 3 コンポーネント特定 実装したいコンポーネントを特定し、URLをコピー Figmaの共有メニュー → リンクをコピー 4 コード生成 Cursorで明確な指示でコード生成 "このButton/Primaryコンポーネントを実装して"  Cursor MCPとNext.js実装の例 button.tsx import React from 'react'; // Figmaから生成されたボタンコンポーネント interface ButtonProps { variant?: 'primary' | 'secondary'; size?: 'sm' | 'md' | 'lg'; label: string; onClick?: () => void; disabled?: boolean; icon?: React.ReactNode; } export const Button: React.FC<ButtonProps> = ({ variant = 'primary', size = 'md', label, onClick, disabled = false, icon }) => { const baseClasses = 'rounded-lg font-medium flex items-center justify-center'; const variantClasses = { primary: 'bg-[#a259ff] text-white hover:bg-[#9046e8]', secondary: 'bg-white border border-[#a259ff] text-[#a259ff]' }; const sizeClasses = { sm: 'text-sm py-2 px-4', md: 'text-base py-3 px-6', lg: 'text-lg py-4 px-8' }; return ( <button onClick={onClick} disabled={disabled} className={\`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}\`} > {icon && <span className="mr-2">{icon}span>} {label} button> ); };  プロ技: 理想の開発状態への改善ループ "正しい状態に近づけ続ける「離婚ループ」の考え方が重要です。常に理想の状態を定義し、そこに近づけるためのガードレー ルを設けることで、AIとの共同開発でも一貫性を保てます。" — Takuma Kajikawa  Cursorのコマンド機能（Cmd+K）から「FigmaのURLからコンポーネントを実装」と直接指示可能  複数コンポーネントを一気に生成せず、一つずつ対話しながら作成するとより精度が高まる  生成されたコードは必ずリンターチェックと型チェックを通して品質を担保する FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 5 / 8
7. Next.js with TypeScript実装サンプル Figmaデザイン Figma.com - ProductCard コンポーネント Product Title Product description with some details $49.99 Add  コンポーネントプロパティ title Product Title description Product desc... price $49.99 isNew true  MCPがデザインを解析する方法  レイヤー構造から階層関係を識別し、HTML要素の入れ子構造に変換  Auto Layoutの配置をFlexboxに自動変換（方向、間隔、配置）  コンポーネントプロパティを基にTypeScriptの型定義を生成  レイヤー名から適切な命名規則を推測してコード変数名を決定 生成されるNext.jsコード ProductCard.tsx Next.js + TypeScript import React from 'react'; import Image from 'next/image'; import Link from 'next/link'; // TypeScriptインターフェース定義 interface ProductCardProps { id: string; title: string; description: string; price: number | string; imageUrl?: string; isNew?: boolean; onAddToCart?: (id: string) => void; onAddToWishlist?: (id: string) => void; Next.jsとTypeSriptの実装のベストプラクティス  厳格な型定義 Figmaプロパティから生成された型定義を活用  コンポーネント分割 Figmaの構造に従った論理的なコンポーネント設計  レスポンシブ対応 Tailwind CSSのユーティリティを活用  デザイントークン Figmaの変数をCSS変数に変換し一貫性を保つ  実装者の声 Y "コンポーネント数が少ない方が速度が速くなる傾向があります。パフォーマンスに 直結します。" — 大木優 T "タイプセーフな箇所はAIに任せ、人間はそれ以外のチェックに集中するのがLLM運 用理想形です。" — Takuma K.  デザインと実装の違い ボタンのプライマリー/セカンダリーは、デザインでは別コンポーネント、実装ではバリアン トとして管理されることが多い。  MCP実験の成果 MCPの実験では画像以外の部分で成果。デザインシステムのコンポーネントと実装の紐付け が重要。  NEW FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 6 / 8
8. API通信の実装をどうカバーするか APIデータ連携の実装戦略  段階的なAPI実装アプローチ 1 Figmaデザインから静的UIを実装 MCPでコンポーネント構造とスタイルを抽出し、静的なUIを先に実装 2 型定義とモックデータの作成 Figmaのデータ構造からTypeScript型を定義し、モックJSONを準備 3 モックデータとの連携 フロントエンドで動作確認しながら実APIに移行する準備を整える 4 実APIとの接続実装 SWR/React QueryなどのデータフェッチングライブラリでAPI連携を実装  Figmaでのデータ戦略 データ構造の可視化  コンポーネントバリアントに代表的なデータパ ターンを設定  データ読み込み中/エラー状態も含めたUI設計 型情報の共有  プロパティ命名でAPIレスポンス構造を反映  Figma変数でデータ型やフォーマットを示唆 お勧めのAPI連携ライブラリ SWR Next.js公式推奨のデータ取得ライブラリ React React Query 柔軟なキャッシュと状態管理 RTK Query Redux Toolkitの一部として提供 実装コード例  型定義 (types.ts) Figmaのコンポーネントプロパティから生成 export interface Product { id: string; name: string; description: string; price: number; imageUrl: string; category: string; inStock: boolean; rating?: number; } export interface ApiResponse<T> { data: T; status: number; message: string; } export interface ProductsResponse { products: Product[]; total: number; page: number; limit: number; }  SWR APIフック実装 useProducts.ts  コンポーネントでの連携実装 ProductList.tsx import React from 'react'; import { useProducts } from '../hooks/useProducts'; import { ProductCard } from './ProductCard'; // MCPで生成したコンポーネント interface ProductListProps { category?: string; } export const ProductList: React.FC<ProductListProps> = ({ category }) => { const { products, isLoading, isError } = useProducts(category); if (isLoading) { return ( <div className="grid place-items-center h-60"> <div className="animate-spin h-10 w-10 border-4 border-purple-500 rounded-full border-t-transparent" /> div> ); } if (isError) { return ( <div className="bg-red-50 p-4 rounded-lg text-red-600"> データの取得に失敗しました。再試行してください。 div> ); } return ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {products.map(product => ( <ProductCard key={product.id} id={product.id} title={product.name} description={product.description} price={product.price} imageUrl={product.imageUrl} isNew={!product.inStock} onAddToCart={(id) => console.log(`Adding ${id} to cart`)} /> ))} div> ); };  モックAPIでの開発効率化 Next.jsのAPI Routesを使ったモックAPIの実装例: // pages/api/products.ts import type { NextApiRequest, NextApiResponse } from 'next'; import { ProductsResponse, ApiResponse } from '../../types'; import mockProducts from '../../mock/products.json'; // Figmaから構造生成 export default function handler( req: NextApiRequest, res: NextApiResponse<ApiResponse<ProductsResponse>> ) { const { category, page = '1', limit = '10' } = req.query; const filteredProducts = category ? mockProducts.filter(p => p.category === category) : mockProducts; res.status(200).json({ data: { products: filteredProducts.slice( (parseInt(page as string) - 1) * parseInt(limit as string), parseInt(page as string) * parseInt(limit as string) ), total: filteredProducts.length, page: parseInt(page as string), limit: parseInt(limit as string) }, status: 200, message: 'Success' }); } import useSWR from 'swr'; import { Product, ApiResponse, ProductsResponse } from '../types'; const fetcher = async (url: string) => { const response = await fetch(url); if (!response.ok) { throw new Error('API error'); } return response.json() as Promise<ApiResponse<ProductsResponse>>; }; export function useProducts( category?: string, page: number = 1, limit: number = 10 ) { const { data, error, isLoading, mutate } = useSWR( `/api/products?category=${category || ''}&page=${page}&limit=${limit}`, fetcher ); return { products: data?.data.products || [], total: data?.data.total || 0, isLoading, isError: error, mutate }; } FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 7 / 8
9. 効率的な開発の始め方 Figmaからの画像実装方法  画像リソース管理の最適化 Next.jsでの実装例 import Image from 'next/image'; export default function HeroSection() { return ( <div className="relative h-[500px] w-full"> <Image src="/images/hero-banner.webp" alt="Hero Banner" fill sizes="(max-width: 768px) 100vw, 50vw" priority quality={85} className="object-cover" /> <div className="absolute inset-0 bg-black bg-opacity-40 flex..."> <h1 className="text-white text-4xl font-bold..."> {/* Figmaからコピーしたテキスト */} h1> div> div> ); } Figmaとコードの画像連携プロセス  Figmaで設計 画像命名規則確立   一括エクスポート MCP/プラグイン活用   最適化処理 自動圧縮・変換   実装適用 Next Image活用 デザインシステム段階的導入  フェーズに分けた導入アプローチ Phase 1: 基礎コンポーネント 優先度: 最高 工数: 小 ボタン、入力フィールド、カードなどの基本UIコンポーネントから始め、ほとんどのページで使用される要素を優先。MCP の効果が高い。 Button Input Card Typography Phase 2: 複合コンポーネント 優先度: 高 工数: 中 基礎コンポーネントを組み合わせた複合要素。ナビゲーション、モーダル、タブなど、ユーザー体験を構成する重要な要素。 Navigation Modal Tabs Form Phase 3: テンプレート/ページレイアウト 優先度: 中 工数: 大 複合コンポーネントを組み合わせたページレイアウトやテンプレート。ビジネスロジック連携も考慮した実装。 Dashboard Listing Page Detail View  実装のコツと戦略  Tech Debtを作らない  すぐに実装できなくても、Figmaの構造とコンポーネ ント設計を一致させる  技術的制約はFigmaにコメントとして記録し、将来の 実装に備える  チーム横断コラボレーション  デザイナーとエンジニアの共同レビュー体制を確立  実装上の制約をデザインプロセスの早期に共有  リスク回避のためのチェックリスト デザイン面  命名規則の一貫性チェック  コンポーネントのプロパティ定義  レスポンシブ対応の確認 実装面  TypeScript型定義の整備  アクセシビリティ対応  パフォーマンス最適化  Figmaからの画像エクスポート  MCPのexportAssets API活用 MCPサーバー経由で画像アセットを自動でエクスポート可能  命名規則の統一 Figmaレイヤー名を元にファイル命名し、コード内参照を容易に  画像最適化テクニック  Next.js Image コンポーネント 自動最適化・レスポンシブ対応・遅延読み込み機能を活用  画像フォーマットの適切な選択 WebP/AVIFなど最新フォーマットとフォールバック対応 FigmaのMCPを活用したNext.js with TypeScriptの爆速実装ガイド 8 / 8