パターンの概要

    Indigo.Design システムは、Indigo.Design コンポーネントから作成された 180 以上の UI パターンで生産性を向上します。これらは同じレスポンシブ Web デザイン動作およびテーマ機能で拡張されています。UI パターンは、Sketch ライブラリの個別のページにまたがって表示されます。UI パターンは Figma および Sketch のライブラリの別々のページに散らばっていますが、Adobe XD ではライブラリファイルの右端に列として配置されています。

    • 🌆 AV Player (AV プレーヤー)
    • 🌆 Avatar + Badge (アバター + バッジ)
    • 🌆 Cards (カード)
    • 🌆 Chat (チャット)
    • 🌆 Data Visualizations (データ ビジュアライゼーション)
    • 🌆 Details (ディテール)
    • 🌆 Dialogs (ダイアログ)
    • 🌆 Empty State (空の状態)
    • 🌆 File Upload および Image Manipulation (ファイル アップロードおよび画像操作)
    • 🌆 Footer (フッター)
    • 🌆 Form (フォーム)
    • 🌆 Grids (グリッド)
    • 🌆 Lists (リスト)
    • 🌆 Menus (メニュー)
    • 🌆 Onboarding (オンボーディング)
    • 🌆 Pricing Table (プライシング テーブル)
    • 🌆 Scheduling (スケジュール)
    • 🌆 Social Feed (ソーシャル フィード)
    • 🌆 Tiles (タイル)
    • 🌆 User Profile (ユーザー プロファイル)
    Warning

    コンポーネントとは異なり、Figma および Sketch ライブラリの一部のパターンは、グループとして表示するためにデタッチすることができ、その前に定義したルック アンド フィールを保持します。ただし、Adobe XD では、パターンのグループ化を解除すると、ネストされたすべてのコンポーネントがグループに変換され、それらの構造を正しくトレースできなくなるため、結果のレイアウトからコードを生成する機能に壊滅的な影響があります。パターンのグループ化を解除せずに、Adobe XD で状態、レイアウト、およびスタイルの調整を行うことができるため、これらのパターン全体をアートボードに保持することをお勧めします。また、Figma、Sketch と Adobe XD の両方で、ライブラリからパターンのリンクを解除すると、デザイン システムの後続のバージョンからの更新を自動的に適用できなくなることにも注意してください。

    コンポーネントとは異なり、すべてのパターンはグループとして表示するためにデタッチでき、その前に定義したルックアンドフィールを保持します。以下は、連絡先リスト、検索可能およびフィルター可能なリスト、一致する結果が見つからない場合の空の状態のリストなどの List パターンのスニペットです。

    新しいパターンを追加したり、構造をアップグレードしたりすることで、パターンは常に改善されます。デザインで繰り返し使用するインターフェイス レイアウトから独自のパターンを作成してデフォルト セットを拡張し、デザインの生産性をさらに向上できます。

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。