はじめに
みなさんは、MCPを使っていますか？
僕がMCPの中でもよく使っているのが、Figmaが提供しているFigma MCPです。
Dev Mode MCPは、AIエージェントがコンテキストとして、デザインファイルを渡せるようにしてくれる仕組みです。
たとえば、AIに「選択内容しているフレームのフロントエンドを生成して」「特定のフレームを画像として書き出して」などと指示できるようになります。
ただ、実際に「何ができるのか？」「どうやってAIエージェントにお願いするのか？」は少し分かりにくい部分もあると思います。
この記事では、Figma MCPでできることと、AIエージェントにFigma MCPを使わせる方法をまとめて紹介します。
Figma MCP で使えるツール
Figma MCPは、FigmaのAPIをAIエージェントから扱えるようにするツールセットです。
以下のようなツールをエージェントが使えるようになります。
get_design_context
MCPサーバーを使用して、Figma内のレイヤーまたは選択範囲のデザインコンテキストを取得します。デフォルトではReact + Tailwind形式で出力されますが、プロンプトを通じてカスタマイズ可能です。
- パラメータ
- nodeId：Figmaドキュメント内のノードのID
- fileKey：Figmaファイルのキー
- clientLanguages：現在のコンテキストで使用しているプログラミング言語のカンマ区切りリスト
-
javascript, html, css, typescriptなど
-
- clientFrameworks：現在のコンテキストで使用しているフレームワークのカンマ区切りリスト
-
react, vue, djangoなど
-
- forceCode：常にコードを返すようにするかどうかを指定する
取得した時の例はこんな感じです。
function ProjectCard({ className }: { className?: string }) {
return (
<div className={className} data-name="Project card" data-node-id="2256:1179">
<p className="font-[var(--font-family\/font-family,'Noto_Sans:Bold',_'Noto_Sans_JP:Bold',_sans-serif)] font-[var(--font-weight\/bold,700)] leading-[var(--line-height\/subhead-2,28px)] min-w-full relative shrink-0 text-[var(--font-size\/subhead-2,20px)] text-[var(--high-emphasis,rgba(0,0,0,0.89))] w-[min-content]" data-node-id="2256:1175" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100" }}>
プロジェクト名
</p>
<p className="font-[var(--font-family\/font-family,'Noto_Sans:Regular',_'Noto_Sans_JP:Regular',_sans-serif)] font-[var(--font-weight\/regular,400)] leading-[var(--line-height\/body-1,26px)] min-w-full relative shrink-0 text-[var(--font-size\/body-1,16px)] text-[var(--high-emphasis,rgba(0,0,0,0.89))] w-[min-content]" data-node-id="2256:1176" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100" }}>
担当業務
</p>
<p className="font-[var(--font-family\/font-family,'Noto_Sans:Regular',_'Noto_Sans_JP:Regular',_sans-serif)] font-[var(--font-weight\/regular,400)] leading-[var(--line-height\/body-3,19px)] relative shrink-0 text-[var(--font-size\/body-3,12px)] text-[var(--medium-emphasis,rgba(0,0,0,0.6))] text-nowrap whitespace-pre" data-node-id="2256:1177" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100" }}>
2023年3月
</p>
</div>
);
}
export default function ProjectCard1() {
return <ProjectCard className="backdrop-blur-[2px] backdrop-filter bg-[var(--surface-alpha,rgba(255,255,255,0.3))] border border-[var(--gray-variant,#e6e6e6)] border-solid box-border content-stretch flex flex-col gap-[8px] items-start px-[16px] py-[8px] relative rounded-[8px] size-full" />;
}
get_variable_defs
Figma の選択範囲で使用されている変数とスタイル (色、間隔、タイポグラフィなど) を返します。
- パラメータ
- nodeId：Figmaドキュメント内のノードのID
- fileKey：Figmaファイルのキー
- clientLanguages：現在のコンテキストで使用しているプログラミング言語のカンマ区切りリスト
-
javascript, html, css, typescriptなど
-
- clientFrameworks：現在のコンテキストで使用しているフレームワークのカンマ区切りリスト
-
react, vue, djangoなど
-
取得した時の例はこんな感じです。
トークン名 high-emphasisと、そに対応する値 #000000e3 が取得できます。
{
"high-emphasis": "#000000e3",
"subhead-2": "Font(family: \"Noto Sans\", style: Bold, size: 20, weight: 700, lineHeight: 28)",
"body-1": "Font(family: \"Noto Sans\", style: Regular, size: 16, weight: 400, lineHeight: 26)",
"medium-emphasis": "#00000099",
"body-3": "Font(family: \"Noto Sans\", style: Regular, size: 12, weight: 400, lineHeight: 19)",
"surface-alpha": "#ffffff4d",
"gray-variant": "#e6e6e6"
}
get_code_connect_map
Figma ノード ID とコードベース内の対応するコード コンポーネント間のマッピングを取得します
- パラメータ
- nodeId：Figmaドキュメント内のノードのID
- fileKey：Figmaファイルのキー
- codeConnectLabel：特定の言語フレームワーク用の Code Connect 情報を取得するために使用されるラベル
取得した時の例はこんな感じです。
https://www.figma.com/design/wmwJiTnx2P7ePntySX0nN4/Portfolio-Main?node-id=2256-1179&t=VfuwWkmtnciOB9oV-4
{
"2256:1179": {
"codeConnectSrc": "https://github.com/.../components/ProjectCard.tsx",
"codeConnectName": "ProjectCard"
}
}
get_screenshot
選択範囲のスクリーンショットを撮ることを許可します。
これにより、生成されたコードのレイアウトの忠実性が維持されます。
- パラメータ
- nodeId：Figmaドキュメント内のノードのID
- fileKey：Figmaファイルのキー
- clientLanguages：現在のコンテキストで使用しているプログラミング言語のカンマ区切りリスト
-
javascript, html, css, typescriptなど
-
- clientFrameworks：現在のコンテキストで使用しているフレームワークのカンマ区切りリスト
-
react, vue, djangoなど
-
取得した時の例はこんな感じです。
create_design_system_rules
リポジトリを指定して、デザインをフロントエンドコードに変換するための適切なコンテキストを提供するルールファイルを作成します
- パラメータ
- なし
ポートフォリのリポジトリで取得した時の例はこんな感じです。
# Design System Rules for Portfolio Project
このドキュメントは、FigmaデザインをModel Context Protocolを使用して統合する際の包括的なルールを提供します。
## 1. Token Definitions
### 場所と構造
デザイントークンは `src/style/theme.css` にCSSカスタムプロパティとして定義されています。
### トークンの形式
- **カラー**: `--base-{color}-{shade}` 形式（例: `--base-gray-0`, `--base-blue-50`）
- **セマンティックカラー**: `--color-{semantic-name}` 形式（例: `--color-background`, `--color-high-emphasis`）
- **タイポグラフィ**: `--font-size-{size}`, `--font-weight-{weight}`, `--line-height-{type}` 形式
- **ブレークポイント**: `--breakpoint-{device}` 形式
### 主要なトークン定義
```css:src/style/theme.css
@theme {
/* カラーパレット */
--base-gray-0: #ffffff;
--base-gray-10: #e6e6e6;
--base-gray-100: #333333;
/* ... その他の色 */
/* セマンティックカラー */
--color-background: light-dark(var(--base-gray-5), var(--base-gray-110));
--color-surface: light-dark(var(--base-gray-0), var(--base-gray-100));
--color-high-emphasis: light-dark(rgb(0 0 0 / .89), rgb(255 255 255 / .92));
--color-medium-emphasis: light-dark(rgb(0 0 0 / .6), rgb(255 255 255 / .65));
/* タイポグラフィ */
--font-size-heading-1: 2rem;
--font-size-heading-2: 1.5rem;
--font-size-subhead-1: 1.25rem;
--font-size-subhead-2: 1.125rem;
--font-size-body-1: 1rem;
--font-size-body-2: 0.875rem;
--font-size-body-3: 0.75rem;
--font-weight-regular: 400;
--font-weight-bold: 700;
--line-height-heading: 120%;
--line-height-subhead: 140%;
--line-height-body: 160%;
/* ブレークポイント */
--breakpoint-desktop: 72rem;
--breakpoint-tablet: 48rem;
--breakpoint-mobile: 24rem;
}
```
### トークン変換システム
- `light-dark()` 関数を使用してライト/ダークモード対応を実現
- Tailwind CSS v4の `@theme` ディレクティブでトークンを定義
- CSSカスタムプロパティとして直接参照可能
## 2. Component Library
### コンポーネントの場所
UIコンポーネントは `src/component/` ディレクトリにAtomic Designパターンで構成されています。
### コンポーネントアーキテクチャ
- **Atoms**: `src/component/Atoms/` - 最小単位のコンポーネント（Button, Icon, Logo等）
- **Molecules**: `src/component/Molecules/` - Atomsを組み合わせた複合コンポーネント（Card, List等）
- **Organisms**: `src/component/Organisms/` - Moleculesを組み合わせた大きなセクション（Header, Footer等）
- **Pages**: `src/component/Pages/` - ページレベルのコンポーネント
- **Templates**: `src/component/Templates/` - ページレイアウトテンプレート
### コンポーネントの例
```tsx:src/component/Molecules/ProjectCard/ProjectCard.tsx
import { ProjectInterface } from "../../../contents/Project/Project"
interface ProjectCardProps {
project: ProjectInterface
}
export const ProjectCard = ({ project }: ProjectCardProps) => {
return (
<li className="rounded-lg bg-surface-alpha backdrop-blur-[2px] backdrop-filter border border-gray-variant">
<a href={project.url} className="p-4 group grid" target="_blank">
<h3 className="subhead-2 mt-2.5 group-hover:underline underline-offset-4">
{project.title}
</h3>
<p className="mt-2">{project.description}</p>
<p className="body-3 text-medium-emphasis mt-2">{project.term}</p>
</a>
</li>
)
}
```
### コンポーネントドキュメント
現在、Storybookなどのドキュメントツールは使用されていません。
## 3. Frameworks & Libraries
### UIフレームワーク
- **React**: v19.1.0
- **TypeScript**: v5.0.2
### スタイリングライブラリ
- **Tailwind CSS**: v4.1.10（`@tailwindcss/vite` プラグイン使用）
- **CSSカスタムプロパティ**: デザイントークン管理
### ビルドシステム
- **Vite**: v6.3.5（ビルドツールとバンドラー）
- **@vitejs/plugin-react-swc**: React用のSWCプラグイン
### その他の主要ライブラリ
- `react-router`: v7.6.2（ルーティング）
- `react-markdown`: v10.1.0（Markdownレンダリング）
- `gray-matter`: v4.0.3（Markdownフロントマター解析）
## 4. Asset Management
### アセットの保存場所
- **画像**: `public/` ディレクトリ（例: `public/favicon.svg`, `public/image-ogp.png`）
- **コンテンツ**: `src/contents/` ディレクトリ（Markdownファイル等）
### アセットの参照方法
- 静的アセットは `public/` から直接参照（例: `/favicon.svg`）
- Viteのアセット処理機能を利用
### アセット最適化
- Viteのビルド時の自動最適化を利用
- 現在、CDN設定は確認されていません
## 5. Icon System
### アイコンの保存場所
- **Material Symbols**: `src/component/Atoms/MaterialSymbols/MaterialSymbols.tsx` コンポーネント経由
- **ブランドアイコン**: `src/component/Atoms/BrandIcon/` ディレクトリ
- `LogoIcon.tsx`
- `QiitaIcon.tsx`
- `XIcon.tsx`
### アイコンの使用方法
```tsx:src/component/Atoms/MaterialSymbols/MaterialSymbols.tsx
import React from 'react';
interface MaterialSymbolsProps {
children: string;
fill?: boolean;
className?: string;
size?: number;
[key: string]: any;
}
export const MaterialSymbols = ({
children,
fill = false,
className = '',
size = 24,
...props
}: MaterialSymbolsProps) => {
const style: React.CSSProperties = {
fontFamily: 'Material Symbols Rounded',
fontSize: size,
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' 300, 'GRAD' var(--grad-value), 'opsz' 24`,
height: size,
width: size,
...props.style,
};
return (
<span className={`material-symbols ${className}`} style={style} {...props}>
{children}
</span>
);
};
```
### アイコンの命名規則
- Material Symbols: 文字列でアイコン名を指定（例: `"home"`, `"menu"`）
- ブランドアイコン: コンポーネント名で管理（`LogoIcon`, `QiitaIcon`, `XIcon`）
## 6. Styling Approach
### CSS手法
- **Tailwind CSS v4**: ユーティリティファーストのアプローチ
- **CSSカスタムプロパティ**: デザイントークン管理
- **@utility ディレクティブ**: Tailwind v4のカスタムユーティリティクラス
### グローバルスタイル
グローバルスタイルは `src/style/` ディレクトリに整理されています：
- `index.css`: メインエントリーポイント
- `reset.css`: CSSリセットとベーススタイル
- `theme.css`: デザイントークン定義
- `utility.css`: カスタムユーティリティクラス（タイポグラフィ、エレベーション等）
- `custom.css`: プロジェクト固有のカスタムスタイル
- `markdown.css`: Markdownコンテンツ用スタイル
### タイポグラフィユーティリティ
`src/style/utility.css` で定義されたユーティリティクラス：
```css:src/style/utility.css
@utility heading-1 {
font-size: var(--font-size-heading-1);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
}
@utility subhead-2 {
font-size: var(--font-size-subhead-2);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-subhead);
}
@utility body-1 {
font-size: var(--font-size-body-1);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body);
}
```
### レスポンシブデザイン
- CSSカスタムプロパティでブレークポイントを定義
- Tailwind CSSのレスポンシブユーティリティクラスを使用（例: `md:`, `lg:`）
## 7. Project Structure
### コードベースの組織
```
src/
├── component/ # UIコンポーネント（Atomic Design）
│ ├── Atoms/
│ ├── Molecules/
│ ├── Organisms/
│ ├── Pages/
│ └── Templates/
├── contents/ # コンテンツファイル（Markdown等）
│ ├── Product/
│ ├── Project/
│ └── StageHistory/
├── hooks/ # カスタムReactフック
├── style/ # スタイルファイル
├── utils/ # ユーティリティ関数
└── main.tsx # アプリケーションエントリーポイント
```
### 機能組織のパターン
- **Atomic Design**: コンポーネントの階層構造
- **機能別ディレクトリ**: コンテンツタイプごとにディレクトリを分割
- **カスタムフック**: 再利用可能なロジックを `hooks/` に分離
## Figma統合時の注意事項
### Tailwind CSSクラスの変換
Figmaから生成されたTailwindクラスは、プロジェクトの既存パターンに合わせて変換する必要があります：
1. **カラー**: Figmaの `var(--color-name)` をプロジェクトのトークンにマッピング
- 例: `bg-[var(--surface-alpha,...)]` → `bg-surface-alpha`
2. **タイポグラフィ**: Figmaのフォントスタイルをユーティリティクラスに変換
- 例: `font-[var(--font-size/subhead-2,20px)]` → `subhead-2`
3. **スペーシング**: Tailwindの標準スペーシングスケールを使用
- 例: `px-[16px]` → `px-4`, `gap-[8px]` → `gap-2`
### コンポーネントパターン
- 既存のAtomic Designパターンに従う
- プロップスはTypeScriptインターフェースで型定義
- セマンティックなHTML要素を使用
### デザイントークンのマッピング
Figmaのデザイントークンとプロジェクトのトークンを対応付け：
- `--high-emphasis` → `--color-high-emphasis`
- `--medium-emphasis` → `--color-medium-emphasis`
- `--surface-alpha` → `--color-surface-alpha`
- `--gray-variant` → `--color-gray-variant`
### ダークモード対応
すべてのカラートークンは `light-dark()` 関数を使用してダークモード対応済みです。
get_metadata
Figmaの選択範囲で使用されているレイヤーID・名前・タイプ・位置・サイズといった基本的なプロパティだけを含む、XML形式で返します。
- パラメータ
- nodeId：Figmaドキュメント内のノードのID
- fileKey：Figmaファイルのキー
- clientLanguages：現在のコンテキストで使用しているプログラミング言語のカンマ区切りリスト
-
javascript, html, css, typescriptなど
-
- clientFrameworks：現在のコンテキストで使用しているフレームワークのカンマ区切りリスト
-
react, vue, djangoなど
-
<symbol id="2256:1179" name="Project card" x="-1589" y="2345" width="544" height="105" />
get_figjam
get_metadata と同じようにFigjamのメタデータをXML形式で返します。
- パラメータ
- nodeId：Figmaドキュメント内のノードのID
- fileKey：Figmaファイルのキー
- clientLanguages：現在のコンテキストで使用しているプログラミング言語のカンマ区切りリスト
-
javascript, html, css, typescriptなど
-
- clientFrameworks：現在のコンテキストで使用しているフレームワークのカンマ区切りリスト
-
react, vue, djangoなど
-
- includeImagesOfNodes:レスポンス内にノードの画像を含めるかどうかを指定します
<sticky id="2002:529" x="2240" y="451" color="STICKY_YELLOW" author="出口裕貴" width="240" height="240">sticky</sticky>
whoami
Figmaに認証されているユーザーの情報を返します。
(リモートサーバーのみ)
{
"handle": "出口裕貴",
"email": ".....@gmail.com",
"plans": [
{
"name": "degudegu2510",
"seat": "Full"
}
]
}
Figma Makeのコンテキストをエージェントに渡す
AIエージェントがMakeで作成されたファイル情報を取得することができます。
以下のようなプロンプト
プロンプト
以下のFigma Makeのリンクからコンテキストを取得してください。
https://www.figma.com/make/............
取得できた内容は以下の通りになり、作られたファイルが取得できました。
ここから、特定のコンポーネントの内容が取得可能なようです。
This contains the resource links for all the source files in the Figma Make. Start with App.tsx to understand the code.
Resource: App.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/App.tsx]
Resource: components/ui/accordion.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/accordion.tsx]
Resource: components/ui/alert-dialog.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/alert-dialog.tsx]
Resource: components/ui/alert.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/alert.tsx]
Resource: components/ui/aspect-ratio.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/aspect-ratio.tsx]
Resource: components/ui/avatar.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/avatar.tsx]
Resource: components/ui/badge.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/badge.tsx]
Resource: components/ui/breadcrumb.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/breadcrumb.tsx]
Resource: components/ui/button.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/button.tsx]
Resource: components/ui/calendar.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/calendar.tsx]
Resource: components/ui/card.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/card.tsx]
Resource: components/ui/carousel.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/carousel.tsx]
Resource: components/ui/chart.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/chart.tsx]
Resource: components/ui/checkbox.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/checkbox.tsx]
Resource: components/ui/collapsible.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/collapsible.tsx]
Resource: components/ui/command.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/command.tsx]
Resource: components/ui/context-menu.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/context-menu.tsx]
Resource: components/ui/dialog.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/dialog.tsx]
Resource: components/ui/drawer.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/drawer.tsx]
Resource: components/ui/dropdown-menu.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/dropdown-menu.tsx]
Resource: components/ui/form.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/form.tsx]
Resource: components/ui/hover-card.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/hover-card.tsx]
Resource: components/ui/input-otp.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/input-otp.tsx]
Resource: components/ui/input.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/input.tsx]
Resource: components/ui/label.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/label.tsx]
Resource: components/ui/menubar.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/menubar.tsx]
Resource: components/ui/navigation-menu.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/navigation-menu.tsx]
Resource: components/ui/pagination.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/pagination.tsx]
Resource: components/ui/popover.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/popover.tsx]
Resource: components/ui/progress.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/progress.tsx]
Resource: components/ui/radio-group.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/radio-group.tsx]
Resource: components/ui/resizable.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/resizable.tsx]
Resource: components/ui/scroll-area.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/scroll-area.tsx]
Resource: components/ui/select.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/select.tsx]
Resource: components/ui/separator.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/separator.tsx]
Resource: components/ui/sheet.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/sheet.tsx]
Resource: components/ui/sidebar.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/sidebar.tsx]
Resource: components/ui/skeleton.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/skeleton.tsx]
Resource: components/ui/slider.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/slider.tsx]
Resource: components/ui/sonner.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/sonner.tsx]
Resource: components/ui/switch.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/switch.tsx]
Resource: components/ui/table.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/table.tsx]
Resource: components/ui/tabs.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/tabs.tsx]
Resource: components/ui/textarea.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/textarea.tsx]
Resource: components/ui/toggle-group.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/toggle-group.tsx]
Resource: components/ui/toggle.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/toggle.tsx]
Resource: components/ui/tooltip.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/tooltip.tsx]
Resource: components/ui/use-mobile.ts (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/use-mobile.ts]
Resource: components/ui/utils.ts (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/ui/utils.ts]
Resource: components/figma/ImageWithFallback.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/figma/ImageWithFallback.tsx]
Resource: components/BlogCard.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/BlogCard.tsx]
Resource: components/Header.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/Header.tsx]
Resource: components/MarkdownRenderer.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/MarkdownRenderer.tsx]
Resource: components/Layout.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/components/Layout.tsx]
Resource: styles/globals.css (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/styles/globals.css]
Resource: lib/blog.ts (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/lib/blog.ts]
Resource: Attributions.md (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/Attributions.md]
Resource: pages/HomePage.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/pages/HomePage.tsx]
Resource: pages/BlogDetailPage.tsx (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/pages/BlogDetailPage.tsx]
Resource: guidelines/Guidelines.md (text/plain) [URI: file://figma/make/source/BHx3ZzseG2UMTkezDluyMW/guidelines/Guidelines.md]
Resource: 51300faef87679df641098e2923cb492c6e2c10e.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/51300faef87679df641098e2923cb492c6e2c10e.png]
Resource: 7b01163c559bab90a83459834620591de73cfaab.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/7b01163c559bab90a83459834620591de73cfaab.png]
Resource: 7b6869eceee10ad9a100fc0db1666e8532ea316b.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/7b6869eceee10ad9a100fc0db1666e8532ea316b.png]
Resource: 97faba65d874b9e38644b0dde87cef085f86d8fd.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/97faba65d874b9e38644b0dde87cef085f86d8fd.png]
Resource: a05b3710c09f022d97be377ed4a0bb2baf252c13.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/a05b3710c09f022d97be377ed4a0bb2baf252c13.png]
Resource: a8a14046ae9de0fd0c7acfaf8e0f19a6204af992.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/a8a14046ae9de0fd0c7acfaf8e0f19a6204af992.png]
Resource: bd84c8cb7a1a3702e50ff7838b39a00169ae5589.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/bd84c8cb7a1a3702e50ff7838b39a00169ae5589.png]
Resource: d91727384db53b0d81077894c29df6fffaf8fbb5.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/d91727384db53b0d81077894c29df6fffaf8fbb5.png]
Resource: e635e2b3d97fd5cb8e0a9803a859cb08dce1bc06.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/e635e2b3d97fd5cb8e0a9803a859cb08dce1bc06.png]
Resource: f0d4c94f444a589a3e979f69c18bf934eb807a51.png (image/png) [URI: file://figma/make/image/BHx3ZzseG2UMTkezDluyMW/f0d4c94f444a589a3e979f69c18bf934eb807a51.png]
まとめ
Figma MCPは、**“AIに丸投げ”ではなく、“AIに正しい文脈を渡す”**ための橋渡しのツールです。
ここで紹介したMCPとプロジェクトに合わせて、デザイン→実装の速度と品質は着実に上がっていくと思います。ぜひこの記事を参考に、Figma MCPを試してみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドについてQiitaで記事を書いています。
ぜひQiitaのフォローと、X（Twitter）のフォローもお願いします。