UXHubには作業の参考になるように、Fixel株式会社が開発したデザインシステム「Fixel Design System」（通称、FDS）を提供しています。このデザインシステムには日本の一般的な業務システムで必要となるUIコンポーネントやページレイアウトがあらかじめ用意されています。
Fixel Design Systemをベースに作成するアプリケーションの特徴にあわせ、ガイドラインやUIコンポーネントを追加・修正することにより、効率的にデザイン＆開発を行うことができます。
Fixel Design Systemの活用方法
他の製品・サービスに対するデザインシステムが必要となった場合は、スクラッチから作成する方法もありますが、このデザインシステムが対象としているサービスと類似なサービス・製品が対象である場合は、新しいデザインシステムをスクラッチから作るのではなく、このデザインシステムを複製してデザイントークン（スタイル変数）を修正することでより手軽に新しいデザインシステムを作成することができます
Fixel Design Systemの構成
本デザインシステムの各要素はサイドメニューのフォルダ単位で構成されており、各フォルダの意味は下記の通りです。（サイドメニューの構成は必要に応じて追加・変更ができます。）
1. ガイドライン
デザインシステム全般に関する情報と、各要素に対する説明をしたガイドラインを格納します
2. デザイントークン
デザイントークンはビジュアルデザインにおける基本的な要素です。「スタイル変数」と捉えることもできます。後述するアトミックデザインのアトムを定義する際に使われるビジュアル要素と考えることができます本デザインシステムを複製して新しいデザインシステムを作る際には、デザイントークンを変更することで新しいテーマを持つデザインシステムにすることができます
3. UIコンポーネント
画面の作成に必要な画面要素をデザインとコードを一つのペアとして一緒に定義しています
4. テンプレート
ページレイアウトの枠組みとなるテンプレートです。作成する画面の内容にあったものを選択して適用してください
5. ページ
画面サンプルとして、UIコンポーネントやテンプレートを組み合わせて作成してあります。このサンプルを元に画面展開することができます