デザインシステムを作成して再利用する

ブランドを定義するリファレンスを集める

HomeのサイドバーでDesign systemsを開き、Createを選択します。生成する前に、WebサイトまたはGitHubのリンク、ブランドリファレンス、ファイル、記述した説明などのソース資料を追加します。作成画面では、1ファイルあたり最大12 MBのファイルを使用できます。選択したサービスへの提供が許可されているリファレンスを使用してください。

すでにデザインルールを文書化している場合は、DESIGN.mdを貼り付けます。既存のデザインシステムをコピーして出発点にすることもできます。ブランドカラー、タイポグラフィ、ロゴの余白、コンポーネントの動作など、変更してはならない要素を明記してください。

コードまたはFigmaをリファレンスとして使用する

Advancedを展開すると、GitHubリポジトリ、ローカルコード、.figファイル、またはFigmaファイルのURLを使用できます。無関係なプロジェクトフォルダーをアップロードするのではなく、該当するソースを選択してください。アセットと、コンポーネントについて説明するファイルは一緒にしておきます。

FigmaのURLはソースリファレンスであり、すべての非公開ファイルを読み取れることを保証するものではありません。アクセスに失敗した場合は、アクセスが許可されたローカルの.figコピーまたは明確なスクリーンショットを提供してください。Figmaリファレンスをインポートしても、ネイティブのFigmaファイルへ直接書き戻すエクスポート機能は有効になりません。

システムを生成、確認、調整する

1. 提供したリファレンスを確認し、Generateを選択します。システムを使用可能と判断する前に、抽出または生成が完了するまで待ちます。
2. 生成されたプレビューとDESIGN.mdを確認します。カラー、文字サイズ、間隔、コンポーネントをリファレンスと比較し、抜けている点や矛盾するルールを修正してください。
3. 編集したDESIGN.mdをSaveします。エージェントにシステムの修正を依頼した場合は、公開する前に結果をもう一度確認してください。

別のプロジェクトでも従える要件を記述します。各カラーを使用する場所、見出しと本文に使用するフォント、ボタン、フォーム、各状態の動作を指定してください。魅力的なスクリーンショットを集めるだけでは、こうしたルールを定義したことにはなりません。

公開してプロジェクトで選択する

1. システムの確認が完了したら、そのシステムのPublishedコントロールを使用します。下書きは引き続き確認できますが、他のプロジェクトで使用するには事前に公開してください。
2. Homeまたはプロジェクトのデザインシステム選択画面に戻ります。目的のシステムを選択し、そのプレビューを確認します。
3. 作成する内容と重要なルールを記述します。生成された成果物をシステムと照合し、相違点があれば対象を絞って修正します。

ルールのSave、システムの公開、プロジェクトへの適用は、それぞれ別の操作です。デザインシステムを変更しても、既存の出力が再生成されたとは限りません。該当するプロジェクトを開き直し、その結果を確認してください。

インターフェースのワークフローについては、プロトタイプに進んでください。既存のHTML成果物に小さな変更を加える場合は、キャンバス編集を参照してください。

システムが見つからない場合、または読み取り専用の場合

現在のワークスペースと、システムが公開済みかどうかを確認してください。チームリソースと個人リソースは異なる場合があります。チームメイトの同期済みコピーは読み取り専用になっていることがあります。ソースまたは公開状態を変更するには、所有者、または必要なワークスペース権限を持つアカウントを使用してください。

抽出に失敗した場合は、ソースURL、ファイルサイズ、アクセス権を確認してください。アクセスできないソースを削除するか、使用が許可されたローカルリファレンスに置き換えてから再試行します。Saveに失敗した場合は、画面を離れる前に編集済みルールのコピーを保存してください。OpenDesignで公開しても、変更はGitHubへ反映されません。