FDS for Figma

Slot

Slot ComponentとはInstanceを入れる事のできる箱のようなものです。FDSでは、このSlot Componentを使う事で高速なモックアップ制作や汎用的なコンポーネントの使用を可能にしています。特徴 - （ 1 ）SlotはSpacingおよび縦組・横組の定義を持って

Section

ページにおける大きな情報のまとまりの、数・配置を決めるアイテムです。Sectionは情報のまとまりの箱となるContainerで構成されています。レイアウトの骨格となるため、コンテンツの構造化と整理に役立つ重要な要素です。関連する情報がまとまって表示されることで、ユーザーはコンテンツの構造を理解し

Template

画面構成の土台となるアイテムです。PC/SPのデバイスに合わせたTemplateを用意しています。TemplateはDrawer Menuの有無や種類、PC版コンテンツエリアのSetionタイプ（Containerの配置方法）を選ぶことができます。使い方画面を作成する際

Effects

Drop ShadowZ軸に沿ったコンポーネント間の距離を表現します。現実世界にあるオブジェクトのように影を落とすことで、ユーザーはオブジェクト同志の位置関係を理解し、直感的に操作できるようになります。後ろにあるものは影が短く、手前にあるものの方が影が長くなります。図に掲載しているコンポーネン

Font Family, Scale

Fontは読みやすさを確保するだけでなく、情報階層の明確化、重要なコンテンツの伝達、ブランドの表現に役立ちます。FDSでは幅広い使用例をサポートするためにより明瞭な印象を与える「BIZ UDPGothic」を使用しています。このFontはWindowsで標準で搭載されており、Macもダウンロードす

Color Theme

FDS - Design Tokens Pluginを使ってColor Tokensの編集を行い、カラーテーマを設計する事ができます。プラグインのインストールFDS - Design Tokens Pluginを使ったカラーテーマの設計一括設定Primary ColorをDrop

Variables

FDSでは色とサイズの定義をVariablesで行っています。構成（Collections）Alias ColorMainやLight、HoveredやSelectedといった主な役割を想定した色を定義しています。ハードコードした値ではなくGlobal Tokenを参照していま

Snackbar

ユーザーにメッセージや通知を表示するためのUIコンポーネントです。Snackbarは、画面の一部に一時的に表示され、一定の時間が経過すると自動的に消えることが一般的です。Snackbarは、アクションの完了や状態の変化、エラーメッセージの表示など、さまざまな目的で使用されます。通常、画面の

Notification

Notificationは、ユーザーに情報を伝えるためのメッセージ・通知のことです。ユーザーの行った操作へのフィードバックの他、システムからのお知らせ・通知・障害なども表示できます。背景にはOverlayが入ります。表示中は背景画面の操作ができずユーザーが能動的に消す必要があり、Alertよりも強

Loading

ページまたはセクションの読み込み状態を表示します。ページの一部が非同期データを待機しているとき、またはレンダリングプロセス中に、この読み込みアニメーションを使う事でユーザーの不安を効果的に軽減できます。使用時の注意ページ全体、もしくは一部、またアクションに対する処理が読み込み中など場合に合