secretaryofstatearcsine241/figsor

figsor は何をしますか？

Cursor AI を Figma のキャンバスに直接コマンドを同期するサーバーと接続し、チャット駆動のデザインと編集を可能にします。

概要

このスキルは、AI エージェント（Cursor AI など）からの指示を Figma のデザイン操作に変換するブリッジとして機能します。以下の機能を提供します：

• チャット駆動デザイン: 「青い背景のボタンを作成」などの自然言語コマンドで Figma にオブジェクトを追加。
• リアルタイム同期: 変更が即座に Figma キャンバスに反映され、チームとのコラボレーションがスムーズに。
• プラットフォーム対応: Cursor AI との統合に最適化、他の AI ツールへの拡張も可能。

使用例

# Figma に新しい長方形を追加
figsor add rectangle --width 200 --height 100 --fill "#FF0000"

# テキスト要素を作成
figsor add text --content "Hello, World!" --font-size 24

技術詳細

このスキルは、Figma API をラップしたローカルサーバーを起動します。AI エージェントが生成したコマンドは HTTP リクエストとしてサーバーに送信され、サーバーが Figma の REST API を介してキャンバスを更新します。認証には Figma の personal access token が必要です。

セットアップ

1. Figma の 設定 > パーソナルアクセストークン からトークンを生成。
2. .env ファイルに FIGMA_TOKEN=your_token_here を設定。
3. figsor start でサーバーを起動。

コマンド一覧

コマンド	説明
figsor add	Figma に要素（矩形、テキストなど）を追加
figsor update	既存要素のプロパティを変更
figsor delete	要素を削除
figsor list	現在のキャンバス上の要素を表示

トラブルシューティング

• トークンエラー: FIGMA_TOKEN が正しく設定されているか確認。
• サーバーが応答しない: figsor start でサーバーが起動しているか確認。
• 同期遅延: Figma API のレート制限に注意。

参考リンク

• Figma API ドキュメント
• Cursor AI ドキュメント