whiskfernlowdensitylipoprotein154/figma-console-mcp-skills

figma-console-mcp-skills は何をしますか？

Figmaのデザインシステムとワークフローを、再利用可能なMCPスキル、定義済みスクリプト、信頼性の高いプレイブックで自動化し、AIエージェントに統合します。

概要

このスキルは、Figmaのデザインシステムとワークフローを自動化するための、再利用可能なMCP（Model Context Protocol）スキル、定義済みスクリプト、および信頼性の高いプレイブックを提供します。AIエージェント（Claude Code、Cursor、Codexなど）がFigmaコンソールと対話し、コンポーネントの管理、変数の操作、スタイルの適用、エクスポート処理などを自動化できるようになります。

主な機能

• コンポーネント管理: コンポーネントの作成、更新、整理を自動化します。
• 変数の操作: デザイントークンや変数を効率的に管理します。
• スタイルの適用: 一貫性のあるスタイルをプロジェクト全体に適用します。
• エクスポート処理: アセットのエクスポートを自動化し、開発パイプラインに統合します。
• プレイブック: よくあるワークフローを定義済みの手順書で実行します。

対応プラットフォーム

• Claude Code
• Cursor
• Codex
• その他のMCP対応AIエージェント

前提条件

1. Figmaアカウントとアクセストークンが必要です。
2. AIエージェントがMCPをサポートしている必要があります。
3. 必要な環境変数を設定してください。

クイックスタート

# 環境変数の設定
export FIGMA_ACCESS_TOKEN="your_figma_access_token"
export FIGMA_FILE_KEY="your_figma_file_key"

# スキルのインポート
# （AIエージェントの指示に従ってスキルを追加してください）

使用例

// コンポーネントの一覧を取得する例
const components = await figma.getComponents({
  fileKey: process.env.FIGMA_FILE_KEY,
});
console.log(components);

ドキュメント

詳細なドキュメントは、公式リポジトリを参照してください。

ライセンス

MIT