Storybook デザインシステム – UXPin Merge連携方法とメリット

このページをご覧になっているということは、私たちのCode-to-DesignのMergeテクノロジーを使って、完全に機能するプロトタイプを作ったことがあるのではないでしょうか。(まだそのステップを踏んでいない場合は、Storybookとの統合を無料でお試しください。)

本記事では、 Storybookデザインシステム を使用することで得られる主なメリットをまとめ、簡単なチュートリアルを作成しました。

 Storybookデザインシステム を、信頼できる唯一の情報源にする

デジタルデザインのプロジェクトは、特に複数の人が同時に複数の仕事をする場合、混乱を招くことがあります。Storybookのデザインシステムは、そのような混沌とした状況を抑制し、関係者全員に信頼できる唯一の情報源を与え、コンポーネントのテストを容易にします。

製品チームのメンバーは、すべての基準を理解しているわけではありませんし、開発段階で必要なものがデザインに含まれているかどうかについて、何度もやりとりをしているかもしれません。このような場合、すべてのナレッジをまとめる必要があります。その上で、全員が同じ方向を向くことができるインタラクティブなデザインシステムが必要です。

Storybookのデザインシステムでは、変更を加えた箇所はすべて自動で更新されます。例えば、ある人が20.2バージョンを持っていて、他の人が21.1バージョン使っているというような問題は発生しません。すべての人に同じ情報を提供できるデジタルデザインシステムを構築することで、そのような混乱を防ぐことができます。

また、Storybookでは、チームメンバーが必要なコンポーネントをこれまで以上に簡単に見つけることができます。コンポーネントファインダーとサイドバーは、検索条件に合った結果を表示します。Googleが使える人は、Storybookのデザインシステムで適切なコンポーネントを見つけることができます。

Storybookのデザインシステムで創造性を刺激する

多くのデザインツールや開発ツールとは異なり、StorybookではUIコンポーネントを構築し、隔離されたサンドボックスでテストすることができます。

そのため、デザインシステムやコンポーネントライブラリの他の部分にダメージを与えることなく、インタラクティブなコンポーネントを作成することができます。

恐れずに、最もクリエイティブなアイデアを追求することができます。ブランドの美観や機能性を高めるユニークなアプローチが見つかるかもしれません。たとえその目標に到達しなくても、挑戦することで何かを傷つけることはありません。

StorybookとMergeの統合で、デザイン開発の不整合を解消

UXPinは、コードベースデザインの大ファンです。UXPinでは、デザイナーと開発者がお互いに対立しているのをよく目にします。問題は、ほとんどの場合、ミスコミュニケーションと単一の情報源の欠如に起因していました。この2つのタイプのプロフェッショナルは共通の言語を持たないため、お互いを理解するのに苦労していました。デザイナーはイメージベースのテクノロジーを扱うのに対し、開発はコードに焦点を当てていました。

Merge は、コードを使わず、ドラッグアンドドロップでデザインできる環境をチームに提供することで問題を解決します。デザイナーは、コンポーネントライブラリを使用して新しい製品を作成し、いくつかの調整を行ってから開発者に送ることができます。開発者はその要素のコードをすでに持っているので、デジタル製品の構築にかかる時間を短縮できます。

アドオンや APIを気にすることなく、Mergeの編集画面またはプロトタイピング環境でStorybookのデザインシステムをお使いいただけます。

驚くべきは、プロトタイプが最終製品と同じように機能することです。Storybookは、テストを非常に簡単にするアトミックコンポーネントの構築に優れています。基本的に、コンポーネントが正しく動作すれば、ユーザーインターフェイスも正しく動作します。

これで、当初のデザインと最終的な製品との間の不整合について考える必要はありません。

StorybookとUXPinの連携方法

いよいよMergeとStorybookを統合するための技術的な作業の説明に入ります。簡単ですのでご安心ください。

※事前にUXPinアカウントをご準備ください。まだお持ちではない方はこちらからトライアルを開始いただけます。

また、Storybookが必要ですが、こちらからインストールできます。個人のStorybookのURLをお持ちの方は、sales@uxpin.comまでご連絡ください。

コンポーネントがある場合は、Storybookにインポートできます。

オープンソースのStorybookをお持ちの場合は、以下の手順に従ってください：

• UXPinのDashboardで新しいプロトタイプを開きます。
• “Design System Libraries “を選択し、”New Library “をクリックします。
• “Import Components from Storybook “を選択します。
• インポートしたいStorubookのURLを貼り付けます。
• これでステップ完了です！

今後、Storybookのデザインシステム上で変更を加えた場合、UXPinでも更新されます。

Storybook統合のメリットをご体験ください

いくつかのデザインツールやプロトタイピングツールには、開発のためにデザインをStorybookに移すことができるアドオンやプラグインがあります。UXPinでは、お客様がすべてをゼロからデザインする必要がないように、逆の方法でこれを行う第一人者になることを決めました。

今すぐStorybookとの連携機能を利用し、コードベースのインタラクティブなコンポーネントを使ったデザインを素早く始めましょう。Storybookとの統合で製品開発がより迅速になるのかご体験ください！