ワークスペースを作成
「表示するワークスペース」のプルダウンを選択後、「新規ワークスペース」を選択します。※複数ワークスペースを所有するためには上位プランの利用が必要です。①ワークスペース名ワークスペースの名称を入力してください。②サムネイルサムネイル画像をアップロードしてください。後から設定するこ
「表示するワークスペース」のプルダウンを選択後、「新規ワークスペース」を選択します。※複数ワークスペースを所有するためには上位プランの利用が必要です。①ワークスペース名ワークスペースの名称を入力してください。②サムネイルサムネイル画像をアップロードしてください。後から設定するこ
設定画面ではワークスペースの名称・画面サイズなど基本的な設定を行うことができます。ワークスペースの基本情報設定①ワークスペース名ワークスペースの名称を変更することができます。②サムネイルデザインシステム一覧に表示する、ワークスペースのサムネイルを設定できます。③ヘッダーロゴ左上の
削除ワークスペースの設定画面の最下部からワークスペースを削除することができます。※複数ワークスペースを所有できる上位プランのみが削除可能です。※ワークスペースを削除すると、ワークスペース内のデザインシステムもすべて削除されるため注意してください。
デザインシステムの作成パターン新しくデザインシステムを作成する3つの方法を紹介します。①ワークスペース内に新規作成ワークスペースを指定してデザインシステムを新規作成します。空の状態のデザインシステムを作ることができます。※最大３つまでのデザインシステムを作成することができま
デザインシステムの設定は「基本情報」「テーマ」「権限」の3つの項目に分かれており、それぞれの項目で設定を行うことができます。基本情報①デザインシステムIDデザインシステムを新規作成、または複製した際に設定したデザインシステムIDを表示します。 ※デザインシステムIDは変更することができ
UXHubに登録したCSS、JavaScript、画像ファイル、React、Vue2、Vue3、AngularのコードはアセットダウンロードからZIPファイルでダウンロードすることができます。 ダウンロードしたZIPファイルを解凍して、そのフォルダ構成のまま開発中のプロジェクトフォルダに配置してプ
新規作成①ページの追加親階層［…］または小階層［…］押下し、ドキュメントを追加する箇所を選択します。②ドキュメントを選択出現したモーダルからドキュメントを選択し［作成］します。作成エディターが表示されるので、記入していきます。追加できるブロック機能は左から、
バージョン管理デザインシステム全体の内容を保存してバージョン管理ができます。 バージョンの追加や、保存した過去のバージョンに切り替えて見ることができます。 過去のバージョンは、編集することができません。①バージョン化ボタン現在の最新の状態をバージョン名をつけてバージョンを作成します。
サイドメニューの編集方法①名称の変更メニュー上の名称を変更することができます。②同階層に追加選択しているメニュー上の項目と同階層にページを追加することができます。③子階層に追加選択しているメニュー上の項目と子階層にページを追加することができます。④削除メニュー上の項目からペ
FDSを使ったデザインプロセス①色やフォントをカスタマイズする -- Design Tokensを定義する基本的なTokensはあらかじめ用意されておりFigma Stylesに登録されていますが、プロダクトに使用するカラーパレットやフォントを決めてFDSのDesign Tokens(Fig
主な機能Figmaで定義されているStylesの読み込み、編集画面デザイン、 コンポーネントを見ながら色を調整することができます。自動生成・自動登録Primary Mainさえ指定すれば必要な色を必要なスケールで自動生成し、Stylesにも登録してくれます。Secondaryは9
UXHubではプラグインを通して、Figmaで定義したカラーなどをUXHubにデザイントークンとしてインポートすることができます。注意点や手順を下記にて説明します。利用上の注意旧プラグイン（UXHub Plugin）との互換性旧プラグイン（UXHub Design Token
コンポーネントフォルダは子階層に複数のコンポーネントを持ち、配下にあるコンポーネントを一覧で表示したり、検索したりすることができます。新規作成①ページ作成親階層［…］または小階層［…］押下し、ドキュメントを追加する箇所を選択します。②コンポーネントフォルダを選択出現し
UIコンポーネントサイドメニューの「…」からコンポーネントの作成が可能です。 デザインシステムで使用可能な「UIコンポーネント」を作成できます。UIコンポーネントの構成コンポーネントはコンポーネントフォルダの子階層にのみ作成できます。UIコンポーネントは次の内容で構成されて
HTML+JSHTMLコンポーネントのHTMLコードを登録します。JSコンポーネントのJavaScriptコードを登録します。すべてのコンポーネントで共通で呼び出すことができるグローバルなコードになります。Tips 重複コード 他のコンポーネントで同名の関
セレクタとプロパティの追加、削除①セレクタ追加（一番下に追加）セレクタを一番下に追加します。②セレクタ追加と削除「＋」ボタンで、押下したボタンのすぐ下に新しいセレクタを挿入して追加します。 「ー」ボタンで、押下したボタンの行のセレクタを削除します。③プロパティの追
ドキュメントこのコンポーネントの使い方やガイドラインを記述します。①テキストブロックタイトルドキュメントのテキストブロックのタイトル（見出し）を記載します。 タイトルは省略可能です。②テキストブロック本文ドキュメントのテキストブロックの本文を記載します。③
レイアウトフォルダは子階層に複数のレイアウトを持ち、配下にあるコンポーネントを一覧で表示したり、検索したりすることができます。新規作成①ページ作成親階層［…］または小階層［…］押下し、レイアウトフォルダを追加する箇所を選択します。②レイアウトフォルダを選択出現
画面サイズ設定画面サイズのプルダウンを選択すると、指定した画面サイズ以下に適用するCSSのスタイルを登録できます。 画面サイズに応じたスタイルを設定することでレスポンシブ対応を行うことが可能です。 この設定はメディアクエリとして動作し、@media screen and (max-wi
アイコン作成などにマテリアルアイコンを利用するためのHTMLタグとCSSクラスがそのまま使えます。なお、Material SymbolsとMaterial Iconの両方とも対応しています。
デザインシステムのコンポーネントで共通で使用するプロパティの値やプロパティのセットをデザイントークンと呼びます。 とくにプロパティの値に変数名をつけて管理するデザイントークンを「デザイントークン（単一値）」と呼びます。新規作成ページの追加親階層［…］または小階層［…］押下し、ドキュメ
新規作成デザインシステムのコンポーネントで共通で使用するプロパティの値やプロパティのセットをデザイントークンと呼びます。 とくにプロパティとその値の組み合わせを複数セットにして名前をつけたものをデザイントークン（複合値）と呼びます。デザイントークン（複合値）の名前には一般的にCSSのクラス名をつけ
テーブルの行にマウスカーソルを当てると、「＋」「＝」「×」のボタンが表示されます。①追加「＋」ボタンで下に行を追加しますデザイントークンの名前、変数名、種類、値、説明を入力できます。 名前と説明の登録は任意です。②削除「×」ボタンで行を削除できます。③順序入れ替え「＝
Background Imageは一括登録が可能です。登録したい画像ファイルを複数選択すると、一括登録画面が開きます。名前と変数名はファイル名から自動で設定されます。必要に応じて編集して登録ボタンを押すと、デザイントークンの行にまとめて追加されます。
課題提起各ページに対して課題を登録して、デザインシステムを作成しているメンバーとやり取りを行うことができます。課題は以下の2つの入り口から作成します。ワークスペースを選択してから作成課題一覧から作成課題の作成ワークスペースから作成ワークスペースかを選択し、①［課題］ボタンを
課題一覧①課題一覧ログインユーザーが確認できるすべての課題の一覧画面に遷移します。②課題一覧ログインユーザーが権限を持っているデザインシステムの課題を一覧形式で表示します。 複数のワークスペースに所属している場合は、ワークスペースをまたいですべてのデザインシステムの課題が
課題一覧からコメント時ワークスペースからコメント時①コメント入力表示中の課題に対するコメントを入力します②コメント表示入力して送信したコメントが表示されます。後から編集、削除も可能です。
課題詳細①削除課題の削除を行いたい場合は［…］から行います②編集課題の編集を行います。③ステータス［解決済み］［未解決］の課題のステータスを変更できます。④大画面表示ワークスペースから課題を選択した際に表示されるアイコンで、押下すると一番上の画像のような1ペ
ワークスペースにユーザーを招待して、複数人でデザインシステムを管理することができます。ワークスペースにユーザーを招待するには、「ユーザーを招待」ボタンを押します。UXHubに登録済みのユーザーを招待するUXHubにアカウントを持っている人を招待する場合は、アカウントID、ニ
ワークスペースの管理者は管理画面からワークスペースに所属している他のユーザーの設定を変更することができます。①ワークスペースの権限変更ワークスペースに対する権限を設定できます。②ワークスペースからの削除ワークスペースの所属から外したい場合は、ここから削除することができます。※ワーク
ワークスペースで作成したチームを設定することでチームに所属するユーザーにまとめてデザインシステムの権限を与えることができます。デザインシステムの権限をチーム単位で管理することができます。設定をデザインシステムを選択し、設定画面を開きます。「権限」の項目から「チームを追加」を選
ワークスペースにチームの設定するワークスペース情報を開き、チームタブを選択してメンバーを追加します。※ワークスペースに招待済みのメンバーだけがデザインシステムへの招待が可能です。「チームを作成」ボタンからチームを新規作成することができます。チーム名とチームに所属す
ログイン方法アカウント発行時にご登録いただいたアカウントIDとパスワードを入力してログインします。※アカウントIDまたはパスワードを忘れてしまった場合は、以下よりアカウントIDの確認とパスワードの再設定が可能です。アカウントIDを忘れた方はこちら パスワードを忘れた方はこちらログ
アカウント設定の参照ヘッダー右端にあるユーザー名をクリックするとメニューが表示されます。「設定・プラン情報」をクリックしてください。基本情報タブではメールアドレス、氏名、パスワード等を変更できます。①アカウント削除アカウントを削除します。削除操作は元に戻
Englishもしくは日本語を選択することが可能です。ヘッダー右端のユーザー名をクリックすると、言語選択が表示されます。ラジオボタンを切り替えると画面全体の言語設定が切り替わります。