UXPin Mergeでテーマの切り替えを簡単に

UXPin Mergeで テーマの切り替え を簡単に

テーマの 切り替え は、プロトタイプをデザインする上で欠かせません。

ライトモードとダークモードの切り替え、または１つのプロトタイプで複数のクライアント向けにテーマの変更テストでのプロセスなどは、全てのデザイナーが慎重に考える必要があります。

さらに、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要素にプロップとして渡されます。

UXPin Mergeで テーマの切り替え を簡単に - Styled components

そこで、必要なテーマごとにファイルを作成し、それらをラップするテーマ切り替え機能の styled-component にインポートして、入れ子になった各子コンポーネントにその値を渡すとしたらどうなるでしょう。

その場合、styled-components CSS に注入された Javascript propsを使って、トップレベルのコンポーネントでテーマを変更するだけです。

テーマ切り替え機能のコンポーネント構築

まず、トップレベルのラッパーコンポーネントとして機能し、選択したテーマのスタイルをネストしたすべてのコンポーネントに渡す『ThemeSwitcher』という名前のコンポーネントを作成します。

コンポーネントが ThemeSwitcher にネストされている場合、インポートされたテーマを動的に切り替えることができます。

コンポーネントの機能を全て維持しながら、完全にコンポーネントのルック＆フィールを変更することができるテーマですね。

以下のコードは、簡略化された ThemeSwitcher の構造を示しています。動作の詳細は後ほど説明します。

import blue from "./themes/blue";
import red from "./themes/red";
import dark from "./themes/dark";
import light from "./themes/light";
 
 
function ThemeSwitcher(props) {
 let selectedTheme;
 
 function getTheme(themeProfile) {
   switch (themeProfile) {
     ...
   }
   return selectedTheme;
 }
 
 function makeCustomTheme() {
   const customTheme = createMuiTheme({
     ...
   });
   return customTheme;
 }
 
 return (
   <MuiThemeProvider theme={getTheme(props.themeProfile)}>
     {props.children}
   </MuiThemeProvider>
 );
}

見ての通り、これはMaterial UIのインポートフックを使ったシンプルなReactコンポーネントで、２つの関数、テーマをプロップとして渡すためのreturnステートメントだけです。

returnステートメントの中には MuiThemeProvider のコンポーネントがありますが、これは選択されたテーマを子コンポーネントにプロップとして渡すラッパーコンポーネントとして使用されます。

getTheme()

ここではMaterial UIのスタイリングガイドラインを使ってテーマを作成し、それをTheme Switcherコンポーネントにインポートしました。

import blue from "./themes/blue";
import red from "./themes/red";
import dark from "./themes/dark";
import light from "./themes/light";

どのテーマが選択されたかを追跡するために、ドロップダウンのターゲット値を getTheme関数に渡し、その結果をMuiThemeProviderコンポーネントのテーマプロップとしてreturnステートメントで渡します。

function getTheme(themeProfile) {
   switch (themeProfile) {
    // _.merge combines two themes together
     case "light":
       selectedTheme = _.merge({}, igloo, light);
       break;
     case "red":
       selectedTheme = _.merge({}, igloo, red);
       break;
     case "dark":
     selectedTheme = dark;
     break;
     case "custom":
       selectedTheme = makeCustomTheme();
       break;
     case "blue":
       selectedTheme = selectedTheme;
       break;
     default:
       selectedTheme = selectedTheme;
   }
   console.log(selectedTheme)
   return selectedTheme;
 }


return (
   <MuiThemeProvider theme={getTheme(props.themeProfile)}>

UXPinエディタでは、getTheme関数から入力されたテーマセレクタはこのように表示されます。

UXPin Mergeでテーマの切り替えを簡単に - getTheme関数

makeCustomTheme()

完成したテーマをインポートするオプションがあるだけでなく、UXPinエディタ内でカスタムの一時的なテーマを作成することもできます。

わかりやすくするために、原色や二次色などのいくつかのプロパティのみご紹介しましたが、必要に応じて細かく設定もできます。

UXPin Mergeでテーマの切り替えを簡単に - makeCustomTheme()

以下は makeCustomTheme 関数のコードです。これは Material UI の内蔵されたコア関数である createMuiTheme を利用したもので、受け取ったオプションに基づいてテーマを作成します。

function makeCustomTheme() {
   const customTheme = createMuiTheme({
     ...selectedTheme,
     palette: {
       primary: {
         main: props.primaryColor
           ? props.primaryColor
           : selectedTheme.palette.primary.main,
       },
       secondary: {
         main: props.secondaryColor
           ? props.secondaryColor
           : selectedTheme.palette.secondary.main,
       },
       decoration: {
         main: props.decorationColor
           ? props.decorationColor
           : selectedTheme.palette.decoration.main,
       },
       headerBadges: {
         main: props.headerBadgesColor
           ? props.headerBadgesColor
           : selectedTheme.palette.headerBadges.main,
       },
     },
   });
   return customTheme;
 }

これで、デザインシステムに動的なテーマ切り替え機能を組み込む方法が１つ完成しました。

ラッパーコンポーネント（Theme Switcher）がネストした子コンポーネントにプロパティを渡すだけで、新しいデザインシステム、ページ、レイアウトを作成することなく、動的にテーマを変更することができます。

UXPin Mergeでテーマ切り替えを試してみる

他のデザインツールと比較すると、UXPin Mergeを使った場合では非常に多くの柔軟性と創造性を得ることができます。

コードベースの、スタイリングと機能のための「信頼できる唯一の情報源（Single source of truht）」に焦点を当てることで、相互接続されたシステムが構築され、デザイナーと開発者のハンドオフ間のギャップを埋めることができます。

また、React のコンポーネントで作成できるものは、すべてデザインシステムで実現できます。

デザインシステムに重要な機能を追加するためにサードパーティのプラグインや API に頼る必要はなく、コマンドひとつでスタイルを変更しながら、ダイナミックでインタラクティブなプロトタイプを自由に作成できます。

UXPin Mergeのインタラクティブなプロトタイプで製品開発を効率化しましょう！

 

 
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you