implement-design

作成者： figma

Figmaデザインをピクセルパーフェクトな視覚的忠実度で本番コードに変換します。Figma MCPサーバー接続と、ファイルキーとノードIDを含むFigma URLが必要で、デザインコンテキスト、スクリーンショット、アセットを抽出します。7ステップの構造化ワークフロー：URL解析、デザインコンテキスト取得、視覚参照キャプチャ、アセットダウンロード、プロジェクト規約への変換、1:1パリティ達成、Figmaに対する検証。重複よりもデザインシステムの再利用を優先し、Figmaトークンをプロジェクトデザインにマッピングします...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

ZIPダウンロード GitHub

figmaのその他のスキル

video-interaction-mapper

このスキルは、ユーザーがUI画面の録画を分析し、インタラクションの状態をFigmaにマッピングするよう依頼した場合に使用されます。「動画を配置して…」といったリクエストでトリガーされます。

figma-code-connect

FigmaコンポーネントをコードスニペットにマッピングするFigma Code Connectテンプレートファイルを作成・管理します。ユーザーがCode ConnectやFigmaコンポーネントについて言及した場合に使用します。

create-design-system-rules

プロジェクト全体で一貫したFigmaからコードへの実装を実現するカスタムデザインシステムルール。コンポーネント構成、スタイリング、デザイントークン、アセット処理に関するプロジェクト固有の規約を生成し、AIエージェントが一貫性のあるコードを生成できるよう導きます。CLAUDE.md（Claude Code用）、AGENTS.md（Codex CLI用）、.cursor/rules/figma-design-system.mdc（Cursor用）の3つのルールファイル形式に対応。ルール生成前にFigma MCPサーバー接続とコードベース分析による既存パターンの検出が必要です...

figma-implement-motion

Figmaのモーションとアニメーションを本番対応のアプリケーションコードに変換します。Figmaデザインからアニメーション/モーションを実装する際に使用 — ユーザーが言及…

SwiftUI ↔ Figmaの変換。ユーザーがSwift、SwiftUI、iOS、iPhone、iPadのいずれかを言及した場合に使用し、Figmaデザインを…に変換する双方向の処理を行います。

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

このスキルは、エージェントがFigmaのuse_figma MCPツールをスライドコンテキストで使用する際に役立ちます。figma-useと併用可能で、figma-useは…を使用するための基礎的なコンテキストを提供します。

figma-use-figjam

このスキルは、エージェントがFigJamコンテキストでFigmaのuse_figma MCPツールを使用するのを支援します。use_figmaの基本的なコンテキストを持つfigma-useと併用できます。