Breadcrumb
ページの上部、または上下に配置され、階層内の現在の場所を表示します。選択した項目の階層の上位の状態に戻ることができます。Properties(振る舞いの設定)Component Propertiesで設定されている内容。カラートークンStateToken
ページの上部、または上下に配置され、階層内の現在の場所を表示します。選択した項目の階層の上位の状態に戻ることができます。Properties(振る舞いの設定)Component Propertiesで設定されている内容。カラートークンStateToken
Paperは、ページにおける大きな情報のまとまりをグルーピングするための表示領域です。機能や情報の位置付けが大きく変わる場合にはPaperを分けてグルーピングしてください。※グルーピングするためのPaperは柔軟性を保つためにインスタンス化していません。コピーしてご使用ください。De
さまざまな要素を視覚的・意味的にグルーピングするために使用されます。要素をより整理し読みやすくするのに役立ちます。 Variables (色の設定)Primary Color, Neutral Color, それぞれに背景に色が付いている際に使用するStatic Colorが
Linkをクリックする事で他ページへの遷移、ページ内での遷移、ファイルやメールアドレス、電話番号へのアクセス等が行われます。Properties (振る舞いの設定)Component Propertiesで設定されている内容。必要に応じてアイコンを表示する事ができます。
Headerなどに配置するLogoのダミーデータです。配置要素に合わせて拡縮する「Sample-Scale」、配置要素の拡縮に左右されない固定サイズの「Sample-Fix」、具体的なロゴイメージを排除した「Placeholder」の3つを用意しています。Variables (色の設
アイコンを配置する際には「Icon Scale」を使うようにします。アイコンとテキストを並べる際は、できるだけそれぞれが同じサイズに見えるように設定してください。FDSで使用している以外のアイコンを使う場合はGoogle Fontsから検索・導入するかFigma Community
Buttonはユーザーに処理(アクション)をさせるために使用する要素です。選択すると、対応するビジネスロジックが作動します。FDSでは以下の3タイプのボタンを用意しています。Containedメインアクションに使用します。1つのセクションに最大で1つのContained Buttonを
Body Textに使用するColor Tokensです。本文のデフォルトカラー、意味のある箇所にアサインするロールカラーを定義しています。Variables (色の設定)各ステート時の配色はこちらを参考にしてください。StyleTokenDefaultG
ユーザーがアカウント関連機能にアクセスして管理できるようにするためのUIです。通常Popup Menuと併せて使用します。Properties(振る舞いの設定)Component Propertiesで設定されている内容。Variables(色の設定)