UXHubの使い方

FigmaのStyleをインポート

Figma用の「UXHub – Design Tokens」Pluginを通してFigmaで定義したStylesをUXHubにデザイントークンとしてインポートできます。

Fixel Design System(以後、FDS)の命名規則や色のルールに沿ってPluginの動作は想定されていますが、Stylesのその他のフォルダー構成にも対応できています。

以下、基本インポートの手順を説明します。

インポート手順

①「UXHub – Design Tokens」のFigma Plugin

「UXHub – Design Tokens」プラグインのzipファイルを、以下からダウンロードしてください。

②Pluginのインストール

FigmaのCommunityにはまだ公開されていないため、「開発中」のPluginとしてインストールする必要があります。
※古いプラグインをFigma上に入れている場合は、先に削除を行なってください。

  1. まずは上でダウンロードしたzipファイルをローカルのフォルダーに展開します。
  2. 次にFigmaのメニューの、Plugins/Development/Import plugin from manifest… を選択し、解凍したzipファイルの中にあるmanifestファイルを選択します。

③Figmaファイル上でPluginを開く

Pluginをインストールすると、Plugins/Developmentから「UXHub – Design Tokens」が起動できます。

本Pluginで Local Styles を読み込み・編集するには、Local Stylesを「Design Tokens」フォルダー配下に適切に配置するなどいくつかのルールがあります。

FDSのFigmaファイルなら、このルールに沿って構成されているため、Pluginに正しく読み込むことができます。これを元に Local Styles を編集していきましょう

④トークンのエクスポート をクリックし、.jsonファイルを書き出す

スタイルの変更が終わったら「トークンのエクスポート」でトークン(.jsonファイル)をダウンロードします。

⑤UXHubのFigma連携を開く

  1. UXHubの中で、デザイントークンをインポートしたいデザインシステムを開きます。
  2. サイドメニューの下にある「Figma連携」ボタンをクリックし、ダウンロードした.jsonファイルをドラッグ&ドロップ、もしくは「ファイルを選択」ボタンをクリックして選びます。

⑥デザイントークンをインポートする

.jsonファイルを読み込んだら、デザイントークンを選択、「読み込む」ボタンを押すとデザイントークンがインポートされます。

⑦変更内容の確認

Figmaでの変更内容に応じて、UXHubの該当箇所に移動して変更が適切に反映されたかを確認してください。

おすすめの記事

TOP