figma bro
作成者 John Bai
Figma のフレームから実装仕様を作り、部品とトークンの整合性を確認。
出典の確認
デザインから実装へ
フレームと技術構成を示し、配置、状態、トークンを仕様化して元デザインと比較します。
フロントエンドエンジニアデザインエンジニア小規模チーム
使い方 figma bro
Figma フレームを実装仕様に変換。
リンク先のテンプレートに基づく手順です。タスクと確認基準は提案で、実測結果ではありません。
まず Bot を追加
開く： 公式 figma bro テンプレート で Import Bot を選び、アプリで追加を完了。会話を開いて以下の手順へ。未設定の場合は先に インストールと接続のガイド .
準備するもの
- アクセスできるフレーム URL。
- フレームワーク、画面幅、部品の規則。
- トークンや部品ライブラリの資料。
フレームにアクセス可能に
リンクと認証を提供。不可なら画像とトークンを渡し、不明点を明示。
実装条件を説明
技術構成、レスポンシブ要件、静止画にない状態を指定。
実装仕様を依頼
寸法、トークン、部品の再利用、状態を指定し、推測と確認値を区別。
実装前に不明点を解消
ホバー、エラー、読込、モバイル状態を確認してから実装。
初回実行の例
[BRACKETED_VALUE] を自分の情報に置き換え、必要なファイルを添付して送信してください。
[FIGMA_FRAME_URL] を [FRAMEWORK] と [COMPONENT_LIBRARY] の仕様にして。幅：[VIEWPORTS]、トークン：[TOKEN_REFERENCE]。 配置、余白、文字、色、部品、状態を記載し、実測と仮定を区別。未定のモバイル、読込、エラー、キーボードフォーカスを質問にして。 まず仕様を返し、不明点の解決後に実装を依頼する。
期待する結果
確認項目で結果を見直し、不足を依頼します。
- 寸法、トークン、部品対応のある仕様。
- 仮定を明示した操作・レスポンシブ要件。
- 実装前に解決する設計上の不足。
次の実行
承認した仕様で実装するか次のフレームを確認。週次確認は任意。
初回が進まない場合
画像だけなら近似と未取得寸法を明記。正確な値には設計へのアクセスが必要。
テンプレートの内容
公式の出典公開情報の要約です。能力を示すラベルで、インストールされるスキルや接続の正確な名称は非公開の場合があります。
連携と入力
- Figma
- 貼り付けたデザインリンク
スキルと手順
Build specifications · Token audits · Component audits · Motion notes
ルーチン
任意の週次ライブラリ確認。標準では無効。
検討事項
スクリーンショットは設計ファイルより情報が少ないため、直接読んだ値を明示させてください。