dashboard-to-figma は何をしますか？
Figmaで編集可能な複雑なダッシュボードを計画、再構築、検証、納品するためのCodexスキルです。
概要
このスキルは、AIエージェントがFigma上でダッシュボードを効率的に作成・管理するためのワークフローを提供します。以下のプロセスを自動化します。
- 計画: ダッシュボードの要件を分析し、コンポーネント構造を定義します。
- 再構築: 既存のデザインやデータからFigmaフレームを生成します。
- 検証: レイアウトの一貫性、アクセシビリティ、Figmaの編集可能性を確認します。
- 納品: 最終的なFigmaファイルを出力し、チームと共有します。
対応プラットフォーム
- Codex（主要）
- その他のAIエージェント（応用可能）
使用方法
スキルを有効化すると、AIエージェントは以下の手順を実行します。
- 計画フェーズ: ユーザーの要件をヒアリングし、ダッシュボードのワイヤーフレームをFigma内で計画します。
- 再構築フェーズ: Figma API またはプラグインを使用して、計画に基づいたコンポーネントを生成します。
- 検証フェーズ: 生成されたデザインが編集可能か、レイアウトに問題がないかをチェックします。
- 納品フェーズ: 完成したFigmaファイルをユーザーに提供します。
技術詳細
- Figma REST API を使用してファイルの読み書きを行います。
- プラグイン（例:
figma-to-code）と連携してデザインデータを変換します。 - 環境変数
FIGMA_ACCESS_TOKENが必要です。
例
# Figma API を使用したフレーム作成の例
curl -X POST https://api.figma.com/v1/files/YOUR_FILE_ID/nodes \
-H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
-d '{"nodes": [{"type": "FRAME", "name": "Dashboard"}]}'
注意事項
- Figma API のレート制限に注意してください。
- スキルは編集可能なデザインを生成しますが、最終調整は手動で行うことを推奨します。