作業の進め方
Figma Code Connect Componentsは画面を生成するツールではなく、マッピングのワークフローです。Figmaの選択範囲からマッピング未設定の公開済みコンポーネントを見つけ、ローカルのコードベースを検索し、コンポーネントの構造とプロパティを比較します。名前が一致しても出発点にすぎず、バリアントの選択肢、デフォルト値、用途も一致している必要があります。
ソースでは、マッピングを作成する前に、提案された対応をユーザーに提示することが求められています。一部のみの承認にも対応し、曖昧なものや見つからないコンポーネントは推測せず報告します。成果物は、見つけやすいデザインとコードの接続です。どちらかを自動的に書き換えることはなく、見た目が同一であることを証明するものでもありません。
想定される成果物
- Figmaのノードとコードコンポーネントの対応候補リスト
- ソースパスとフレームワークラベル付きの、承認済みCode Connectマッピング
- 接続済み、スキップ、失敗のマッピングを分けた概要
ブリーフからレビューまで
- 01公開済みコンポーネントを特定
ノードを指定したFigmaリンクか、対応するデスクトップでの選択を使い、マッピング未設定のコンポーネントを確認します。
- 02実装を比較
リポジトリを検索し、実際のエクスポート、プロパティ、デフォルト値を調べます。複数のコンポーネントが該当し得る場合は、代替案を提示します。
- 03承認済みの組み合わせを接続
ユーザーが承認したマッピングだけを送信し、成功した項目と失敗した項目を分けて報告します。