Skip to main content
ブランドは、Driveフォルダ、Figmaファイル、またはすでに気に入っている1つのデザインの中にあります。それをワークスペースに保存されるデザインシステムに変えましょう。役割別の色、タイプスケール、トークン、いくつかのコンポーネント例が含まれます。以降の新しい作業はブランドに沿って始まり、既存のアプリも同じシステムで作り直せます。すでにリリースしたアプリにシステムを適用するのは、スタイルシートの差し替えではなく、本格的な再構築です。

​
こんな人におすすめ

  • 次の5ページをデザインする前に、信頼できる唯一の情報源が必要なプロダクトデザイナー。
  • アプリ同士のデザインがばらばらになり、すべてを同じ見た目に揃えたい創業者。

​
コネクタ

​
始める前に

ブランドを定義するものを、現在どこにあってもすべて集めてください。ブランドファイル、気に入っているデザイン、ウェブサイト、Figmaファイルなどです。ロゴ、色、タイポグラフィがDriveに保存されている場合は、Driveを接続してください。Figma URL、サイトのURL、または既存の DESIGN.md があれば用意してください。

​
Agentへのプロンプト

​
期待できること

Agentは、渡されたソースを生きたスタイルガイドに変換します。役割が付いた色、タイプスケール、システムの他の部分が参照するトークン、2〜3個のコンポーネント例、そしてあなたが提供したブランドアセットが含まれます。内容を確認したら、Save design system を選択してワークスペースに保存します。それ以降、新しい作業は最初のフレームからブランドに沿って生成されます。 すでに作成したアプリをシステムの配下に移行するには、対象を選択してシステムを適用します。

​
自分向けにカスタマイズする

​
トラブルシューティング

言葉で説明するのではなく、ソースを指し示してください。Driveのブランドフォルダ、Figma URL、公開中のサイト、DESIGN.md のいずれも入力として使えます。
既存の作業にシステムを適用すると、スタイルシートを差し替えるのではなく、スタイリング層が再生成されます。開始前に表示される時間とクレジットに関する警告は通常の動作です。
その後の編集でも、システムを使い続けるはずです。ずれに気づいたら、チャットでその旨を伝え、画面を指定してください。
先に保存してください。保存していないスタイルガイドは、生成されたプロジェクト内にとどまります。

​
関連項目

ランディングページをデザインする

保存したシステムを、ウェイトリストやローンチページで活用します。

既存のウェブサイトをリデザインする

すでにあるサイトからシステムを抽出します。