UXHubの基本機能

デザインシステムの構築

UXHubの基本機能デザインシステムの構築編

UXHubには作業の参考になるように、Fixel株式会社が開発したデザインシステム「Fixel Design System」（通称、FDS）を提供しています。このデザインシステムには日本の一般的な業務システムで必要となるUIコンポーネントやページレイアウトがあらかじめ用意されています。Fi

デザインシステムを選択したあとで最初に表示されるページです。該当するデザインシステムに関して、基本的な説明や情報を記載します。ページの上部に「カバー画像」を設定することができます。タイトルの「概要」は変更が可能です。バージョンを指定すると概要ページの下段にバージョン番号が

デザイントークンを定義します。UXHubでは、デザイントークンを単一値と複合値で管理することができます。デザイントークン（単一値）デザインのビジュアルなスタイルを決める色、フォント、アイコン、画像、余白の定義など、多様なスタイル要素とそのプロパティ値を定義します。定義したスタイルの

様々なコンポーネントをプレビューとコードのセットで作成、管理できます。コードはHTML+JS、Pug、React、Vue2、Vue3、Angularの6つのフレームワークの実装を登録できます。HTML、CSS、Javascript、Pug、React、Vue2、Vue3、Angular のコードを

レイアウトはアトミックデザインのテンプレートを登録します。ヘッダー、フッター、サイドエリアなどの配置など、ページで共通のレイアウトを抽出して登録します。コードはHTML+JS、Pug、React、Vue2、Vue3、Angularの6つのフレームワークの実装を登録できます。HTML、CSS、Ja

「コンポーネント」で作成したUIコンポーネントを使ったページのサンプル画面を作成できます。プレビュー用のサンプル画面は、HTML、CSS、JavaScriptで記述します。画面サイズ設定で各デバイスの画面サイズに応じた表示を確認することができます。レスポンシブ対応の表示も確認できます。

デザインガイドラインを含め、多様なデザインシステムの文書を書くためのフォーマットです。デザインシステムの使用に関する多様な文書を画像やテーブル、コードなどを交えながら自由に記述できます。テキストエディタを使用し、テキストの装飾ができ、テキスト、画像ファイル、添付ファイル、テーブル、罫線のブロックも

Figmaで作成したデザインシステムを「UXHub – Design Tokens」Pluginを使用してUXHubにデザイントークンとしてインポートすることができます。このトークンには、カラー、タイポグラフィ、スペーシングなどが含まれており、Pluginを使用することで簡単にデザインを調

UXHubの基本操作デザインシステムの管理編

ワークスペースとはUXHubで作業をするメンバーの共有スペースです。ワークスペースでデザインシステムを管理することができ、ワークスペースにメンバーを招待することで、コラボレーションや情報共有が簡単になります。メンバーはワークスペース中でデザインシステムを作成、編集することができます。

デザインシステムの権限をチーム単位で管理することができます。チームを作成することで、チームに所属するユーザーにまとめてワークスペースとデザインシステムの権限を与えることができます。

UXHubで作成したデザインシステムに含まれるHTML/CSS、JavaScript、画像ファイル、React、Vue.jsなどのコードは、UXHubのアセットダウンロード画面からZIPファイルでローカル環境にダウンロードすることができます。このZIPファイルには、フォルダ構成が維持させる

複数のアクセスが同時に発生してもデータの整合性を保ち問題なく動作できるよう制御しています。強制的に編集を行うこともできます。この際、他ユーザーによるこのコンテンツへの保存されていない編集内容は失われます。

デザインシステム全体の内容を保存し、バージョン管理ができます。過去のバージョンを保存したり、追加することができ、必要に応じて切り替えて閲覧することができます。

各ページの更新履歴を遡って見ることができます。履歴一覧には編集者と編集日時が表示されています。履歴をクリックするとその時点の状態を確認することができます。

各ページに対して課題を登録して、デザインシステムを作成しているメンバーとコミュニケーションを行うことができます。デザイン、コードの修正や改善案を共有することができるため、コミュニケーションを円滑にすることができます。デザインシステムに権限を持っているメンバーに対してメンションを送ることができます。

UXHubでは、ワークスペース、チーム、デザインシステムごとにユーザーの権限を管理することができます。それぞれの権限を紹介します。ワークスペースのユーザー権限オーナー管理者編集者閲覧者設定変更○○閲覧のみ閲覧のみユーザー管理○○閲覧のみ閲覧のみワークスペースの削除○○--チーム管理

TOP