Figma から WordPress へのデザイン システム トークンのエクスポート

サイトまたは一連のサイトを大規模に実行する際の主な課題の 1 つは、デザインの一貫性とデザイン システムへの準拠を確保することです。 多くの場合、デザイン システムの定義は Figma にありますが、手動でコードに実装されています。 開発途中でのシステム変更や、リテミングでの大規模な入れ替えなどがあると、定義と実装がずれてしまいます。

この課題を解決するために、Figma のデザイン システムを WordPress テーマと同期させるツールを作成しました。 私たち自身のサイト wpvip.com でこれを使用しており、一貫性を確保しながらこのプロセスを大幅に簡素化できることがわかりました。

私たちの目標は、設計システムの真の唯一の情報源を持ち、設計と実装の間に断絶がないようにすることです。 Figma Tokens プラグインを利用することで、この単一の信頼できる情報源を作成し、すべてのデザイン トークンをバージョン管理システムに保持し、テーマ コードでデザイン システムの更新を自動化します。

プロセスは次のように機能します。

1. デザイン システムは Figma ドキュメントで定義されています。
2. Figma Tokens プラグインを使用して、Figma で使用されるデザイン トークンを定義します。
3. Figma Token の GitHub ストレージを使用して、トークンをリポジトリにエクスポートします。
4. vip-design-system-bridge ツールを使用して、theme.json カスタム セクションを介してデザイン トークンを WordPress に挿入します。
5. コードと CSS では、WordPress で生成された –-wp–custom クラスを使用してデザイン トークンを参照します。

これにより、デザイン システムの変更やテーマの変更を簡単にコードに反映できます。 Figma で変更が行われると、Figma トークンと同期され、vip-design-system-bridge ツールが実行されます。 その後、他のコードや CSS を変更することなく、テーマの構成でデザイン トークンが更新されます。

Figma から WordPress へのプロセスを示すために、サンプル デザイン システムとテーマをまとめました。 この投稿では、次の手順について説明します。

1. サンプル デザイン システムのコピーを作成します。
2. Figma Tokens プラグインを使用して、デザイン トークンを追加します。
3. Figma でカラー トークンを変更し、新しいデザイン トークンをエクスポートします。
4. VIP のローカル環境マネージャーを使用して WordPress のローカル コピーを実行し、サンプルの WordPress テーマを表示します。
5. vip-design-system-bridge ツールを使用して、WordPress テーマを新しいデザイン トークンで更新します。

これらのリソースも、開始するのに役立ちます。

• Material 3 Design Kit テンプレートに基づく Figma のシンプルなデザイン ドキュメント システム。
• Figma Tokens との統合に使用されるデザイン トークンのセット。
• デザイン システムによって提供される色とタイポグラフィを使用するように構成された WordPress テーマの例。

Figma トークンを設定する

Figma のデザイン システムを使用し、デザイン トークンをエクスポートするデザイナー ワークフローから始めます。

Figma Tokens をインストールするには、Figma にログインして Figma Tokens プラグイン ページにアクセスします。 右上隅にある「試してみる」ボタンをクリックします。 次のページで、「実行」ボタンをクリックします。 インストールが完了すると、プラグインは Figma ドキュメントで使用できるようになります。

1. デザイン システムのコピーを入手する

この例では、Material 3 Design Kit テンプレートに基づいた Figma の小さなデザイン システムを使用します。

1. サンプルの Figma デザイン システムを開きます。 Figma Tokens プラグインで使用するために、このドキュメントのローカル コピーを作成します。

2. ドキュメント タイトルの右側にある下向き矢印をクリックし、[下書きに複製] を選択します。

3. ページ下部のポップアップで、[開く] ボタンをクリックします。

2. Figmaトークンをデザイントークンに接続

Figma トークンを使用してデザイン システム ドキュメントにインポートする準備ができているデザイン トークンのセットを作成しました。 これらのデザイン トークンは、Figma Tokens プラグインを使用して Figma で直接作成されました。 Figma Tokens プラグインを既存のデザイン トークンに接続する方法は次のとおりです。

1. 前の手順の Figma ドキュメントを開きます。 ページの左上にあるメイン メニュー ボタンをクリックし、[プラグイン] -> [Figma トークン] を選択します。

2. Figma Tokens が起動したら、「Get Started」ボタンを選択します。 次のページに空のトークンのセットが表示されます。

3. プラグインの上部にある [設定] タブをクリックします。 「Token Storage」セクションで、「URL」ボタンをクリックします。

「新しい資格情報の追加」ボタンをクリックします。 「名前」フィールドに任意の名前を入力します (例: トークンの例)。 URL ボックスに、次の URL を入力します。

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. 結果は次のようになります。

5. [トークン ストレージ] の下で、[ローカル ドキュメント] ボタンをクリックします。 確認のポップアップで、[はい、ローカルに設定します] をクリックします。

6. Figma トークンの小さなバグにより、URL からインポートされたトークンを編集できるようにするには、ページを更新する必要があります。 実際の設計プロセスでは、GitHub トークン ストレージ オプションを介してトークンを同期できることに注意してください。この手順は、このチュートリアルの例でのみ必要です。

• トークン ストレージ オプションを「ローカル ドキュメント」に変更した後、ページをリロードします。
• プラグイン メニューから Figma Tokens を再度開きます。

7. Figma トークンで、「トークン」タブに移動して、すべてのトークンを表示します。 左側のチェックボックスを使用して、「global」、「material-3-color」、および「material-3-text」トークン セットを選択します。 メイン パネルでタイプとカラー デザインのトークンを表示できるようになりました。

「グローバル」セットは、デザイン システムで使用できるフル カラー パレットとタイポグラフィ オプションを表します。 「material-3-color」セットには、「theme/light/primary」や「theme/light/background」など、デザイン システムで使用される名前付きのデザイン トークン カラーが含まれています。 「material-3-text」には、デザイン システムで使用されるタイポグラフィ オプションが含まれています。

注: このチュートリアルでは、セットアップを簡素化するために URL トークン ストレージを使用します。 実際のデザイン システム ドキュメントでは、「GitHub」や「GitLab」などのバージョン管理されたトークン ストレージ システムを代わりに使用する必要があります。 これらにより、トークンを直接引き出して、Figma からリポジトリに公開できます。

3.デザイントークンを変更してエクスポート

このセクションでは、背景のデザイン トークンを新しい値に変更し、更新されたトークン ファイルをデザイン システムで使用するためにエクスポートする方法について説明します。

1. Figma Tokensで、「material-3-color」カラーセットをクリックします。 次に、「Light Theme」セクションの下の Figma ドキュメントで、「Background」ブロックを選択し、一致するデザイン トークンが Figma Tokens で選択されていることを確認します。

2. Figma トークンで、背景色のトークンを右クリックし、[トークンの編集] を選択します。 値を {color.error.70} (または選択した別のパレット カラー トークン) に変更し、[更新] をクリックします。

上に示すように、選択した背景色のブロックは、新しい色のトークンに一致するように変更する必要があります。

3. Figma Tokens プラグインの右下にある [エクスポート] をクリックします。 「すべてのトークン セット」にチェックを入れて、ダイアログの下部に移動し、「エクスポート」ボタンをクリックします。

注: 「GitHub」などのバージョン管理されたトークン ストレージ システムを使用する場合、トークンの変更は、ブラウザ経由でダウンロードする代わりに、リポジトリ ブランチに直接プッシュできます。

WordPress の設定ツール

次の 2 つの手順では、Figma からエクスポートされたデザイン トークンを使用して、ローカルで実行されている WordPress テーマを更新します。 これらのツールを使用するには、GitHub、ターミナル コマンドの実行、および npm に関するある程度の経験が必要です。 次のツールを使用してフォローします。
vip-design-system-bridge リポジトリのコピーをダウンロードまたは複製します。 WordPress VIP のお客様は、トークン テーマ テーマのコピーが含まれている既存の WordPress コードを直接使用することもできます。

1. WordPress のコピーを実行し、トークンの変更を確認するために使用される vip dev-env ターミナル ツールをインストールします。

 $ npm install -g @automattic/vip

注: vip dev-env の前提条件として、Node.js と Docker Desktop をインストールする必要がある場合もあります。 詳細については、このドキュメント ページの前提条件セクションを参照してください。

4. WordPress のローカル コピーを実行する

デザイン トークンの更新を確認するには、npm と vip dev-env を使用して WordPress のローカル コピーを実行します。 VIP CLI がインストールされ、vip-design-system-bridge リポジトリのコピーがローカルにダウンロードされていることを確認します。

1. vip-design-system-bridge リポジトリ フォルダーをローカルにダウンロードした状態で、次のコマンドを実行して、ローカルの WordPress Web サイトを作成します。

 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

2. インストールが完了したら、このコマンドを実行して環境を開始します。

 vip dev-env start --slug=token-site

結果は次のようになります。

3. 次に、次のコマンドを実行してトークン テーマを有効にします。

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

WordPress のローカル バージョンは、トークン テーマが有効になっている状態で実行されているはずです。

4. http://token-site.vipdev.lndo.site/ でローカルに実行されている WordPress インスタンスにアクセスします。 シンプルな Material 3 UI テーマを使用した WordPress ページが表示されます。

5. トークンを使用して WordPress テーマを更新する

デフォルトのテーマが表示されたので、テーマをその場で更新し、トークンの変更の結果を表示できます。

ターミナルでダウンロードした vip-design-system-bridge リポジトリに移動し、トークン処理スクリプトの npm 依存関係をインストールします。

 cd vip-design-system-bridge/ npm install

次に、次のコマンドを実行します。 手順 3 でダウンロードした tokens.json のパスと一致するように –tokenPath を更新します。

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

このコマンドで使用されるフラグの内訳は次のとおりです。

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

上記のコマンドを実行すると、次の出力が生成されます。

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

WordPress でトークンが更新されたので、http://token-site.vipdev.lndo.site/ にアクセスするか、ページを更新します。 背景色が Figma で割り当てられたトークン値に変更されたことがわかります。

結論は

デザインシステムの信頼できる唯一の情報源を作成し、それらを WordPress テーマにプッシュするためのエンドツーエンドのプロセスを示しました。 ただし、Figma Tokens のトークンを作成するプロセスや、それらのトークンを利用できる WordPress ブロック テーマの設計など、この記事では取り上げていない重要で複雑なトピックがあります。

とはいえ、WordPress でのデザイン システムの実装に取り​​組んでいる人にとって、これが有用なプロセスを提供し、サンプル コードが出発点として使用できることを願っています。

関連する設計システムのトピックについては、次のリソースを参照してください。

Figma Tokens プラグイン – はじめに。

著者

Automattic のシニア ソフトウェア開発者、Alec Geatches 氏

エンタープライズ WordPress 開発者であり、台湾の台北に住むデザイン システム愛好家です。

Automattic のシニア ソフトウェア開発者、Gopal Krishnan 氏

Gopal は、デザイン システムと Gutenberg に関心を持ち、WordPress VIP の分離された WordPress サービスに取り組んでいます。 彼はオーストラリアのシドニーを拠点とし、最近カナダから引っ越してきました。