デザインから Reactコード – UXPin Mergeで製品開発を高速化
デザインをReactのコード に変換することは極めて重要なステップである一方、多くの場合で誤った解釈、非効率性、一貫性の欠如といった課題が伴います。
UXPin Mergeのような新しいテクノロジーは、コードからデザイン（Code-to-Design）のワークフローを促進し、Reactコンポーネントでデザインできるようにすることで、この時代遅れのプロセスを合理化することを目指しています。
主なポイント：
- 従来の「Design to Code」のワークフローでは、デザインの詳細が失われ、反復サイクルが長くなり、バージョンが不一致になることが頻繁に起きる。
- UXPin Mergeの技術には、デザインから機能的なReact コードへの変換を効率化させるコードベースのデザインアプローチを提供する。
- Mergeでは、ReactコンポーネントをUXPinのデザインエディタに直接インポートして、より動的でインタラクティブなデザイン体験を実現できる。
- UXPin Mergeを使うと、レポジトリ内のReactコンポーネントへの変更が自動的に同期され、メンテナンスやカスタマイズがしやすくなる。
- UXPinの「Code-to-Design」のワークフローで、デザインの効率化、最初と最終製品間でのより高い忠実度を得ることができる。
直感的なデザインインターフェースとMerge技術を使って、Reactコードでデザインしてみませんか？
こちらからUXPin Mergeをぜひご覧ください。
デザインから React コード に変換する方法
従来の製品開発のワークフローでは、デザイナーはSketchやFigmaのようなツールを使ってモックアップやプロトタイプを作成します。
そして、そのデザインとドキュメントをデベロッパーに渡し、デベロッパーはそれらに機能性を持たせるReactコードに変換します。
ハンドオフでは通常、デザインを標準フォーマットにエクスポートして、寸法、色、アセットなどの詳細な注釈を付けます。
このプロセスでは、デザイナーとデベロッパーの協力、あるいは両方のスキルを持つデベロッパーに依存しますが、デザインと開発の能力を身につけるには何年もかかるため、両方をマスターすることを選ぶ人はあまりいません。そして、課題は他にもあります。
「デザインから Reactコード 」での課題
- 変換時での取りこぼし： 最善を尽くしても、デザインの詳細が失われたり、ハンドオフ時に誤解されたりすることがよく起こる。
- 反復の遅れ： デベロッパーに説明が必要だったり、デザイナーに変更が必要な場合、反復サイクルは長くなり、時間とリソースを浪費してしまう。
- コンポーネントの不整合： 共有の言語やツールセットがないと、デザイナーやデベロッパーは、再利用可能な同じコンポーネントなのにそれぞれ独自のバージョンを作成することになり、一貫性がなくなる。
- 静的なデザイン： 従来のデザインツールは、動的なデータや状態を考慮しない静的なモックアップを作成することが多く、最終製品の表現にギャップが残ってしまう。
- バージョンの混乱： デザインやコードが進化するにつれ、最新バージョンの把握がとんでもないことになる。
より良い代替案が必要な理由
旧式のワークフローにも利点はありますが、UX（ユーザーエクスペリエンス）が製品を左右する世界では最適とは言い難いところであり、Reactコンポーネント中心のアーキテクチャが加われば、さらにエラーは増えるでしょう。
そこで、次のような理由で従来の「Design to Code」のワークフローに代わる選択肢が必要になります：
- 時間効率：従来の方法では、プロジェクトのスケジュールが延びてしまう。開発サイクルの短縮は単なる願望ではなく、ニーズである。
- デザインの完全性： 最初のデザインに対する最終製品の忠実性は損なわれることがよくあるが、新しいアプローチは、デザイナーのビジョンを忠実に守ることができる。
- ダイナミックなリアルさ： 最近のUIはインタラクティブでデータ駆動型であり一方で、静的なデザインハンドオフではリアルさを表現することはできない。
- 一貫性： 一貫性のあるUIには、デザイナーとデベロッパーにとっての「信頼できる唯一の情報源（Single source of truth）」が必要だが、従来のプロセスではそれが欠けている。
- フィードバックのループ： リアルタイムでの連携だと、事後的な修正ではなく、その場で問題を解決することができる。
また、従来のモデルでは、デベロッパーが一人でプロトタイプの作成とテストの実施をするのは大変であり、時間がかかってしまいます。デベロッパーでもデザインツールを学ぶ必要があるまたは、コードでビルド、テスト、反復しなければならないことから、プロジェクトに多大な時間がかかることになるのです。
幸い、このようなデザインワークフローに代わって、Reactコードを使うという方法があります。
React でデザインする方法
Reactコードを書いたり編集したりする代わりに、コンポーネントをドラッグ＆ドロップするだけでUIのプロトタイプを作る方が簡単だと思いませんか？
UXPin Merge の技術によって、それが実現可能です。
FigmaやAdobe XD などの画像ベースのデザインツールと違って、UXPin はコードベースであり、HTML、CSS、Javascript を裏でレンダリングします。
このコードベースは、Mergeの技術によって、キャンバス上でコードコンポーネントをノーコード環境で使えるということです。
Mergeを使うと、レポジトリからUXPinのデザインエディタに Reactコンポーネントを読み込むことができます。
また、UI要素は UXPinのデザインシステムライブラリに表示され、プロトタイプ作成のためにドラッグ＆ドロップできます。
そして、コンポーネントのReactプロップ で定められたプロパティパネルで、スタイリングやインタラクティブ性を編集可能です。
UXPin MergeでReactコードコンポーネントに役立つ理由
デベロッパーは、標準のプロパティパネルのインターフェースを使うか、JSXモードに切り替えて、より使い慣れたコード環境を使うことができます。
また、レポジトリ内のReactのコンポーネントに加えた変更は自動的にUXPinに同期され、UI要素、パターン、テンプレートの更新、保守、カスタマイズができるようになります。
この「Code-to-Design」ワークフローで、デベロッパーは「コードベースとレポジトリの完全なコントロール」と、「デザインツールのインターフェースのシンプルになったワークフロー」という両者の長所が得られます。
デベロッパーはコードを編集する代わりに、ドラッグ＆ドロップで UI上のコンポーネントを移動したり、プロパティパネルで調整を行うことができるのです。
Merge をレポジトリに統合する方法
UXPinには、コンポーネントライブラリを同期する方法として以下の２つがあります：
Git統合（Reactのみ）：
これは、GitHub、GitLabなどのReactコンポーネントのレポジトリへの直接統合です。
Git統合は、以下のようなMergeの機能が得られることからオススメです：
Storybook統合
React、Vue、Angular、Emberなど、あらゆるStorybookをUXPinに連携できます。
Mergeのすべての機能を利用できるわけではありませんが、Storybookにはコンポーネントライブラリを管理するためのアドオンやプラグインなど、多くの利点があります。
npm統合およびMergeコンポーネントマネージャー
npm 統合やMergeコンポーネントマネージャーを使って、npmレジストリのオープンソースのデザインシステムから各UI要素を読み込むこともできます。
また、UXPinには、Fluent UI （Git）、Ant Design（npm統合）、MUI （Git）、Material UI（Storybook）、UXPinのボイラープレート（Git）など、セットアップなしでもプロトタイプを開始できるMergeのデザインシステムがいくつか内蔵されています。
MergeのGit統合で Reactコンポーネントを追加・UXPinに同期する方法
UXPinのアカウントを作成し、オンボーディング プロセスを完了し、Mergeへのアクセスをリクエストができるようになったら、MergeのBoilerplateレポジトリを使ってレポジトリのセットアップを始めましょう。
UXPin公式ドキュメントより、以下の前提条件があります：
- Easy Startチュートリアルを完了している（Mergeへのアクセスのリクエストが必要）
- HTML、CSS、および Javascriptに精通している
- React.jsの基本的な理解がある
ステップ１：Merge Dev環境を実行する
Merge Devの環境を実行します。ルートでnpm startを実行すると、次のスクリプトが実行されます：
uxpin-merge –webpack-config ./webpack.config.js –wrapper ./src/UXPinWrapper/UXPinWrapper.js –uxpin-domain merge.uxpin.cloud
- -webpack-config：webpackの設定場所を指定する。
- -wrapper： Reactコンポーネントにテーマプロバイダーのようなラッパーが必要な場合に使う
- -uxpin-domain： Mergeを正しいサーバーへ向ける
ステップ２：命名規則
ディレクトリ名、ファイル名、コンポーネント名を同一にします。
- 例：./src/NewComponent/NewComponent.js
ステップ３：コンポーネントをエクスポートする
コンポーネントにエクスポートのデフォルトがあることを確認します。
- 例： export default NewComponent;
ステップ４：プロップを確定する
プロップの確定（リリース予定のTypescriptインターフェース）には、PropTypesまたは Flowを使いましょう。そして、Propaties Panel（プロパティパネル）で編集可能になります。
ステップ５：JSXプリセット
コンポーネントフォルダ内のプリセットのディレクトリに JSXプリセットのファイルを作成します。
例： ./src/NewComponent/presets/0-default.jsx
ステップ６：構成の更新
いよいよ、ルートディレクトリにあるuxpin.config.jsにコンポーネントを追加します。
ステップ７：Merge の再起動
新しいコンポーネントを追加した後、ターミナルで Command + C を押して Merge プロセスを再起動します。
新しい Merge プロセスの開始時にライフサイクル エラーが発生した場合は、ターミナルに killall node -9と入力して再試行してください。
UXPin「Reactコードからデザイン」の仕組み
初期設定が完了すると、Mergeで加えられた全ての変更がUXPinのデザインシステムライブラリに自動的に同期されます。
そして、Mergeのバージョン管理が更新を通知し、自分で最新リリースに切り替えるタイミングを選択できます。
またバージョン管理では、以前のデザインシステムバージョンに戻すことも可能です。
ページの設定
フレームやアートボードを使った従来のデザインツールとは異なり、UXPinはデベロッパーにとってより馴染みのあるプロジェクト構造であるページアプローチを使います。
デザインキャンバスの左側にあるPages & Layersパネルで、プロジェクトのページを追加・管理できます。全ページを表示させ、プロジェクトファイルの概要を見ることもできます。
また、UXPinでは、デスクトップ、テレビ、モバイル（iOS、Windows、Android）、タブレット、ウェアラブルなど、多くの標準ページ/画面サイズを提供しています。カスタムビューポートを作成もできます。
Reactコードコンポーネントを使ったデザイン
コンポーネントをデザインキャンバスにドラッグ＆ドロップして、プロトタイプを作成してみましょう！
コンポーネントを「snap together」で結合し、コード化されたUIのようにシームレスなレイアウトを作成できます。
Properties PanelでUI要素のプロパティを調整し、ページ遷移、アニメーション、マイクロインタラクション用のインタラクションを追加できます。
そして UXPinには、「if-then」および「if-else」条件を使った Javascript のような条件付きインタラクションがあり、コードと区別できない動的なプロトタイプを作成します。
また、レポでプログラムした API、インタラクティブ機能、その他のプロパティはすべて UXPin で利用でき、最終製品の正確なレプリカを生成できます。
UXPinのPatterns（パターン）機能を使ってコンポーネントライブラリを増やす方法
UXPinのPatternsを使えば、コードを書かずに要素を組み合わせてデザインシステムを進化させることができます。
そして Gitまたはnpm統合を使ってインポートした どの Mergeライブラリでも使うことができます。
※しかし、残念ながらパターン機能はStorybookではご利用いただけません。
新しいパターンを作成したら、それをパターンのライブラリに保存してチームメンバーと共有することができます。
この機能により、UI要素をコーディングする前にプロトタイプを作成し、包括的にテストすることができるため、修正時間は大幅に短くなり、秘術的負債を減らすことができます。
また、Patternsの使用で以下のようなことも可能です：
- プロトタイプのワークフローを最適化するために、Patternsのバリアブルを複数保存する。
- （デザインライブラリになくても）高度なコンポーネントでデザインできる。
「Design to Code」がより速く
Reactコンポーネントを使ったデザインは、コンポーネントライブラリをプロジェクトに読み込み、UXPinからレイアウトをコピーするだけなので、デザインプロセスから開発へのスムーズでシームレスな変換を実現します。
また、Mergeが、UXPinのSpecモードからIDE（統合開発環境）にコピー/ペーストするためのプロダクションレディなJSXを生成します。
導入事例
「Code-to-Design」が非デザイナーのデザインをシンプルにする方法
TeamPasswordは５人のスタートアップ会社で、デベロッパーは２人、デザイナーはいません。
開発チームは ２０２２年に Reactに切り替え、MUIのカスタムバージョンを採用しました。
そして、TeamPasswordのエンジニアは Mergeを使ってUIライブラリをUXPinに同期させて、プロトタイプとテストを行っています。
Mergeを使うことで、TeamPasswordは製品や機能をより速く、より高い一貫性とより少ないエラーで出荷することができ、競争の激しいセキュリティ技術市場で優位に立つことができます。
また、デザインと開発に同じコンポーネントを使っているため、ドリフトもなくなりました。
「この市場ではブランドは不可欠です。弊社は顧客のログイン記録という機密情報を扱っているため、デザインの一貫性がなかったり、古いままでは情報を安全に保てているのか不安に思うお客様もいるかもしれません。フロントエンド開発もまた、バックエンドのパフォーマンスに対する信頼と信用を築くのです。」‐ TeamPassword Director of Operations – Tony Caccavos氏
「Design to Code」から、UXPin の「Code-to-Design」のワークフローに切り替えることで、プロトタイプの作成とテストをスピードアップすることができます！
詳細とアクセスリクエスト方法については、Mergeのページをぜひをご覧ください。
