作業の進め方
Figma Generate Designはコードからデザインへという方向で動作します。成果物はFigma内の画面であり、アプリケーションコードではありません。ページを組み立てる前に、既存のコンポーネントインスタンス、ライブラリ変数、テキストスタイルやエフェクトスタイルを探します。ソースでは、ハードコードした値で似たボックスを描くより、再利用を優先するとされています。
組み立ては段階的に進めます。まずラッパーフレームを作成し、その中に各セクションを作って確認します。コンポーネントのテキストプロパティとデフォルトバリアントはソースコードと照合し、セクションのスクリーンショットで、縮小したページ全体表示では見落とされがちな文字切れや残ったプレースホルダーを見つけます。成果は、アプリのスクリーンショットではなく、編集可能なデザインシステムのインスタンスであるべきです。
期待される成果物
- コンポーネントインスタンスで構成された、新規または更新済みのFigma画面
- 変数にバインドされた色・余白・角丸と、再利用可能なスタイル
- ソースと照らし合わせたセクション単位および画面全体の視覚チェック
ブリーフからレビューまで
- 01元の画面を把握する
セクション、コンポーネント、デフォルトのプロパティ値を読み取ります。対象のFigmaファイルと既存のシステム規約を確認します。
- 02資産を探して再利用する
既存の画面を調べ、リンクされたライブラリからコンポーネント、変数、スタイルを検索します。ローカル変数の結果が空でも、リモートのトークンが存在しない証拠にはなりません。
- 03セクションを作成して検証する
先にラッパーを作成し、セクションを一つずつ組み立てます。次に進む前に、テキスト、バリアント、レイアウトを確認します。