スタイル設定の概要

    Indigo.Design システムは、Ignite UI for Angular コントロールにもマップされる 60 以上のすべての UI コンポーネントをスタイリングする精巧な手段を提供します。Angular 製品のテーマ エンジンは数行のコードで製品全体のスタイルを変更できるカスタム カラー テーマを作成できます。App Builder もこれらのテーマ設定メカニズムを実装しており、ユーザーは数回クリックするだけでアプリの完全な外観を変更できます。

    Figma でのスタイル設定

    4 つの Figma ライブラリ (Indigo.Design for Material、Indigo.Design for Bootstrap、Indigo.Design for Fluent、および Indigo.Design for Indigo) はそれぞれ、アセットと、ライブラリの残りの部分が構築される強力なスタイリング インフラストラクチャを提供するページの同じ構造を持っています。好みのデザイン言語に基づいてバリアントを選択した後、ライブラリの外観をカスタマイズするために以下のページに移動してください:

    • ↳ Icons
    • ↳ Colors
    • ↳ Typography
    • ↳ Elevation
    • ↳ Illustrations

    リストされているページは、🧱 Foundation ページの下にあります。Colors と Elevations は Color styles と Effect styles として存在し、Typography は Text styles として定義されているため、Indigo.Design システムで作成した特定のデザインのテーマをすばやく変更できます。

    詳細情報:

    • Material Icons - Material Icon のデザイン ガイドラインに基づいて作成された 360 以上のアイコンで拡張された 160 以上の Material Icon のコレクション。
    • Colors - primary、secondary、gray のカラー バリアントのパレット、特殊な色、さまざまなタイプの色覚異常に最適化されたセットを含むデータ可視化のために特別に設計されたいくつかのパレット。
    • Typography - ジェネリックおよびコンポーネント固有のテキスト スタイルのコレクション。
    • Elevation - Material Design の 24 影のセット。
    • Illustrations - デザインをより遊び心のあり完璧なものにする 17 種類のカスタマイズ可能なイラスト。

    その他のリソース

    関連トピック:

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