UXPin（アメリカ合衆国 ネバダ州、 CEO: Yuga Koda）は、DXにより増加する新規アプリ開発ニーズにおいて、ボトルネックになっているUXデザインから製品開発へのプロセスを改善すべく、コード基盤のデザインシステムもしくはデザイン資産をそのままUXデザインツール「UXPin」に実装できる「Storybook統合」機能を提供開始した。
デザイン思考によるデザイン経営が求められているなか、DXをより加速化する基盤として、ウェブやアプリのデザインガイドラインである「デザインシステム」の構築が一般化されている。しかし、既存のUXデザインツールでは、デザインシステムの導入後にも、デザイン成果物（プロトタイプ）とフロントエンジニアが開発した本番用のコード資産との乖離があり、製品開発プロセスのボトルネックになっているという。そこで、UXPinでは、Mergeというテクノロジーにより、本番用のコードで生成されるものと同じデザインシステム資産（コンポーネント）を利用してプロトタイプを作成することで、デザインシステムの一貫性を保つ。
今回の「Storybook統合」機能は、Mergeテクノロジーをより多くのエンタプライズ顧客に利用してもらうため、オープンソースUI開発サンドボックスであるStorybookとの統合により、既存のReact以外にもVueやAngularなど15種類のUIフレームワークにも対応する。
Storybook統合の特徴は、次のとおり。
Storybookと容易に連携
StorybookのリンクをUXPinエディター内の連携ボックスに貼り付けるだけで、統合が完了。コードを書くなどの作業は必要なく、統合は数秒で終わる。
コード・コンポーネントによるインタラクティブデザイン
UXPinはノーコードデザインツールのため、UXデザイナーは統合されたデザインコンポーネントでプロトタイプを作成するのみ。インタラクティブなコンポーネントをキャンバスにドラッグ＆ドロップすることで素早くアプリのプロトタイプを作成できる。
15種類のUIフレームワークに対応
Storybookがサポートするすべてのフレームワークに対応。一般的に多く使用されているReactだけではなく、VueやAngularなど、フロントエンジニアが現在使っているJavaScriptコードのままで統合作業を行える。これによりプロトタイプ完成後、エンジニアに対しても製品として実装できるコードを提供可能となる。
導入方法
- UXPinエディター内の連携ボックスでStorybookのリンクを貼り付ける。
- 正しくインポートされたかを確認するため、デザインコンポーネントをドラッグ＆ドロップ。
- デザインコンポーネントが正しく動作すれば連携完了。
