UXPin Mergeでテーマの切り替えを簡単に
テーマの 切り替え は、プロトタイプをデザインする上で欠かせません。
ライトモードとダークモードの切り替え、または1つのプロトタイプで複数のクライアント向けにテーマの変更テストでのプロセスなどは、全てのデザイナーが慎重に考える必要があります。
さらに、 Material-UI のようなオープンソースの デザインシステム が登場したことで、テーマ切り替え機能の重要性はますます高くなりました。
この機能によって、デザインシステムやレイアウトを複数使用することなく、その場でテーマを動的にテストできるようになりました。 これは驚くほど効率的で便利な機能です。
本記事では、「テーマ切り替え」機能の重要性について説明し、Mergeと コードでデザイン アプローチによって、UXPinでテーマ切り替え機能がどのように使えるのかを ご紹介していきます。
Mergeがデザインをどのようにレスポンシブにできるかは こちら をご覧ください。
実際にMergeの機能性を試してみたい方は こちら からアクセスしてください。
テーマ切り替え 機能が必要な理由
テーマ切り替え機能を利用するのは、ホワイトラベルのWebデザイン会社や複数のブランドを抱える大企業だけではなく、新しい配色を素早くテストするために使用する個人開発者もいます。しかし、テーマの切り替えは簡単ではありません。。
プロトタイプ一つをさまざまなテーマで複数のレイアウトにすることは避けたいですよね。
Material UIライブラリ を使って、この制限を説明します。Material UIにはすでにテーマがコンポーネントに組み込まれていますが、UXPin(その他プロトタイピングツール)には、開発者もデザイナーも使用できる、テーマをダイナミックに切り替える統一された方法がないのです。
Mergeテクノロジー – コードでデザイン
もうベクターベースのツールだけに制限される必要はありません。代わりに、UXPin Mergeを活用することで、どんなものでも自由に作成できます。
Mergeでは、「実際の」Reactコードとベクターベースのツールを使って自由にデザインできます。これが Mergeの大きな魅力です。
styled-components を利用してみましょう。styled-componentsは、CSSに Javascript を注入して編集可能なテーマ機能を作成できます。
そのため、テーマの作成は簡単です。
テーマごとにstyles-components に注入したい CSS 値をプロパティとして含むファイルを作成していきます。インポートされたテーマの一覧から好きなものを選ぶだけで、そのテーマのスタイリングが html要素にプロップとして渡されます。
そこで、必要なテーマごとにファイルを作成し、それらをラップするテーマ切り替え機能の styled-component にインポートして、入れ子になった各子コンポーネントにその値を渡すとしたらどうなるでしょう。
その場合、styled-components CSS に注入された Javascript propsを使って、トップレベルのコンポーネントでテーマを変更するだけです。
テーマ切り替え機能のコンポーネント構築
まず、トップレベルのラッパーコンポーネントとして機能し、選択したテーマのスタイルをネストしたすべてのコンポーネントに渡す『ThemeSwitcher』という名前のコンポーネントを作成します。
コンポーネントが ThemeSwitcher にネストされている場合、インポートされたテーマを動的に切り替えることができます。
コンポーネントの機能を全て維持しながら、完全にコンポーネントのルック&フィールを変更することができるテーマですね。
以下のコードは、簡略化された ThemeSwitcher の構造を示しています。 動作の詳細は後ほど説明します。
01
import blue from
"./themes/blue"
;
02
import red from
"./themes/red"
;
03
import dark from
"./themes/dark"
;
04
import light from
"./themes/light"
;
07
function
ThemeSwitcher(props) {
10
function
getTheme(themeProfile) {
11
switch
(themeProfile) {
17
function
makeCustomTheme() {
18
const customTheme = createMuiTheme({
25
<MuiThemeProvider theme={getTheme(props.themeProfile)}>
見ての通り、これはMaterial UIのインポートフックを使ったシンプルなReactコンポーネントで、2つの関数、テーマをプロップとして渡すためのreturnステートメントだけです。
returnステートメントの中には MuiThemeProvider のコンポーネントがありますが、これは選択された テーマ を子コンポーネントにプロップとして渡すラッパーコンポーネントとして使用されます。
getTheme()
ここでは Material UIのスタイリング ガイドラインを使ってテーマを作成し、それをTheme Switcherコンポーネントにインポートしました。
1
import blue from
"./themes/blue"
;
2
import red from
"./themes/red"
;
3
import dark from
"./themes/dark"
;
4
import light from
"./themes/light"
;
どのテーマが選択されたかを追跡するために、ドロップダウンのターゲット値を getTheme関数に渡し、その結果をMuiThemeProviderコンポーネントのテーマプロップとしてreturnステートメントで渡します。
01
function
getTheme(themeProfile) {
02
switch
(themeProfile) {
05
selectedTheme = _.merge({}, igloo, light);
08
selectedTheme = _.merge({}, igloo, red);
14
selectedTheme = makeCustomTheme();
17
selectedTheme = selectedTheme;
20
selectedTheme = selectedTheme;
22
console.log(selectedTheme)
2
<MuiThemeProvider theme={getTheme(props.themeProfile)}>
UXPinエディタでは、getTheme関数から入力されたテーマセレクタはこのように表示されます。
makeCustomTheme()
完成したテーマをインポートするオプションがあるだけでなく、UXPinエディタ内でカスタムの一時的なテーマを作成することもできます。
わかりやすくするために、原色や二次色などのいくつかのプロパティのみご紹介しましたが、必要に応じて細かく設定もできます。
以下は makeCustomTheme 関数のコードです。これは Material UI の内蔵されたコア関数である createMuiTheme を利用したもので、受け取ったオプションに基づいてテーマを作成します。
01
function
makeCustomTheme() {
02
const customTheme = createMuiTheme({
06
main: props.primaryColor
08
: selectedTheme.palette.primary.main,
11
main: props.secondaryColor
12
? props.secondaryColor
13
: selectedTheme.palette.secondary.main,
16
main: props.decorationColor
17
? props.decorationColor
18
: selectedTheme.palette.decoration.main,
21
main: props.headerBadgesColor
22
? props.headerBadgesColor
23
: selectedTheme.palette.headerBadges.main,
これで、デザインシステムに動的なテーマ切り替え機能を組み込む方法が1つ完成しました。
ラッパーコンポーネント(Theme Switcher)がネストした子コンポーネントにプロパティを渡すだけで、新しいデザインシステム、ページ、レイアウトを作成することなく、動的にテーマを変更することができます。
UXPin Mergeでテーマ切り替えを試してみる
他のデザインツールと比較すると、UXPin Mergeを使った場合では非常に多くの柔軟性と創造性を得ることができます。
コードベースの、スタイリングと機能のための「信頼できる唯一の情報源(Single source of truht)」に焦点を当てることで、相互接続されたシステムが構築され、デザイナーと開発者のハンドオフ間のギャップを埋めることができます。
また、React のコンポーネントで作成できるものは、すべてデザインシステムで実現できます。
デザインシステムに重要な機能を追加するためにサードパーティのプラグインや API に頼る必要はなく、コマンドひとつでスタイルを変更しながら、ダイナミックでインタラクティブなプロトタイプを自由に作成できます。
UXPin Mergeのインタラクティブなプロトタイプで製品開発を効率化しましょう!