DXブログ
WorkWithPlusDSのデザイントークンの使い方
目次
・はじめに
・デザインシステムのトークンとは
・トークンの基本的な使い方
・トークンの活用例
・Tips
・おわりに
はじめに
こんにちは!! GeneXus開発者の佐藤と酒井です。
今回のブログは、「WorkWithPlusDSのデザイントークンの使い方」です。
環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用
デザインシステムのトークンとは
🐦
佐藤
酒井さん、今回はデザインシステムのトークンについての説明ですよ！ まず、トークンとは何か知っていますか？
🐘
酒井
はいはい、少し調べてみました。トークンは、デザインシステム内で使用される視覚的な要素を抽象化したものだと理解しています。色やフォント、サイズなどの基本的なデザイン要素を表現するものですよね。
🐦
佐藤
その通りです。GeneXusのWorkWithPlusDSでは、トークンを使ってデザインの一貫性を保ちやすくしています。具体的には、色やタイポグラフィ、スペーシングなどの基本的なデザイン要素をトークンとして定義しています。
🐘
酒井
なるほど。では、これらのトークンを使うことで、どのようなメリットがあるのでしょうか？
🐦
佐藤
主なメリットは2つあります。
1.デザインの一貫性を保ちやすくなる
2.デザインの変更が容易になる
1.デザインの一貫性を保ちやすくなる
2.デザインの変更が容易になる
🐘
酒井
具体的にはどういうことですか？
🐦
佐藤
例えば、プライマリーカラーを変更したい場合、トークンを使っていれば、一箇所の変更で全体に反映させることができます。また、「メインの見出し」や「ボタンの余白」といった具体的な要素名でトークンを定義できるので、保守性が上がります。
トークンの基本的な使い方
🐘
酒井
なるほど！トークンの重要性がわかりました。では、実際にトークンを使う方法を教えていただけますか？
🐦
佐藤
いいですとも！GeneXusでのトークンの使い方を順を追って説明しますね。
1. WorkWithPlusDSオブジェクトを開く
🐘
酒井
WorkWithPlusDSオブジェクトは、カスタマイズ用のデザインシステムでしたよね。
🐦
佐藤
その通りです。GeneXus上のエクスプローラーから選択できます。では次に、「Tokens」タブを選択してみましょう。
2. 「Tokens」タブを選択
🐦
佐藤
ここで様々なトークンを定義できます。例えば、色のトークンを定義する場合は「Color」セクションで行います。 新しく追加したい場合は、「Add Token」をクリックしてトークンを追加できます。同様に、フォントサイズやスペーシングなども定義できます。
3. 実際のコンポーネントやスタイルで使用する
🐦
佐藤
実際に適用してみましょう。今回は、アプリケーションのボタンのカラーを変更してみます。まずは、「Tokens」タブの中に#colorを定義していきましょう。
🐘
酒井
直接記述することもできるんですね。
🐦
佐藤
できますよ。これが変更前の画面です。
4.WorkWithPlusDSオブジェクトの「Tokens」タブで、Colorのトークンを修正
🐦
佐藤
ここでは、「BaseColor」という名前のカラートークンの値を「#5CB85C」から「#1900ff」に変更します。この実装のまま変更を保存すると、このトークンを使用しているすべての箇所が自動的に更新されるため、 ユーザーがどの色を選択しても、上書きされてしまうことに注意してください。
🐦
佐藤
変更してみました。実行してみましょう。
🐦
佐藤
そうするとこれが。
🐦
佐藤
こう。
🐘
酒井
すごい！とても効率的ですね！トークンを使うことで、デザインの一貫性を保ちながら、効率的に変更ができるんですね。
🐦
佐藤
その通りです。これがトークンの大きな利点です。使ってみたくなりますよね。
Tips
・トークン名は明確で理解しやすいものにすると、保守性がアップ！
・カラーパレット、ブレークポイント、アニメーションの持続時間やイージングもトークンとして管理できる！
・カラーパレット、ブレークポイント、アニメーションの持続時間やイージングもトークンとして管理できる！
よろしければこちらもご参照ください！👇
参考ブログ
💡WorkWithPlusDSを用いたデザインの変更【基本編】
💡WorkWithPlusDSを用いたデザインの変更【応用編】
おわりに
今回は、GeneXusのデザインシステムにおけるトークンの使い方について解説しました。
トークンを効果的に活用することで、デザインの一貫性を保ちながら、効率的な開発が可能になります。
ぜひ、実際のプロジェクトでトークンを活用し、その便利さを体験してみてくださいね。
最後までお読みいただき、ありがとうございました！
GeneXus, ローコード開発 
