Framelink Figma MCP Server

🚀 Figma リンク MCP サーバー

コードエージェントによる Figma データのアクセスを可能にします。どのフレームワークでもデザインをワンクリックで完了させます。

コードエージェントである Cursor、Winds などから Figma データにアクセスできるようにし、デザインとコードをシームレスに接続します。

✨ 主な機能

• リアルタイムデータ同期：Figma プロジェクトとコンポーネントの情報を自動的に取得します。
• バージョン管理：デザインの変更を追跡し、コードとデザインを一致させます。
• チーム協力：複数人での協力をサポートし、開発効率を向上させます。

📦 インストール

npm を使ったインストール

npm install framelink-mcp

設定例

プロジェクトのルートディレクトリに framelink.config.js ファイルを作成します。

module.exports = {
  host: 'your-figma-host',
  projectId: 'your-project-id',
  token: 'your-access-token'
};

💻 使用例

基本的な使用法

1. 設定の初期化：プラグインをインストールした後、npx framelink init を実行して設定ファイルを初期化します。
2. Figma アカウントの接続：CLI を通じて Figma アカウントにログインし、アクセス権限を付与します。
3. 協力の開始：プロジェクト内で @framelink/mcp パッケージが提供する API を使用して、リアルタイムのデザインデータを取得します。

const { getProjectData } = require('@framelink/mcp');

async function fetchFigmaData() {
  const data = await getProjectData();
  console.log('取得した Figma データ:', data);
}

fetchFigmaData();

📚 ドキュメント

あなたのプロジェクトに Framelink の MCP サーバーを統合する方法の詳細については、Framelink 公式サイトをご覧ください。

📄 ライセンス

このプロジェクトは MIT ライセンスに基づいています。詳細は LICENSE ファイルを参照してください。