すぐに始めてみましょう！
UXHubには「Fixel Design System」という汎用的なデザインシステムが予め登録されているので、ユーザーアカウント取得後すぐにデザインシステムを利用することが可能です。以下のステップですぐに始めてみましょう！
ユーザーアカウントの作成
ログイン画面の「新規会員登録」より新規アカウントを作成します。
ご登録いただいたメールアドレス宛にアカウント登録用のURLが届きます。 ※システムより即時送信されます。
アカウント新規作成ページで必要な情報を登録してアカウントを作成すると、UXHubの利用を開始できます。
デザインシステムの作成
UXHubには「Fixel Design System」という汎用的なデザインシステムが予め登録されています。
まっさらな状態から作成することも可能ですが、このFixel Design Systemを「複製」し、自分の目的に合ったデザインシステムにカスタマイズしていくことがもっとも手軽な方法です。
デザインシステムのカスタマイズ
テンプレートから作成したデザインシステムには以下のコンテンツが含まれています。デザインシステムの目的に合わせて各コンテンツを編集します。
概要ページ
目的に合わせてデザインシステムの紹介文を編集します。
デザインガイドライン
汎用的な内容で記載されています。目的に合わせて編集します。
デザイントークン
必要なスタイルを実現するためにデザイントークンを編集します。デザインガイドラインの記載内容との一貫性を考慮し、デザインガイドラインも編集します。
UIコンポーネント
テンプレートから過不足なUIコンポーネントがある場合、新しいコンポーネントを追加または既存のものを複製して編集します。デザイントークの編集によって異なるスタイルが適用されたかを確認します。
テンプレート
画面のレイアウトとして追加が必要なものがあれば、作成・格納します。
サンプルページ
サンプルの実装画面でデザイン変更が正しく適用されたかを確認します。必要に応じて追加のサンプル画面を作成します。
プロジェクトにインポート
デザインシステムのカスタマイズが終わると、UXHubのアセットダウンロード機能を使って、変更が適用されたCSSとUIコンポーネントのファイルを入手します。同ファイルをプロダクトのコードが格納されたプロジェクトにインポートすることでデザインシステムのスタイルとコードが利用可能になります。
デザインシステムの運用
プロダクトの運用中、機能追加や変更などの要件があった場合はUXHubでデザインの変更やUIコンポーネントの追加など、必要な修正を行います。その後はUXHubから新しくなったCSSとUIコンポーネントファイルをダウンロードして再度プロダクトのプロジェクトにインポートします。既存のUXHubからのコードを上書きすることで新しいデザインが適用されることになります。