作業の進め方
Figma Generate Library は、一度で画面を生成するツールではなく、複数フェーズのデザインシステム向けワークフローです。コード、既存の Figma ファイル、購読中のライブラリを比較し、書き込み前にトークンとコンポーネントの範囲を確定します。変数とスタイルをコンポーネントより先に作るため、視覚的なプロパティを一貫した基盤にバインドできます。
ソースは長時間にわたる状態管理に特に注意を払っています。作成したID、決定的な名前、保存したレジャーにより、ノードを重複させずに再開できます。コンポーネントの作業には、バリアントのレイアウト、テキストとブール値のプロパティ、アイコンの入れ替え、ドキュメントが含まれます。特にコードと Figma が食い違う場合は、人によるチェックポイントがワークフローに含まれます。スキルがどちらのシステムを正とするかを黙って決めることはありません。
期待される成果物
- Figma の変数コレクション、セマンティックエイリアス、テキストスタイルまたはエフェクトスタイル
- バリアントセットを管理した、ドキュメント付きの再利用可能なコンポーネント
- ステートレジャー、および最終的なバインディング、命名、ビジュアルのレビュー
指示からレビューまで
- 01調査と範囲の確定
コードと Figma のアセットを棚卸しし、ライブラリを検索したうえで、作成前に最初のトークンとコンポーネントの正確な範囲を合意します。
- 02基盤の作成
プリミティブ変数とセマンティック変数、モード、スコープ、コード構文を作成し、続いてタイポグラフィとエフェクトを作成します。基盤の承認を得たうえで、ページ構成と基盤のドキュメントを作成し、コンポーネントに着手する前に別途承認を得ます。
- 03コンポーネントを段階的に構築
変数バインディング、プロパティ、ドキュメントを備えたコンポーネントを一つずつ作成します。構造と見た目を検証し、スクリーンショットを示して承認を得てから次のコンポーネントに進みます。
- 04整合と監査
推測や広範なクリーンアップではなく、記録したIDを使って、命名、未解決のバインディング、任意のCode Connectマッピングをレビューします。