jpskill.com
🎨 デザイン コミュニティ 🟡 少し慣れが必要 👤 デザイナー・Web制作者

🎨 Figma MCP統合(デザイン文脈取得・コード変換)

figma

Figma MCPサーバーでデザイン文脈・スクショ・変数・アセットを取得し本番コードに変換するSkill。

⚡ ⏱ ロゴ初案3パターン 1週間 → 1時間

📺 まず動画で見る(YouTube)

▶ Claude Codeで業務自動化を完全攻略!AIエージェントを使いこなす技術と実践デモ ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Figma MCPサーバーでデザイン文脈・スクショ・変数・アセットを取得し本番コードに変換するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
7

💬 こう話しかけるだけ — サンプルプロンプト

  • › Figma MCP統合(デザイン文脈取得・コード変換) を使って、ブランドカラーに沿ったデザイン案を3つ
  • › Figma MCP統合(デザイン文脈取得・コード変換) で、既存のデザインをモダンにリフレッシュ
  • › Figma MCP統合(デザイン文脈取得・コード変換) を使って、レイアウトを整えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Figma MCP

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.

Figma MCP Integration Rules

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

Required flow (do not skip)

  1. Run get_design_context first to fetch the structured representation for the exact node(s).
  2. If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
  3. Run get_screenshot for a visual reference of the node variant being implemented.
  4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
  5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
  6. Validate against Figma for 1:1 look and behavior before marking complete.

Implementation rules

  • Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
  • Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.
  • Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
  • Use the project's color system, typography scale, and spacing tokens consistently.
  • Respect existing routing, state management, and data-fetch patterns already adopted in the repo.
  • Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.
  • Validate the final UI against the Figma screenshot for both look and behavior.

Asset handling

  • The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.
  • IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.
  • IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.
  • IMPORTANT: do NOT use or create placeholders if a localhost source is provided.

Link-based prompting

  • The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.
  • The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.

References

  • references/figma-mcp-config.md — setup, verification, troubleshooting, and link-based usage reminders.
  • references/figma-tools-and-prompts.md — tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。