ペースト＆置換

この機能を使うと、要素をクリップボードにコピーし、キーの組み合わせでキャンバス上にある要素と入れ替えることができます。要素を削除して代わりに別の要素を貼り付けるのではなく、「Ctrl（コマンド）＋C」でコンポーネント、画像、図形などをコピーし、「Ctrl（コマンド）＋V」キーの組み合わせで別の要素の場所に貼り付けます。また、コード化されたコンポーネントにも使えます。

新しいキャンバスサイズの使用

ユーザーは、Figma のようなアートボードではなく、キャンバスを使って作業しますが、新しいプロジェクトを開始するとき、デスクトップアプリケーションであれ、デザイン目的に合わせてキャンバスの調整が必要です。その際、右側のプロパティパネルでそれができます。

（iPhone 15 Maxのような）デバイスフレームに対応した新しいキャンバスプリセットが追加されました。また、それぞれの新しいキャンバスサイズに対応するデバイスフレームも用意されています。

グリッドスタイルの設定

UI デザインやデザインシステムにおけるグリッドは、ページ上のコンテンツを整理するのに使われる構造的なフレームワークであることから、さまざまなデバイスやスクリーンサイズ間での一貫性とアラインメントが保証されます。

グリッドは、UI（ユーザーインターフェース）のレイアウトにおいて基礎的な要素として機能し、デザイナーはバランスが取れて整理された、美しいデザインを作成することができるようになります。

UXPin では、定義済みのグリッドを設定し、デザインシステムライブラリに追加できるようになりました。つまり、標準のグリッドスタイルを設定することでプロジェクトで使い回すことができます。

「</>Get Code（コードを取得）」のボタンでスペックにアクセス

エディタの右隅に 「</>Get Code（コードを取得）」という新しいボタンが追加されたことにお気づきかもしれません。このボタンで、クリック一つで製品のインターフェースを構築するのに必要な仕様をすべて見つけることかができる「Spec（スペック）モード」に、これまで以上に速く行くことができます。

UXPin では、さまざまな仕様が用意されています（詳しくはドキュメントをご覧ください）：

• レッドライン
• グリッド
• スタイルガイド
• キャンバスサイズ
• カラー
• タイポグラフィ
• アセット
• CSSコード
• 依存関係を含む JSX コード

プロジェクトグループのユーザー管理

これで、アカウント所有者と管理者は、プライベートグループも含めて、アカウントに作成されたすべてのプロジェクトグループを見ることができ、プライベートグループを所有していたメンバーがチームから削除されると、所有権は自動的にアカウント所有者または管理者に移ります。

この機能は、Advancedプラン、Enterpriseプラン、および Mergeのユーザーにアクセス要求に応じて提供しています。

Merge コンポーネント向けフレックスボックス

Flexbox は、コンテナ内のアイテムをレイアウト、整列、スペース配分する効率的な方法を提供する CSS のレイアウトモデルで、レスポンシブで動的なレイアウトを作成する際に特に便利です。

自動レイアウトのように機能する、コード化されたコンポーネント用の Flexbox が追加されました。右のパネルとコンテキストメニューにあり、これで位置合わせ、配置、要素間のギャップの設定、レスポンシブにコンポーネントを調整するのが簡単にできます。

ユーザビリティの向上

また、以下のような使い勝手の調整も追加されました：

• エディタでのパネル管理 – より柔軟性を持たせるために、パネルの使用方法が微調整されており、「Pages & Layers（ページとレイヤー）」と「Design System Library（デザインシステムライブラリ）」のパネルを同時に開くことができる。
• ネストしたコンポーネントの選択 – 「Get Code（コードを取得）」モードで、「Command/Ctrl」キーを押しながら、検査したいネストしたコンポーネントをクリックする。これで、「Layers（レイヤー）」のパネルを通して各コンポーネントを選択するという従来の方法と比べて、より速く１つ一つのコンポーネントを確認することができる。

ロードマップに追加する新機能の提案

UXPin では、常に改善し、ユーザーの体験をより良いものにしたいと考えています。素晴らしいアイデアや UXPin 製品に搭載してほしい機能がありましたら、ぜひお聞かせください。

皆様からのフィードバックは私たちにとって非常に重要です。小さな微調整でも、大きな追加でも、皆さんのご意見が UXPin の未来を形作る一助となります。しばらくUXPin をお使いでない場合は、無料トライアルをぜひご体験ください。

The post ２０２４年８月の製品 アップデート appeared first on Studio by UXPin.

Figmaでつくるプロトタイプは最終製品がどのように見えるかを視覚化し、デザインについての説明や、ユーザーフローを計画するには最適ですが、プロトタイプテストには不向きかもしれません。そこでUXPinの出番です。デザイナーはUXPinを使うことで、質の高いテスト結果をもたらすインタラクティブなプロトタイプを作成することができます。本記事ではこれら２つのツールについて詳しくみてみましょう。

主なポイント：

• Figmaはベクターベースのデザイン環境でリアルタイムでの連携を提供し、UXPinはコードベースのアプローチで高度なインタラクティブなプロトタイプを提供する。
• UXPinで提供するMergeなどの高機能により、複雑なインターフェースをFigmaよりも大幅に速く構築できる。
• プロトタイピングにおいて２つを比較した結果、UXPinでのプロトタイプは、Figmaで作成したときよりも８倍速く、よりインタラクティブであることがわかった。
• Figmaは、静的なモックアップ、低忠実度プロトタイプ、共同デザインの作成に優れているが、インタラクティブなプロトタイプ機能が欠けている。

UXPinが提供するMergeテクノロジーによって、デザインチームでもコードベースのプロトタイプの作成を可能します。これによって、デザインから開発への移行を効率化し、コストと時間を大幅に節約することができます。

デザインと開発のギャップを解消させ、UXPinのMergeテクノロジーで高忠実でインタラクティブ性のあるプロトタイプを作成してみませんか？詳しくはこちらのページをご覧ください。

Figmaとは

Figmaは、リアルタイムの連携を実現するベクターベースのデザインツールです。ワイヤーフレーム、モックアップ、プロトタイプ、情報アーキテクチャまで、様々なデザインアセットを作成することができます。

２０１６年にブラウザベースのベクターグラフィックス編集ツールとして誕生し、当時デザインツールの市場を独占していたAdobe製品に代わる人気ツールとなりました。多くのUX/UIデザイナーはFigmaのその使いやすさに惚れ込み、UIデザイン業務においてもFigmaが使われ始めました。

Figmaのプロトタイプは、他のチームにデザインについて説明するのに最適です。また、クリエイティブなプロトタイプ、デザインの探求、パワフルなドローイングを作成するのに優れています。一方、Figmaのプロトタイプでは開発環境の制約沿った高度なインタラクティブ性が欠けていますが、そこはUXPinでかなえることができます。

UXPinとは

UXPinは、部門横断的な連携向けのコードベースのフルスタックデザインツールです。インタラクティブ性のあるプロトタイピング機能はUXPinを使う上で最大の魅力であり、デザイナーは、最終製品のようなビジュアルと完全な機能性を持つプロトタイプを作成することができます。ライブラリやフォームを使うことで、ワイヤーフレーム、モックアップ、ユーザーフローマップ、情報アーキテクチャの作成も簡単に行うことができます。

UXPinのプロトタイプは、デザイナーがプロトタイプにインタラクションを追加して動きを加えることができます。テスト中でもユーザーの入力情報の保存や、ライブデータも使うことができるため、まさに “実物” のような操作性があります。

これらによって、デザイナーは次のようなことが可能となります：

• 堅牢でインタラクティブ性のあるプロトタイプの構築
• ユーザーやステークホルダーから高品質で有意義なフィードバックの獲得
• デザインハンドオフの効率化

FigmaとUXPin – プロトタイピングでの違い

Figmaは、コラボレーション機能とコンポーネントベースのアプローチによって、プロトタイプのための信頼性の高いソリューションを提供します。一方、UXPinではさらに高度なインタラクション機能と、Mergeテクノロジーによるデザインから開発へのシームレスなハンドオフを実現します。

UXPinとFigmaのプロトタイピング機能を簡単に比較してみましょう。

Figma:

• 基本的なインタラクションとトランジション： Figmaでは、デザイナーはクリック可能な基本的なトランジションを追加し、モックアップをより魅力的なものにすることができる。
• コンポーネントの作成とデザインシステム： デザイナーは、共有・再利用可能なコンポーネントを作成し、UIの一貫性を保つことができる。
• 協働デザイン機能： 複数のデザイナーが同時に同じデザインに取り組むことができ、それによってデザインプロセスが効率化され、集団での創造性が促進される。

UXPin:

• 高度でインタラクティブなプロトタイプ： 洗練されたプロトタイピング機能でステート、インタラクション、変数、式などの機能により、実物に近いプロトタイプを作成できる。
• Mergeの「Code-to-Design」手法： デザイナーは Reactコンポーネントをインポートして、最終製品と区別できないほどの「リアルな」プロトタイプを作成できる。また、Mergeはデザインと開発のギャップを埋め、シームレスな製品開発フローを提供する。
• リアルタイムの連携とユーザーフィードバック： UXPinのコメント機能は、チームメンバーやステークホルダーとの部門横断的な連携を促進する。また、ユーザーからのフィードバックをプロトタイプに直接取り込み、実際のユーザーのインサイトやステークホルダーからのフィードバックに基づいて、繰り返しデザインを改良できる。

FigmaとUXPinの比較 – 実際の使用例

シニアUXデザイナーのAnthony Hand氏は、UXPinとFigmaのプロトタイピング機能についての比較記事をMediumに書きました。チームは、関連するブランドカラーとサードパーティのアイコンを含む、カスタムのMicrosoft FluentのWebライブラリを作成しました。

彼はFigmaのFluent UIキットを使い、React UIライブラリのGitHubレポジトリをMergeを使ってUXPinにインポートしました。Reactコンポーネントには、レポジトリで定義されたスタイリングとインタラクティブなプロパティ、必要なコントロールとAPIを含みます。

対するFigma UIキットではFluent Design Systemの静的バージョンであり、デザイナーは関連の変数とインタラクションの設定が必要です。UXPinのReactコンポーネントと比べると、忠実度も機能もかなり劣ります。

実験

Anthony氏は、UXPinとFigmaのプロトタイピングの効率性を比較するために、両方のプラットフォームで同じ単一ページのプロトタイプを作成しました。Figmaではページのデザインで１時間かかったところが、UXPinではわずか８分で作成できました。

「UXPinのプロトタイプには、ライブドロップダウン、カレンダーボタン、ソート可能なデータテーブル、そしてインタラクティブな Highchartsの円グラフまでありました。」 – シニアUXデザイナー, Anthony Hand

Anthony氏がUXPinで作成したプロトタイプは、高品質で、エラーが少なく、Microsoft Fluentのライブコントロールを使用したインタラクティブな要素を備えていました。一方、Figmaのプロトタイプは８倍以上の時間を掛けてつくったにも関わらず、そのようなインタラクティブ性がなく、リアルタイムのインタラクションを減らすラスタライズされた画像に頼っていました。

Anthony Hand氏の見解

Figmaは、馴染みのあるグラフィックデザインのプラットフォームをWeb ベースで進化させたものであり、旧来のツールよりも進歩していますが、まだ限界があります。UXPinでは、コードベースのデザインアプローチで 「インタラクティブなプロトタイプ 」に重点を置いているため、デザイナーはライブコード要素を使ったデザインを作成でき、インタラクティブ性とリアル感がでます。さらに、UXPinでは、最小限の学習要件で単一のページに複雑なインタラクションを実装することができる機能があります。

「Figmaはもちろんすごくいいツールですが、UXPinの便利なスクリプティング機能を活用し、エンジニアが完成品で使用するのと同じライブHTML UIコントロールを使ったインタラクティブなUIをデザインできる方法を学んだ今、Figmaに戻れなくなりました。」シニアUXデザイナー, Anthony Hand

Figmaはプロトタイプ向きか

Figmaは素晴らしいUIデザインツールですが、最終製品のイメージをするためのインタラクティブなプロトタイプを作成するためには必要な機能が欠けています。ここでは、デザインプロセスにおいてFigmaを上手く使うための用途とその理由をいくつか見てみましょう：

• 静的なUIモックアップ： Figmaの直感的なUIと機能で、モックアップのデザインが難なくできる。
• 低忠実度（Lo-Fi）プロトタイプ： Figma は、画面間の基本的な遷移のみが必要なため、低忠実度のワイヤーフレームのプロトタイプに最適。
• 情報アーキテクチャ： デザイナーは、単一のアートボード上に画面を整理して、製品のアーキテクチャとユーザーフローのマッピングや視覚化をできる。
• 協働デザイン： Figmaでリアルタイムの連携がしやすくなり、それによってチームはコメント投稿やデザイン批評の実行、バージョン履歴へのアクセスができる。

Figmaでのプロトタイプの限界

以下を見ると、UXPinを検討したくなるかもしれません：

• インタラクティブ性のあるプロトタイピング： Figmaは、シンプルなクリック/タップのインタラクションを提供するものであり、ユーザーデータの取得や、ドロップダウンメニュー、カルーセル、アコーディオン、日付ピッカーなどの複雑なコンポーネントの作成は、Figmaではできない。
• ライブデータとAPI： UXPinと違い、Figmaでは ライブデータの読み込みができず、そのような複雑な統合には、エンジニアリングの入力が必要。そうなると、時間とリソースが増大してしまい、ほとんどのプロジェクトでは実現不可能になる。
• コードからデザインへ： Figmaはデザインからコードへの手法で動作する。つまり、デベロッパーはデザインをコードに変換する必要があり、時間のかかる複雑な作業である。Mergeがあれば、UXPinのコードからデザインへのワークフローによって、デザイナーはデベロッパーが使うのと同じ構成要素を使ってコードベースのプロトタイプを構築でき、製品開発ワークフローがシームレスになることで開発時間が大幅に短縮される。

UXPinでのプロトタイプ作成がいい理由

本記事に共通するテーマは「インタラクティブ性」であり、デザイナーは、現代のデジタル製品をインタラクティブなプロトタイプを使ってアイデアをテストすることを求められます。なぜでしょうか？

• 開発には時間とコストがかかる。デザインプロセスで問題を解決することで、組織は膨大な時間とリソースを節約し、それによって無駄な支出が減る。
• UXは、製品の採用、エンゲージメント、リテンションにとって極めて重要。インタラクティブなプロトタイプにより、デザイナーはデザインプロセスでユーザビリティの問題を解決し、製品の UXを向上させることができる。

デザイナーはプロトタイプやユーザーテストにおいてイメージベースのツールを使うと、デザインプロセスでのユーザビリティの問題やビジネスチャンスを見逃してしまいます。これによって、製品が提供するUXとバックログに変更を加えなければならず、負債や、回避できるはずのコスト増加に繋がってしまいます。

インタラクティブなプロトタイプがUXの負債を減らすには

Merge は、より良いテストとスムーズなデザインオフにより、無駄で回避可能なユーザー体験と技術的負債を減らすことができます。デザインチームは、プロトタイプ構築のためにデザインシステムのレポジトリからインタラクティブコンポーネントをインポートし、Figmaのようなイメージベースのツールではつくることができない 最終製品の正確なレプリカを作成することができます。

また、ユーザーとステークホルダーは、Mergeのプロトタイプを最終製品と同じように操作することができ、デザインチームは反復と改善のための正確で有意義なインサイトを得ることができます。

さらに、デザイナーとエンジニアがまったく同じコンポーネントを使うため、デザインハンドオフに必要なドキュメントや説明が少なくて済みます。デベロッパーは、同じレポジトリから同じUIライブラリをインポートし、UXPinからJSXの変更を適用して、最終製品を納品できます。

「UXPin Mergeによって、当社のエンジニアリング時間は約５０%短縮されました。数十人のデザイナーと数百人のエンジニアを抱える企業レベルの組織全体で、これがどれだけのコスト削減になるか想像してみてください。」  – UXリードデザイナー, Larry Page

より速い プロトタイプとイテレーション

Mergeは、ノーコード、ドラッグ＆ドロップのプロトタイピング環境をデザイナーのために効果的に作成します。Anthony氏のケーススタディからわかるように、Mergeに切り替えることで、同じUIライブラリを使って、Figmaよりも 8 倍速くUXPinでプロトタイプを作成することができました。

UXPinのプロパティパネルを使って、コンポーネントやプロトタイプの変更は早く効率的になります。それでも、デザイナーは単一の UI 要素に対して複数のバリエーションやステートを作成し、それを UXPinのパターンに保存することで効率を上げることができます。そしてデザイナーは、プロパティパネルで調整する代わりにコンポーネントを入れ替えるだけで、テスト中に即座にフィードバックを得ることができます。

「UXPinを使って、忠実度の高いプロトタイプを作成することができ、とても助かっています。忠実度の高いプロトタイプをより速く作成し、セッション後にすぐにフィードバックを得ることができます。修正箇所があれば、次のユーザビリティテスト参加者にはその変更を適用させ、今までよりもずっと早くフィードバックを獲得することができます。」プロダクト、UX、DesignOpsソートリーダー,  Erica Rider

UXPinのMergeテクノロジーを使ったインタラクティブコンポーネントで、プロトタイプレベルアップしませんか。詳細およびアクセスリクエスト方法については、こちらのページをぜひご覧ください。

The post 【 プロトタイプ 】FigmaとUXPin – できること、できないこと appeared first on Studio by UXPin.

デザイナーは、ステークホルダーからのフィードバックや正確なユーザーテスト、デザインハンドオフのために、プロトタイプを改善する方法を常に模索しています。

Figma は素晴らしいデザインツールですが、プロトタイプ作成においてデザイナーは外部のツールを使っているというケースも多いのではないでしょうか。

一方UXPinには、UXPin – Copy. Paste. Prototype という Figmaのプラグイン があります。

デザイナーは、Figmaデザインを コピーしUXPinにペーストし、静的な Figmaのモックアップにインタラクティブ性を追加することができます。

今回は、Figmaプラグイン使い方とそのインストール方法を見ていきましょう。

主なポイント：

• UXPin の Figmaプラグインで、静的な Figma デザインを最終製品のように動作するインタラクティブなプロトタイプに変換することができる。
• プラグインの使用は無料だが、Figma へのインストールが必要。
• UXPin で［Command+V（またはControl+V）］をクリックすると、 Figmaデザイン を UXPin に貼り付けることができる。
• UXPinにデザインをコピーしたら、変数、Expression、状態などのインタラクションを追加できる。

静的な Figma のモックアップを、インタラクティブ機能が加わったデザインに変えてみませんか。

デザイナーとデベロッパーの連携を改善し、デザインのハンドオフ を簡単にしていきましょう。無料トライアルにぜひお申し込みください。

Figma とは

Figma は、主にインターフェースのデザインに使われるWebベースのデザインツールです。

Figmaでは同じプロジェクトに複数のデザイナーが同時に取り組むことができ、リアルタイムでの連携とフィードバックが可能です。

その使いやすさとパワフルな機能性、デザインプロセスを効率化することから、デザイナーやデザインチームに広く使われています。

Figmaを使えば、デザイナーは、さまざまな画面をリンクさせて UIデザインにインタラクティブ性を加えることができます。

しかし、これはユーザビリティテストやデザインのハンドオフにおいては最適なソリューションとは言えません。

そこで UXPinの出番です。手戻りや伝達ミスを避けるために、その盲点を補います。

Figma と UXPin の違い

Figma も UXPin も、コラボレーションを促進するデザインツールであり、Figmaはデザイナーに焦点を当て、UXPinはデザインと開発のギャップを埋めようとするものです。

Figmaでは、デザイナーは美しい静的なモックアップをデザインできますが、高度なプロトタイピング機能は十分ではありません。

デザイナーは、インタラクティブなプロトタイプ作成のために、追加のツールを使うか、エンジニアに頼らなければいけません。

対する UXPinはコードによって駆動され、最終製品のエクスペリエンスを正確に再現する忠実度が高く、完全に機能するプロトタイプを作成する機能を提供します。

UXPinを使うと、デザインチームはプロトタイプを作成する際にデザインをコードに変換するために複数のツールを使うことなく、デベロッパーにプロトタイプを渡すことができます。

また、UXPinの魅力的なポイントとしては、MUI、Ant Design、Bootstrap など、最終製品とまったく同じように見えて動作するオープンソースUIコンポーネントを扱う技術があるところです。

これを使えば、デザインとコード間での究極の一貫性が実現されます。UXPin Merge についてさらに読む

UXPinで Figmaのプラグイン を使ってUIをインタラクティブにする

UXPin はエンドツーエンドのデザインツールですが、ワイヤーフレームやモックアップを Figmaでデザインするが好きというデザイナーが多いのではないでしょうか。

そこで、UXPin – Copy. Paste. Prototype という、デザインチームが Figmaデザインを UXPinにエクスポートしてプロトタイプを作成できる Figmaのプラグイン を作成しました。

このガイドでは、Figmaをお使いの方向けに プラグインのインストール方法、UXPinでFigmaのデザインをインタラクティブにする方法、UXPinの高度でインタラクティブなプロトタイピング機能でできることを１つずつご説明します。

注： UXPin – Copy. Paste. Prototype は、Chromeブラウザ、または FigmaからUXPin デスクトップアプリケーションで使用する場合に最適です。

★ここでは、Moood Music App UI Kitsを使用します。これは制作者のFabrxのWebサイトからダウンロードできます。

ステップ１： Figmaプラグイン をインストールする

UXPin – Copy. Paste. Prototype のプラグインは、Figma のコミュニティにあります。［Try it out（試してみる）］をクリックしてインストールしてください。

ステップ２： Figmaデザイン をコピーする

Figma プロジェクトを開き、コピーしたい画面を選択します。その際、一回につき１画面をコピーすることをお勧めします。

フレームを選択するか、コピーしたいコンポーネントの周りにカーソルをドラッグします。

ステップ３：プラグインを有効にする

デザインを右クリックし、［Plugins（プラグイン）］ > ［Saved Plugins（保存したプラグイン）］ > ［UXPin – Copy. Paste. Prototype.］の順で行きます。

ちなみに Figma のデスクトップアプリでは、プラグインが自動的にコピーします。Chrome の場合は、コピー処理を始めるのに［Copy to Clipboard（クリップボードにコピー）］をクリックする必要があります。

それが完了すると、画面の下に「Copied to clipboard（クリップボードにコピーされました）」というメッセージが表示されます。

ステップ４：UXPin に貼り付ける

UXPin でプロジェクトを作成して開きます。

貼り付けのショートカットである［COMMAND+V］を使うか、右クリックの［Paste（貼り付け）＞［Paste Here（ここに貼り付け）］を使います。

必要に応じて、デザインをドラッグして配置します。

画面が複数ある場合は、新しいページを追加して、ステップ２と３を繰り返します。

注：Figmaでは、１つのアートボードまたはビューに複数の画面がありますが、UXPinでは、１ページにつき１画面を使います。

インタラクションやページ遷移を含むプロトタイプを作成すると、このワークフローがより直感的になることがわかるでしょう。

ステップ５: インタラクティビティを追加する

Figmaデザイン をインポートしたら、次は UXPin でインタラクティブなプロトタイプを作成します。

その際、UXPin のプロトタイピング機能を実演するアプリやパターンの例や、このアプリケーションの YouTube ビデオもあるので、ぜひ参考にしてみて下さい。

UXPin のプロトタイピング機能の例を以下で見てみましょう。

デスクトップのカルーセルの例では、アニメーションカルーセルを作成する方法が３つ示されており、１つは自動で、他の２つはクリック/タップのトリガーに依存しています。

UXPin の登録フォームの例では、デザイナーが（UXPinの変数を使って）ユーザーデータを取得し、それを（個別化された確認画面のように）プロトタイプの他の場所で使用する、完全に機能するフォームを作成する方法が示されています。

登録フォームは、ユーザーの入力に反応する動的なエラーメッセージのためにインタラクションと Expression の組み合わせを使います。

このステッパーの例では、標準的な Eコマースの UI パターンである「入力フィールド」と「インタラクティブボタン」の組み合わせ方が示されています。

ユーザーは、［＋］ボタンまたは［-］ボタンを使ってステップアップまたはステップダウンするか、入力フィールドを使ってカスタム金額を入力することができます。

つまり、エンジニアが HTML、CSS、Javascript でできることを 、デザインチームは UXPin でほとんど再現できるということです。

デザイナーは、IFTTT（If This, Then That）を使って API に接続し、画像ベースのデザインツールの機能を超えることができるのです。

ステップ６：プロトタイプをステークホルダーと共有する

デザインプロセスにおいて、ステークホルダーからのフィードバックは非常に重要ですが、画像ベースのプロトタイプは、ステークホルダーがデザインの解釈をめぐって争い、それがデザインチームのアイデアや賛同に悪影響を与えてしまうという問題点があります。

そこで UXPin のプロトタイプだと最終製品のように見えるので、デザインがすべきことについて混乱が生じることはなく、ステークホルダーは、UXPinのプロトタイプでフォームへの入力、購入、プランのアップグレード/ダウングレードなど色々と試すことができます。

また、デザイナーはプレビューと共有機能を使ってブラウザでプロトタイプを共有したり、UXPin Mirror を使ってモバイルアプリケーションを共有することができ、許可された人だけが閲覧できるようにデザインをパスワードで保護することもできます。

UXPin のコメントでは、ステークホルダーはプロトタイプに対するフィードバックを共有できます。

また、ステークホルダーはコメントをチームメンバーに割り当てることができ、チームメンバーはそのコメントを実行して完了したら「解決済み」としてマークすることができます。

そしてこのような無料でチームメンバーやステークホルダーを追加できるので、デザイナー以外のユーザー枠を追加で購入することなく、全員が UXPin で連携できます。

ステップ７：ユーザビリティテストの実施

ステークホルダーのフィードバックと同様に、デザイナーはブラウザでのテストには「Preview（プレビュー）」と「Share（共有）」を、ネイティブアプリのテストには「 UXPin Mirror 」を使うことができます。

また、UXPin の高度なプロトタイプを使うことで、デザインチームはユーザビリティの参加者から有意義で実用的なフィードバックを受け取り、それでより多くの問題と機会を特定することができます。

UXPin は、デザインにコンポーネントベースのアプローチを採用しています。つまり、デザイナーは、画像ベースのデザインツールのようにフレームを複数作成するのではなく、完全にインタラクティブなコンポーネントを作成します。

ステップ８：デザインハンドオフ

UXPinでは、デザインハンドオフがよりスムーズになることで混乱が抑えられます。

プロトタイプには最終製品のような見た目と感触があり、それでエンジニアはトリガー、インタラクション、アニメーション、ユーザー フローを深く理解することができます。

そしてデザイナーは、プロトタイプ、デザインファイル、ドキュメンテーション、アセット、技術仕様などをエンジニアに提供することができます。

最終製品のような機能性と忠実性を備えたプロトタイプだと、説明やドキュメント化の手間が省かれるのです。

また、チームメンバーはUXPinのコメント機能を使って、デザインハンドオフの全体にわたって共同作業を行うことができ、すべてを１ヶ所に保管し、エラーや「欠落」ファイルの発生を最小限に抑えられます。

完全にインタラクティブなプロトタイプの作成

UXPinのコードベースの機能により、デザイナーは Figma、Adobe XD、InVision などの画像ベースのデザインツールでできること以上のことができるようになります。

以下に、プロトタイプをレベルアップしてくれる UXPin 機能を５つご紹介します。

１．状態

多くのデザインツールにはコンポーネントの状態を変更する機能がありますが、アクティブ、ホバー、無効などの基本的なインタラクティブ機能に限られています。

UXPinの状態（state）では、デザイナーは、完全に機能するアコーディオン、マルチレベルのドロップダウンナビゲーション、カルーセルなどの複雑なコンポーネントを作成できます。

２．インタラクション

インタラクションは、プロトタイプやデジタル製品の心臓部であり、インタラクティブ性がなければ、プロトタイプの範囲は大きく制限されてしまいます。

UXPin のインタラクションには、複数のトリガー、アクション、アニメーションが含まれており、ユーザーのエンゲージメントやシステムの変化に反応する没入感のある体験を作り出します。

また、デザイナーは条件付きインタラクションを使って「if-then」や「if-else」条件（Javascriptの関数に似ている）をデザインし、ユーザーが最終的な製品を使って体験するような動的な「コードのような」結果を再現することができます。

３．変数

UXPinには、コードのようにユーザーの入力に反応するフォーム要素が用意されており、デザイナーは、UXPinのVariables（変数）を使ってユーザーの入力内容を取得し、そのデータをプロトタイプの別の場所で使うことができます。

上記のサインアップフォームの例では、プロトタイプはメール入力からデータを取得し、入力されたアドレスにメールが送られたことを伝え、受信トレイをチェックすることで、動的なユーザー情報を持つ典型的なサインアップ確認画面を正確に再現しています。

４．Expression

Expressionで、デザイナーはコードのような機能を使ってプロトタイプの複雑さを高めることができます。

登録フォームに話を戻すと、Expressionを使うことで、メールアドレスとパスワードの入力が特定の基準を満たしていることが確認され、基準を満たしていない場合にエラーメッセージがトリガーされるようになります。

デザイナーがExpressionで使えるデータには、以下のようなものがあります： 

• 数値：一致する数値
• 文字列：二重引用符で囲まれた文字 (例: “Text”)
• 要素の内容：一重引用符で囲まれた要素の内容 (例: ’Box’)
• 関数：サポートされている関数のいずれか (例: length(string))
• ブール値 ：真または偽の値

デザイナーがこういった機能を組み合わせれば、可能性は無限に広がります。

コードによってのみ制約されるため、プロトタイプ機能とデベロッパーの連携が強化されるのです。

５．コンポーネントのインポート

コードのインポートは、開発コンポーネントを UXPin と同期させる方法であり、生産性や一貫性の向上、エンジニアとの連携をより良いものにしたい方におすすめです。

また、このインポートを使うと、Git、Storybook、npm からコンポーネントを取り込むことができ、プロトタイプ作成からデザインのハンドオフまで、製品デザインプロセスのあらゆる段階をスピーディーに行うことができます。

画像ベースのデザインツールでプロトタイプの範囲を制限せず、UXPinでプロトタイプを改善し、ステークホルダーからのフィードバックとユーザーテストを改善しましょう。

世界最先端のデザインツールで、顧客にふさわしいユーザー体験をデザインしませんか。こちらから無料トライアルにぜひお申し込みください。

The post 【 Figmaのプラグイン 】 デザインをUXPinにコピー&ペースト appeared first on Studio by UXPin.

Figmaは、美しいモックアップを作成し、他のデザイナーとリアルタイムで連携するための素晴らしいツールです。

ポートフォリオを作成し、自分のスキルをアピールするのに最適なツールのひとつですが、大規模な組織の場合だと、デザインをコードに変換するのが難しいため、Figma では不十分かもしれません。

そこで UXPin の出番です。UXPin で、デザイナーとデベロッパーはコミュニケーションを図り、デザインから開発ワークフローにコピーできる UI コンポーネントの共有ライブラリを使えるようになります。

変換は必要ありません。Figmaプラグインを連携し、UXPinにデザインを取り込んで、より強固なプロトタイピングができるようにしました。

今すぐ無料トライアルにサインアップして、最初のUXPinプロトタイプを作成しましょう！

Figma でデザイン、UXPin でプロトタイプ

わかります。Figma でのデザインっていいですよね！でもUXPinでのプロトタイプが持つ 高い忠実度や機能性もいいですよね。このように迷われている方には、UXPinのFigmaプラグインをおすすめします。「Figmaでモックアップをデザイン、プロトタイプのためにUXPinにコピーする」という両方の長所が得られます。

このワークフローには両方の長所があり、チームが製品と状況に最適なソリューションを導入することを推奨していますが、UXPinを使えば１つのツールで完結します。

UXPinはデザインおよびプロトタイピング ツールとして効果的であり、画像ベースのツールで可能な範囲を超えて UXを広げる機能を提供しています。

UXPinとFigmaでプロトタイプを作成するのが理に適っている理由

Figma、Adobe XD、Sketch などは静的なベクター グラフィックをレンダリングするため、デザイナーはコードを複製できず、複製する場合は多大な労力や回避策、追加のツールが必要になります

UXPin はコードベースのデザインツールです。これは、デザイナーがコードを扱うという意味ではなく、UXPin は HTML、CSS、JavaScript をバックグラウンドでレンダリングして、デザイナーにコードと同じ忠実性と機能を提供するということです。

そして、コードによる以下の４つの機能により、デザイナーは UXPin でより高度なプロトタイプを作成することができます。

１．ステート（状態）

UXPin のステートでは、１つのコンポーネントに対して複数のステートを作成できます。例えば、ボタンはユーザーのインタラクションによってトリガーされるさまざまなプロパティを含む複数のステートを持つことができます。

また、機能的なドロップダウンメニュー、ステッパー、カルーセル、アコーディオンなどの複雑なコンポーネントを作成することもできます。

２．インタラクション

デザイナーは、デザインツールの制限ではなく、コードに制約された複雑なUXPin のインタラクションを作成できます。また、UXPinには、没入感のあるプロトタイプ体験をデザインするためのトリガー、アクション、アニメーションも多数あります。

デザインチームは、「if-then」や「if-else」条件の条件付きインタラクションによって、ユーザーの入力やトリガーに反応する動的なプロトタイプを作成できます。

そしてデザイナーは、この Javascript のようなインタラクティブ性により、デザインの決定が UXにどのような影響を与えるかを確認し、改善すべき点を突き止めることができます。

このような現実的な相互作用により、ステークホルダーとエンジニアには、より生産的なフィードバックのプロセスやデザインハンドオフにするための説明が殆ど要らなくなります。

３．バリアブル（変数）

Figmaなどの大抵のデザインツールでは、フォームをテストするのは不可能です。なぜか？フィールドが入力ではなく画像だからです。

その点 UXPin では、フォームフィールドはまるでエンジニアが開発したかのように機能し、テキスト入力、チェックボックス、ラジオ、セレクト/ドロップダウン、複数選択、ボタンをすぐに使えます。

バリアブル（変数）を使うと、デザイナーはプロトタイプからユーザ入力をキャプチャし、アプリケーションの他の場所でそのデータを使うことができます。

例えば、サインアップ中にユーザーの情報を取得したり、個別化されたウェルカムメッセージを作成するために名前フィールドを使ったりできます。

４．Expression

UXPin の Expressionで、他のデザインツールの可能性をはるかに超えるプロトタイプが実現します。

パスワードやその他のフォームフィールドの検証、ユーザーの操作に基づいて更新されるショッピング カートのデザイン、動的なエラー メッセージの作成などができます。

そしてデザイナーは、ステート、インタラクション、バリアブルなどの他の UXPin機能が組み合わさると、 Expressionによって、プロトタイプや、コードと見分けがつかないユーザーフローを構築できるようになります。

このような機能やその他の高度な UXPin機能についての詳細は、UXデザインのインフルエンサーであるジェシー・ショウォルター氏によるYouTube のチュートリアルでぜひご覧ください。

Figmaのモックアップをインタラクティブな UXPinプロトタイプにする５つの理由

１．高忠実度（Hi-Fi）プロトタイプ

• Figma：美しく見えるベクター・モックアップであるが、実際の機能性や忠実さは再現されないため、デベロッパーやステークホルダーにとってはプロトタイプの解釈が大変になる。
• UXPin：コードのような忠実性と機能により、デザイナーは最終製品と区別できない没入型の動的なプロトタイプの体験を作成できる。‐ つまり、ドキュメントが要らなくなり、デザインハンドオフがスムーズになり、市場投入までの時間が短縮される。

Figma、Sketch、Adobe XD などが作成するものである、忠実度の高いモックアップと、見た目も感触も最終製品と同じ高忠実度のプロトタイプとの間には大きな違いがあります。

UXPin だと、プロトタイプがコードのようにユーザーのインタラクションに応答するため、プロトタイプの説明がほとんどまたはまったく必要ない、真の高忠実度の結果がもたらされます。

２．UI デザインと本当のプロトタイプのギャップを埋める

• Figma：Figma で UI デザインのアイデアをデザインおよび開発する。
• UXPin：Figma の限界を超え、UXPin で高度なプロトタイプを作成する。

Figma には、美しいデザインやモックアップを作成するための機能が備わっていますが、デザイナーはプロトタイプの段階で壁にぶつかってしまいます。

そこで UXPin の Figmaプラグインで、デザインチームは UXPin で忠実度の高いプロトタイプを作成するのに、両方のツールの長所を活用することができます。

UXPinでUIデザインの変更と反復を行うか、デザインと編集にFigmaを使って、プロトタイピングツールとしてのみ使うのかは、お任せします！

３．ユーザーテストの強化

• Figma：テストは基本的なクリック／タップのインタラクション、ユーザーフロー、ナビゲーションに限定される。
• UXPin：最終製品を正確に再現する没入型プロトタイプ

Figma のベクターベースの制約と限界は、正確なテストの妨げになります。デザイナーは、は基本的な対話性を実現するために複数のフレームを使わなければならず、多くのコンポーネントは再現できません。

一方、コードベースのデザインツールである UXPin を使うと、デザイナーはコードを１行も書くことなく、デベロッパーが構築できるものの実現可能性がある制限されたプロトタイプを構築できます。このような複雑で動的なプロトタイプで、UXは向上し、デザインチームはビジネスチャンスを特定するための貴重なインサイト得られます。

また、デザイナーは、UXPin プロトタイプを使ってテストするときに、重要なユーザビリティとアクセシビリティの問題も正確に指摘することから、それで UX負債が減り、より高品質なデザインプロジェクトの成果が得られます。

４．より速い反復（イテレーション）

• Figma：最終製品の動作を模倣するための複数のフレームとコンポーネント – 変更や再デザインは時間を食う。
• UXPin：レイヤーとステートを１つの画面で使い、数回のクリックで変更が可能。

Figma でのプロトタイプの課題の１つに、デザイナーが、コードのインタラクティブ性を模倣するのに複数のフレームやコンポーネントを作成しないといけないという点があります。またそのインタラクションは、ぎこちなく、直感的ではない上に、デザインや変更には時間がかかります。

UXPin では、デザイナーは「ページ」と「レイヤー」で作業します。複数のフレームやページを切り替える代わりに、１つのキャンバス上で作業し、プロパティパネルで変更を加えます。

また、このワークフローは、より直感的で、より速い反復を促進することから、デザイナーはより速く問題を解決することができます。

５．より円滑なデザインハンドオフ

• Figma：多くのドキュメント、デベロッパーとのやり取り、インタラクションを模倣したビデオ/GIF、他のツールへのリンク。
• UXPin：プロトタイプは最終製品のエクスペリエンスとインタラクティブ性を再現し、それによって長いドキュメントや追加ツールの必要性が軽減される。

デザイナーは、After Effectsなどのツールを使ってモーションやインタラクションを再現することが多いです。なぜか？デザインツールには忠実さと機能性がないからです。また、デザイナーは技術的な制約のためにエンジニアが再現できないトランジションやインタラクションを作成しますが、その際に複数のツールやファイルを切り替えるのは、混乱を招き、時間がかかり、エラーが増えます。

UXPin を使えば、コードを正確に模倣したコンポーネントやインタラクションをデザインできるので、デザイナーは追加のツールを使う必要がありません。また、プロトタイプが何をするものかを説明するためのビデオや GIF、行ったり来たりのやり取り、長ったらしい PDF は必要ありません。

そして、デザイナーは UXPin でプロトタイプに注釈を加えたドキュメントを作成できるため、エンジニアやステークホルダーは複数のファイルを切り替える必要はありません ‐ すべて一箇所に集約されています！それでデベロッパーやステークホルダーは、UXPinのプレビュー上のコメント機能を使って、質問したり、チームメンバーをタグ付けしたり、編集用のコメントを割り当てることができます。

現実的なプロトタイプやサポート用ドキュメント、連携が一箇所にあるため、デザインハンドオフがよりスムーズになってより摩擦が少ないものになります。

UXPin – エンドツーエンドのデザインソリューション

Figma でデザインし、UXPin でプロトタイプを作成することはできますが、それは、ツールが１つしか要らないのに２つ使うということになります！

UXPinの場合、コラボレーション、ワイヤーフレーム作成、情報アーキテクチャデザイン、モックアップ、ゼロからのコンポーネントデザインなど、Figmaと同等のデザイン体験を得られます！

UXPin のエンドツーエンドのデザインソリューションでは、デザインシステムの構築、管理、共有など、UXPin 内ですべて行うことができるため、デザイナーはツールを切り替える必要がありません。

そして使うツールが減ると、UX ワークフローが効率化されるだけでなく、コストが削減され、デザインリーダーは貴重なリソースを他に当てることができるようになります。

また、ステークホルダーに画像ベースのプロトタイプとそれに付随するドキュメントを読み解く時間や忍耐力がほとんどなくても、UXPin のプロトタイプは説明が少なくて済むため、ステークホルダーは最終的な製品体験を楽しむことができます。

そしてこの没入型体験は、デザインソリューションへの賛同を高めながら、ステークホルダーから有意義なフィードバックを引き出してくれます。

画像ベースのデザインの制限に別れを告げ、UXPinを使ってプロトタイプ、連携、デザインの成果上げませんか。

無料トライアルにサインアップして、UXPin がどのように製品デザインのワークフローに革命を起こして優れたUXを提供できるかをぜひご覧ください。

The post Figmaのデザイン をインタラクティブなプロトタイプに変える appeared first on Studio by UXPin.

この新しいプラン「Merge AI」は、再利用可能なUIパターンのアクセシビリティとAIを活用したインタラクティブなプロトタイピングを求める開発者や多くのチームにとって、画期的なソリューションになることでしょう。

あるProductHunt Launchのレビュアーは、UXPinをプロダクトデザインの「Apple」と呼びました。

Appleは革新性、創造性、未来性を象徴していますが、これらは私たちにとっても重要な価値観でもあります。

新プラン「Merge AI 」では、多くのチームでのデザイン民主化を目的としています。

ついに、品質と一貫性を損なうことなく、インターフェースを速やかに作成できるようになりました。

本記事では、この新しいプランで提供される内容を詳しく見ていきますので、ぜひ Merge AI をお試しください。

Merge AI を体験してみませんか？ここで紹介する機能はすべてトライアルでご利用いただけます。

UXPin Mergeをぜひ無料でお試しください。

４つの ビルトインMergeライブラリ

– Production Ready コードでバックアップ –

統一感を出すためにボタンを描き直さないといけないことがあったことを覚えていますか？

Merge AIを使えば、MUIv5、React Bootstrap、Ant design（React ベースのライブラリ）や Tailwind UI（HTMLのみです）のようなインターフェースのレイアウトを構築するためのトップクラスのオープンソースライブラリから提供される、完全にコード化された４つのコンポーネントにアクセスすることができます。そのため、かつてのように再描写する必要はもうありません！

ライブラリを選択し、そのコンポーネントをキャンバスに配置すれば、ベクターベースのツールよりも８.６倍速くレイアウトを構築できるのです。（検証すみ）

とはいえ、ここで最も重要なのは、UI コンポーネントがすべてコードでバックアップされているため、デベロッパーの環境に合わせてデザインを作り直す心配がないという点です。

追加されたもの

MUIv5、React Bootstrap、Ant design、Tailwind UI

やり方

• UXPinを開く

• 新しいプロトタイプを作成する

• Design System Libraries （デザインシステムライブラリ）に進む

• Merge のライブラリを選択する

事前構築済みのレイアウトとパターンの使用

新プランの Merge AI では、ECの商品ページ、チェックアウト、社内アプリなど、最もよく使われているレイアウトにアクセスできます。

そのテンプレートは自分のものになるので、編集や、要素を追加したり、テーマ切り替えなどができます。

また、レイアウトはすぐに使えるコードで裏打ちされており、オープンソースのライブラリコンポーネントを使って構築されています。

そのため、使いたいコンポーネントライブラリの一貫性を保ちながら、調整も加えることができます。

追加されたもの

完全にコード化されたインタラクティブなレイアウトとパターン

やり方

• UXPin を開く

• プロジェクトが表示されるまで下にスクロールする

• レイアウトを選び、そのコードをコピーする

ChatGPT向けの AI Component Creator 

生産性を上げる最大のものの一つとして最近は ChatGPT がありますが、OpenAI APIを介した統合により、プロンプトでTailwind CSSコンポーネントを生成することができるようになりました。

また、データレポート、サインアップフォーム、ショッピングカードなど、HTMLが裏側の複雑なコンポーネントを生成し、完全にカスタマイズすることができます。

追加されたもの

AIコンポーネントクリエーター（AI Component Creator）

やり方

• 新しいプロトタイプを作成する（UXPinにサインアップする）

• 「Quick Tools（クイックツール）」バーに移動する

• 「AI Component Creator（AIコンポーネントクリエーター）」を開く

• OpenAI API キーを貼り付ける

• プロンプトを書く

UXPin と StackBlitz の統合

StackBlitz は、Webブラウザから直接Webアプリケーションの作成、共有、共同作業をシンプルにする開発環境です。

そこで、ユーザーがデザインをコードとして StackBlitz で開くことができる統合を構築しました。

追加されたもの

コードのエクスポートがしやすくなるStackblitz統合

やり方

• ブラウザでプロトタイプを開く

• 「Preview Prototype（プロトタイプのプレビュー） 」をクリックする

• 「Spec mode（Specモード）」に移動する

• 「Copy to Stackblitz（Stackblitz にコピー）」をクリックする

クリーンで動作するコードをUI からエクスポートする

以前、ある ProductHunter からUXPinは「デザインからコードへのGoogle翻訳機」と呼ばれたことがありましたが、それがとても印象的でした。

UXPin Merge では、ベクターコンポーネントではなく、コード化されたコンポーネントが使われているため、コンポーネントの背後にあるコードをコピーできるのは当然です。

そして今、 ワンクリックでプロトタイプ全体のコードをコピーできるようになりました。

当社は Reactベースのコンポーネントライブラリに対応しているため、独自のコンポーネントライブラリをお持ちの場合は、弊社が統合作業を行いますので、ぜひこちらからお気軽にお問い合わせください。

追加されたもの

コードのエクスポート

やり方

• ブラウザでプロトタイプを開く

• 「Preview Prototype（プロトタイプのプレビュー）」をクリックする

• 「Spec mode（スペックモード）」に移動する

• 「Copy code （コードをコピーする）」をクリックする

Merge AI を無料でお試し

長い間UXPinをご利用いただき、その変遷を見守っていただきありがとうございます。

UXPin はペーパープロトタイピングツールから始まり、オールインワンデザインツール、そして「Code-to-Design（コードからデザイン）」のファシリテーターとなりました。

今回のリリースは、製品開発プロセスにおいて、さらに短時間で MVP（実用最小限の製品）を構築できるようになりましたので、特別なアップデートになりました。

UXPin Merge AI をせひ無料でお試し下さい。

The post 新プラン「 Merge AI 」| 詳細とアップデート情報 appeared first on Studio by UXPin.

弊社はこの数ヶ月の間、新機能の開発に取り組んできました。そして、みなさまのおかげさまで、ついにそれをお見せする時がきました。

この記事では、さらに進化したUXPin Mergeに関する 最新アップデート情報をご紹介していきますので、開発者やデザイナー、デザインチームに所属の方など、ぜひ最後までご覧ください！

UXPinの進化

製品のアップデートをご紹介する前に、UXPinの誕生秘話をお話しさせてください。

弊社「UXPin」のツールは、イノベーションへの情熱と、デザインを多くの人にとって身近なものにしたいという強い思いから開発しました。

プロトタイピングを普及させ、デザインのアイデアを素早く構想するための一般的な概念にすることを目的に、紙のプロトタイピング用メモ帳として始まりました。

​​そして、２０１１年頃、デジタルワイヤーフレームのソリューションを開発しました。

当時このタイプのデザイン作業には限界がありましたが、UXPinはデザイン開発での欠点を改善するべく、デザイン以外のチームメイトとのより良い連携、迅速なイテレーション（反復）への挑戦など、新たな利点を取り入れたソリューションを生み出しました。

UXPinは当初からデザインプロセスの改革を目指していくなかで、ピクセルで操作する代わりに、コードで裏付けする形にこだわり続けました。

また、単純なモックアップに焦点を当てるのではなく、高度でインタラクティブなプロトタイプを構築する機能をユーザーに提供するために開発しました。

デザインハンドオフを後回しにするという「お決まりルート」ではなく、最初からデザインプロセスに融合させました。

これは、Spec （スペック）モードのような環境を作ったことにより、開発者はプロパティの検証や距離の測定、デザインから生成されたスタイルガイドを取り組むことができ流様になりました。

ここでUXPinの技術発展は終わらず、次のステップとして、チームが「信頼できる唯一の情報源（コード化されたUIコンポーネント）」を共有することで、デザインと開発の間のギャップを埋めることを目指しました。

そこで、誕生したのが UXPin Mergeという独自のデザイン技術です。

そして今、UXPinはさらに多くの人にとって包括的なデザイン環境を広めていきたいと考えています。

変化への道のり

この道のりは、開発者がデザイナーの代わりにUIを作成しなければならない場面がよくあるという重大な気づきから始まりました。

ユーザーと話した結果、UXPin Mergeは、デザインにアクセスできるようにし、デザインの新時代を告げる上で重要な役割を果たすことがわかりました。

つまり、デザインと開発の両方を 1 つの一貫したプロセスに統合できるものであるということです。

最も人気のあるコード化されたコンポーネントライブラリであるMUI、Ant Design、Bootstrap、Tailwind UIを皮切りに、UXPin Mergeをドラッグ＆ドロップのUIビルダーへと進化させました。

UXPin Merge 最新アップデート：ドラッグ＆ドロップでコードを書き出せるUIビルダー

私たちが掲げるミッションを達成すべく、この度、製品開発プロセスがもっと簡単になるために次のような機能を導入しました。

それでは、ひとつずつ見ていきましょう

AI Component Creator

AIを組み込むことを決めた理由は、AIによって多くの環境で生産性、作業効率、そして UIとコードの世界、つまり製品開発が改善されることが証明されたからです。

内蔵されたChatGPT統合によって、使用するプロンプトに基づいた完全にカスタマイズ可能なコンポーネントをAIを生成することができます。

必要なコンポーネントを記述するだけで、数秒でキャンバス上に表示されます。再利用や共有が必要な場合は、「UXPinパターン」として保存しましょう。

AI Component Creator は画面左側にあります。下のGIFを参照ください。

現在では、Tailwindコンポーネントライブラリと連動してます。（こちらについては別の記事で詳しくお話します）

これは、Tailwind UI ライブラリを補完するカスタムコンポーネントを入手するための優れた機能です。AI Component Creatorは入力フォーム、メニュー、モーダルなどの完全にコード化されたコンポーネントを生成します。

そしてデザインが完了すれば、プロトタイプから実用的なコードをコピぺするだけで、製品開発のフェーズに入れます。

プラグインには OpenAIのAPI キーが必要ですが、そちらのサポート体制は整っていますのでご安心ください。

プラグインへのお問い合わせについては、UXPinのサポートチーム (salesjp@uxpin.com) にご連絡ください。

オープンソースのコンポーネントライブラリ

新しいUIライブラリが追加され、デザインと開発の間で１００%コードパリティを利用できるようになりました。

このリリースには、MUIv5、Ant Design、React Bootstrap、 Tailwind UI という、テーマ化やカスタマイズがきちんとできて、要素は変換なしで開発環境にコピぺできる強力な UIライブラリが４つも含まれています。

コードはオープンソースのライブラリから提供されているので、自分がそのコードの所有者になります。

そのため、コード全体をコピーしてUXPin Mergeの外部でも使うことができます。

UXPin Mergeは、UIやコードを探索するための安全なデザイン環境を提供するだけであって、当社のツールありきのコードではないということです。

１．Tailwind UI

UXPinで利用可能な Tailwind UI コンポーネントのライブラリがすべて加わります。

Tailwind は再利用可能な CSSコードの最良の選択肢の一つであり、ゼロから始める必要なく洗練されたフロントエンドをサッと構築したい人にピッタリです。

UXPinで Tailwind ライブラリを開き、必要なコンポーネントを選びます。プロップを調整してSpec Modeモードに移動し、ワンクリックでデザインからコードをコピーする という形になります。

これには、ボタン、アラート、入力、アバターグループ、ドロップダウンなどコンポーネントが１８種含まれています。

さらに、AI Component Creator を使う場合でも、ライブラリの「カスタム コンポーネント」オプションを使用する場合でも、ユーザーには、カスタム Tailwind コンポーネント追加の選択肢があります。

また、カスタムコンポーネントを使えば、Tailwind UI のどのコードでもUXPinに貼り付けることができます。

例えば、ヒーローセクションが欲しいとします。

その場合、Tailwind UI > Components（コンポーネント） > Marketing（マーケティング） > Hero Sections（ヒーローセクション）に移動し（クイックリンクはこちら）、右側のアイコンをクリックしてコードをコピーします。

そして UXPinの Tailwind ライブラリ に移動し、「Custom component（カスタムコンポーネント）」という名前の最初のコンポーネントをクリックします。

コードを貼り付けて、ヒーローセクションがキャンバスにドロップされる様子をご覧ください。

さらに、ユーザーはこの統合があれば、以下のようにテーマを設定することができます：

• プロトタイプ全体にテーマを伝播させるためのGLOBAL THEME（グローバルテーマ）プロパティ

• 特定のページでのみテーマを変更するLOCAL THEME（ローカルテーマ）プロパティ

Tailwind の詳細については、ヘルプドキュメントをご覧ください。

２．MUIv5

UXPin のもう一つの新しいビルトインライブラリは MUIv5 です。

無料トライアルがあり、チュートリアルと実際に機能するレイアウトを提供しています。

Tailwind と同様、ビルトインライブラリから好きなコンポーネントを取り込んでキャンバスに配置し、プロパティを調整してコードをコピーするだけです。

MUIv5 は、多くのチームでデザインシステムとして使われている Reactライブラリです。

UXPin を使えば、２つの環境を常に更新することなく、一貫したUIを手に入れることができます。

• ワンクリックでドキュメントにアクセス – コンポーネントをキャンバス上に配置してそれをクリックすると、［Properties panel（プロパティパネル）］にリンクされている公式ドキュメントをプレビューできる。

• ユニークなデザインにすべくテーマを切り替え – MUIv5 は完全にテーマ化可能で、使いたいテーマに合わせて更新することができる。

• 同じ要素を何度もデザインし直さなくていい – 大抵のデザインツールはコンポーネントの外観を一貫したものに保つが、当社ではそれより一歩進んで、コンポーネントの状態もライブラリに組み込まれる。

このライブラリ（他のライブラリ含む）のアップデートにおいての魅力ポイントとしては、使用する各コンポーネントの背後にクリーンなコードが含まれていることです。

他のデザインツールとは違って、開発環境で使用できるようにコンポーネントを変換する必要がないのです。

MUIv5 のライブラリコンポーネントの使い方は以下の記事をご覧下さい：【React向け】 ダッシュボード デザインのチュートリアル

デザインで MUIv5 を使いこなせるようになるために、ぜひこちらの動画をご覧ください。最初のエピソードはこちら。

３．Antd (Ant Design)

このリリースには Ant Designも含まれています。

Ant Design は React のコンポーネントライブラリで、UXPin の他のライブラリと同様にドラッグ＆ドロップで動作します。

使いたいコンポーネントを検索し、それをデザインで使い、公式ドキュメントと完全に一致するクリーンなコードをコピーします。

もしチームがデザインシステムをお探しなら、Antd が React のコンポーネントライブラリのベースになります。

UXPin に含まれるコンポーネントには、アバター、パンくずリスト、カード、入力がありますが、レイアウトの構築、アラートなどのフィードバックを追加、ナビゲーション向けの要素もあります。

これらも無料トライアルでお試しいただけます。UXPin Merge にサインアップする。

４．React Bootstrap

UXPin Merge には React Bootstrap も統合されています。

Bootstrap は、MUI に次いで最もよく使われているオープンソースの React のコンポーネントライブラリの１つで、デザインシステムの基盤を形成しています。

Editorの［Design Systems Libraries（デザインシステムライブラリ）］に移動して、React Bootstrap を選ぶだけで、Bootstrap の公式ドキュメントと完全に一致する数多くのビルトインコンポーネントを探索できます。

キャンバス上に React Bootstrap のコンポーネントをドラッグ＆ドロップして、プロップを管理し、レイアウトを配置して、［Spec（スペック）モード］でコードをコピーします。

気になった方には、React Bootstrap にはトライアルがあるので、独自のトライアルキットでお試しいただけます。

Reactライブラリを始めてみませんか。UXPin Merge の無料お試しはこちら。

テンプレート

真っ白なキャンバスではアイデアも浮かびづらいです。今回のリリースにはカスタマイズ可能なテンプレートが多数 用意 さ れて います。

ユースケースに合ったレイアウトを選び、好きなように編集し、自分自身の UI として形にしてください。

テンプレートは UXPinだけのものではなく、コード化されたコンポーネントと同様に、要素の背後にあるコードをコピーして、自社（オリジナルの）製品を構築するのに使うことができます。

そして、上記の MUIv5 コンポーネントライブラリを使用してテンプレートを作りました。

このテンプレートは公式ドキュメントに基づいて、クリーンな React コードが含まれており、UXPin Mergeの優れた機能を表します。

テンプレートに含まれるものの紹介

ダッシュボード

活動チャート、注文履歴、販売レポート、検索バーを備えた本格的な UI ダッシュボードのテンプレートを取得する：内部用ツールに最適。

ブログ

記事構成、画像、著者アバター、タグ、パンくずを備えたブログ用のレイアウトを使う。

ストア

ストアテンプレートをコピーして独自のコンテンツで画像を入力したり、タグ名の調整、価格の編集、独自のランキングの追加をする。

商品詳細

画像、星評価、価格変更などの UI 要素を含む商品カードを編集する。

チェックアウト

チェックアウトページで遊び、商品のニーズに合わせて個別化し、その後ろにあるコードをコピーする。

Specモードの改善（ベータ版）

Specモードもリニューアルしました。 現時点では MUIv5 ライブラリで利用できますが、後に完全なリリースが行われる予定です。

UXPin のSpecモードは、仕様、アセット、HTML、CSS、JSX コードをデベロッパーがコピーできるようにする機能です。

MUIv5 コンポーネントを使用してプロトタイプを作成する場合、Specモードの追加機能があります。以下で見てみましょう。

Stackblitzの統合

ボタンをクリックするだけで、ユーザーは人気のフロント開発環境である Stackblitz にコードをコピーすることができる。

公式ドキュメントと完全に一致するクリーンなReactコード

デベロッパーの環境にコピーしたり、利用可能な統合機能のいずれかを使用できるクリーンな作業コードを取得できる。

リサイズ可能なスペックパネル

固定サイズではなく、ユーザーがスペックパネルのサイズを変更できる。

折りたたみ可能なコードセクション

不要なセクションを折りたたむことができる、小さいが強力なユーザビリティの改善。

JSON Tree Viewer

JSON コードエディタの使いやすいバージョンである JSON Tree Viewer がリリースされます。

ユーザーはノードを広げたり折りたたんだり、データ内を簡単に移動したり、視覚的に変更を加えることができます。

また、JSON5 のフォーマットにも対応していますので、キーに二重引用符を使う必要はありません。

JSON Tree Viewer の使い方はヘルプをご覧ください。

UXPin Merge を始めよう

この戦略的転換により、デベロッパーが素晴らしい UI を作成できる未来が期待され、UXPin Mergeとデザインコミュニティ全体にとって新たな時代がやって来ます。

ぜひお試しいただき、TwitterでUXPin Mergeの新しいアップデートについての感想をお聞かせください。

もう一つの大きなニュースは、このような機能をすべて含む新しい料金プランの登場です。

Merge AI

Merge AIは、UXPin Merge テクノロジー、AI Component Creator、コードエクスポートをフルに使いたい方向けのオプションです。UXPin Merge をぜひ無料でお試しください。

すでにReact ベースのコンポーネントライブラリをお持ちの場合は、独自のコードコンポーネントを使ってデザインを続けられるように統合することができます。

Merge AIプランについての詳細はこちらのブログをご覧ください。

無料デモをご希望の方はこちらからご相談ください。

The post 【製品最新ニュース】UXPin Mergeでデザインビジョンを実現する appeared first on Studio by UXPin.

Adobe XD の代替ソフトの多さに圧倒されている方もいるのではないでしょうか？既存のワークスペースにコピーするのではなく、Adobe XD でのアップグレードをお探しですか？

本記事で、UXPinが最高のAdobe XD の代替ツールである理由と、コードベースのデザインプラットフォームを使用するメリットをご紹介します。

また、UXPin Mergeが、デザイナーとエンジニアのギャップをどのように埋めるのかをお話しし、デザインシステムのための「信頼できる唯一の情報源（Single source of truth）」を作成する方法についてもご紹介します。

主なポイント：

• Adobe XD は著名なベクターベースのデザインツールであったが、そのスタンドアロンバージョンは、新規購入者向けにはもう提供されていない。
• Adobe XD の代替案を探す際には、直感的な UI、プロトタイピング機能、デザインシステム、コラボレーション機能、費用対効果などを考慮すべきである。
• UXPin Merge は、従来のベクターベースのツールよりも高度なコードベースのデザイン機能があることから、優れた選択肢になる。
• 多くの Adobe XD 代替製品とは異なり、UXPin Merge は製品開発全般にわたる課題に対応することから、全ステークホルダーへのワークフローが効率化される。

デザインチームと開発チームを、プロトタイプ、デザインハンドオフ、アプリ開発の各段階で使用できるコード化されたコンポーネントである「信頼できる唯一の情報源（Single source of truth）」でつなぎませんか。詳しくはUXPin Mergeをぜひご覧ください。

Adobe XD とは

Adobe XD は、Adobe が開発および保全するベクターベースの UI/UX デザインソフトウェアであり、デザイナーがワイヤーフレーム、モックアップ、プロトタイプを作成するためのエンドツーエンドのソリューションです。

その注目すべき機能には以下のようなものがあります：

• ベクターデザインとドローイングツール： Adobe XD で、複雑なベクターデザインの作成と編集ができるようになり、ディスプレイのサイズに関係なくシャープな出力が保証される。
• リピートグリッド： デザインプロセスを効率化する機能。デザイナーは、リストやフォトギャラリーなどの要素を数回のクリックで複製できるため、面倒な反復作業が軽減される。
• プロトタイプ： デザイナーはアートボードをリンクし、アニメーションやマイクロインタラクションを追加してインタラクティブ性を模倣できる。
• 音声デザイン： Adobe XD は音声コマンドに対応してしていることから、音声UI のデザインや音声トリガーの統合ができる。
• レスポンシブなリサイズ： さまざまな画面サイズに合わせて要素を自動的に調整し、サイズを変更することで、あらゆるデバイスでデザインが確実に美しく見えることが保証される。
• デザインシステム： 現代のデジタル製品設計に欠かせない機能。デザイナーとエンジニアの間のギャップを埋めるかを基準に、デザインシステムの機能性を評価します。
• コラボレーションツール： Adobe XD は、デザイナーのためだけのものではなく、アプリ内のコラボレーションツールで、チームでリアルタイムにコメント、共有、共同編集ができる。
• 統合機能： 他の Adobe Suite アプリケーションや一部のサードパーティツールとシームレスに統合し、プロトタイプと最終製品のギャップを埋める。

Adobe XD はサービス終了？

SNS上の憶測に反して、Adobe は Adobe XDを廃止したわけではありません。新規購入者向けの単独のアプリケーションとしての提供は終了しましたが、既存顧客のサポートは継続されます。また、新規で Adobe XD にアクセスするには、Adobe Creative Cloud All Apps サブスクリプションの購入が必要です。

Adobe XD の代替製品での注目点

もしコアな Adobe XD ユーザーでしたら、同等かそれ以上のデザインツールを求めるはずです。ここでは、その際に欠かせない点を挙げてみましょう：

• ユーザーに優しい UI： デザインツールは複雑ではなく、シンプルなものであるべきであり、直感的なインターフェースは、デザインプロセスのスピードを上げ、習得しやすく、効率を上げるものである。
  
  
• プロトタイピング機能：
  • リアルタイムでのプレビュー： デザインの変更をリアルタイムで確認できる。
  • インタラクティブなプロトタイプ： インタラクティブな要素、マイクロインタラクション、アニメーションでプロトタイプに命が吹き込まれる。
  • 応答性： ツールは、最小限の労力でデザインの複数のビューポートを作成できないといけない。
    
• デザインシステム： 現代のデジタル製品のデザインに欠かせない機能であり、デザイナーとエンジニアの間のギャップを埋める能力によって、デザインシステムの機能を評価する。
  
• コラボレーション機能：
  • コメント： デザインについて直接意見を述べる。
  • 共有： プロトタイプを配布してフィードバックを得る。
  • リアルタイムのコラボレーション（連携）： 統合されたチャット機能により、デザイン チームはワークスペースを離れることなく連携できる。
    
• デザインハンドオフ： シームレスな移行は、デザインチームと開発チーム間の行き来を抑制することから、正確なスペック、アセット、コードスニペットを生成するツールを探すべきである。
  
• プラットフォーム統合： 統合機能により、アプリケーション間のジャグリングが減り、統一されたワークフローが促進される。
  
• 費用対効果： 優れたデザインツールだと予算は圧迫されない。高額でないが強固な機能があるソリューションを選ぶことで、かかる費用に見合った価値が確保される。

Adobe XDに代わるもの

Adobe XD、Figma、InVision のようなベクターベースのツールが長年デザインシーンを引っ張ってきましたが、UXPin のようなコードベースのプラットフォームへの顕著な移行が見られます。

UXPin Merge のテクノロジーにより、デザイナーは基本的なプロトタイプを超え、最終製品のように見える高度なコードベースのレプリカを作成することができます。また、Merge とコードベースのデザイン プラットフォームを使用する利点には次のようなものがあります：

• リアルでインタラクティブなプロトタイプ： UXPin のようなコードベースのツールは、最終製品をミラーリングし、それでデザイナーは、テストから高品質のインサイトを得ることができる。
• 動的要素： ベクターベースのツールの静的要素とは異なり、UXPin にはステート、スタイリング、ロジック、実データを持つライブコードの UI コンポーネントがある。
• シームレスなハンドオフ： デザイナーとデベロッパーは Merge を介してコードに基づいて同じ言語で会話し、それによってシームレスなハンドオフおよび少ない修正でよりスムーズなワークフローができる。
• 優れたパフォーマンス：Merge コンポーネントには、遅れや途切れのない複雑なインタラクションとアニメーションがあり、最終製品のエクスペリエンスを正確に再現する。
• デスクトップおよび Web アプリケーション： デザイナーは UXPin のデスクトップアプリケーションをオフライン（Windows および MacOS）または Web アプリケーションで使用でき、どちらの環境でも同等の UX（ユーザーエクスペリエンス）を得られる。
• すべての機能を内蔵: UXPin は、コンセプトから最終的な納品まで、デザイナーに必要な機能が全て備わったフルスタックデザインツールであり、プラグイン、エクステンション、その他のサードパーティ製アプリやサブスクリプションは必要ない。

UXPin の プロトタイプでの使用法

Merge は、UXPin のようなデザイナー向けのロゴブロックで、ドラッグ＆ドロップのプロトタイプ環境を作成します。また、各コンポーネントには、スタイリング、インタラクティブ性、コンテンツ、その他のプロパティがデザインシステムのレポジトリからプログラムされており、プロトタイプを始められる状態になっています。

そしてデザイン システム チームは、デザイナーがプロトタイプをより迅速に構築できるように、画面テンプレートを完成させるための基本的な UI 要素を含めることができます。また、接続がある API コンポーネントは、どれもデザイナーが UXPin で使うことができます。

デザイナーは、デザインシステムチームが React props（または Storybook統合のArgs）を使うことによって、テキストスタイル、サイズ、色、インタラクティブ性などのコンポーネントプロパティにアクセスできるようになります。

そしてデザイナーは、UXPin のデザインシステムライブラリからコンポーネントを取得し、プロパティパネルでそのプロパティを調整します。また、JSXモードに切り替えて、コードの表示や変更を行うこともできます。

MergeによるUXPinのテスト

このような完全にインタラクティブなプロトタイプで、プロトタイプの幅が広がり、それでデザイナーは、通常はデベロッパーからの技術的なインプットが必要な、複雑なインターフェースやユーザーフローの構築やテストができるようになります。

また、デザイナーは、プレビューと共有 のや UXPin Mirror の機能を使って、ブラウザ上でプロトタイプをテストでき、ステークホルダーにプロトタイプを表示するためのリンクを送信したり、UXPin のコメント機能を使って注釈を付けてフィードバックを共有したりできます。

「当社のステークホルダーは、UXPin を使ってとても早くフィードバックをしてくれます。 彼らにリンクを送れば、それで彼らは好きな時にプロトタイプを試し、UXPin を使ってプロトタイプに直接コメントを残してくれます。 UXPin のコメント機能は、コメントに対処したらフォローして「解決済み」としてマークできるので、素晴らしいです。」 エリカ・ライダー、プロダクト、UX、および DesignOps のソート リーダー。

デザインハンドオフでUXPinを活用するには？

Adobe UX やその他のベクターベースのデザインツールを使ったデザインハンドオフは、とても大変であることで知られており、多くの場合は摩擦を伴い、デザイナーがデベロッパーにモックアップやプロトタイプを説明しようとしたり、デベロッパーがデザインチームに技術的な制限を説明しようとしたりすることが多くなります。

UXPin Merge のテクノロジーだと、チームと部署がそれぞれまったく同じレポジトリからまったく同じコンポーネントライブラリを使うため、デザインから開発への移行がスムーズになります。そしてこの「信頼できる唯一の情報源（Single source of truth）」は、デザインハンドオフに必要な文書や説明が少なくて済むということになります。

エンジニアは、コンポーネントのレポジトリをプロジェクトにインポートして UXPin からインターフェースをコピーし、props または Args を使って同じコンポーネントプロパティを適用するだけです。

UXPinのデザインシステムでの使用法

UXPin には、デザインシステムの構築から、デザイナーとエンジニアが同じコンポーネントを使う Mergeテクノロジーを使った完全に統合されたUIライブラリまで、あらゆる成熟段階に対応するデザインシステムソリューションがあります。

Merge で、組織はレポジトリから UXPin のデザインエディタにUIライブラリを同期できるようになり、デザイナーは、デベロッパーが最終製品を開発するのと同じデザインシステムのコンポーネントを、デザインプロセスで使用できるようになります。

また、レポジトリへの変更は自動的に UXPin にプッシュされ、最新リリースがチームに通知されます。そして UXPin のバージョン管理では、デザイナーが新しいリリースに切り替えるタイミングを決めることができ、いつでも以前のバージョンに戻すことができます。

デザインシステムに対するこのコードベースのアプローチで、組織は本物の「信頼できる唯一の情報源（Single source of truth）」を得られます。チームはそれぞれ同じUIライブラリを使用し、強力な Merge の自動化によって、 1 つのリリースで全員の同期が保たれるため、コードとデザインを個別に更新する必要がありません。

UXPin のコラボレーション（連携）における使用法

UXPinのコメント機能は、チームが非同期で作業する現代のデジタル製品設計にピッタリです。 Slack と Jiraの統合により、部門を超えたチームの同期が保たれ、常に最新情報が更新されますからね。

コメント機能は UXPin 内のチャットアプリのように機能します。チームメンバーはコメントを割り当てることができ、アクションが完了したら「解決済み」としてマークすることができます。また、メール通知により、全員が最新情報を入手できます。そしてデザイナーは、ステークホルダーがアカウントを持っていなくても、UXPinで連携できるように彼らを招待できることから、彼らのアカウントを確保するのにお金を払う必要がなくなります。

UXPin Merge が最高の Adobe XD 代替ツールに勝る理由

Zeplin、Proto.io、Marvel、Figma、その他の Adobe XD 代替ツールでは、グラフィックデザイン、プロトタイプ、ツールではデザイナーのワークフローとUIデザインを最適化することに重点を置かれています。重要なステークホルダーやインタラクティビティのプロトタイプにはあまり重きをおいていません。

一方、UXPinとMergeテクノロジーにおいては、デザイナー、プロダクトマネージャー、エンジニア、DesignOps、DevOpsなどのエンドツーエンドのデジタル製品開発プロセスに多くのメリットをもたらします。

Adobe XDの代替製品は数多くありますが、UXPinはデザインと開発のギャップを埋めることで、製品開発の多くの課題を解決する唯一のプラットフォームとなります。

UXPin に切り替えることで、フルスタックの製品デザインソリューションでデザインと開発を速やかに同期できます。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

The post Adobe XD 代替製品 – コードベースの 「UXPin Merge」 appeared first on Studio by UXPin.

デザインシステムは、製品のデザインプロセスを効率化し、チーム間の一貫性と拡張性を確保します。

Figma と UXPin には、それぞれさまざまなニーズに合わせた独自の機能を備えた、強固なソリューションがあります。

そこで本記事では、Figmaのチームライブラリやとその利点、そして潜在的な欠点についてお話します。

また、UXPinのデザインシステムとMergeの技術を使った、チームライブラリの代替案もご紹介します。

主なポイント：

• Figmaのチームライブラリで、デザインシステムの作成と共有がしやすくなり、それによって一貫性が保証される。

• Figmaのデザインシステムは先進的ではあるが、デザイナーとデベロッパー間のギャップを埋めるという点では課題がある。

• UXPin Mergeは、一元管理、究極の一貫性、複数のフロントエンド開発をサポートし、デザインと開発プロセスを統一するという点において、Figmaのプロトタイプ ・ チームライブラリを上回る。

UXPin の Merge技術で、組織・プロトタイプ全体 で「信頼できる唯一の情報源（Single source of truth）」を作成し、製品開発プロセスをシンプルにしませんか。詳しくはUXPin Merge をぜひご覧ください。

Figma でデザインシステムを作成できるのか

チームライブラリ機能により、デザイナーは Figma でデザインシステムを作成することができます。

さまざまなファイルやプロジェクト間で、UIコンポーネントやスタイルを公開し、共有することができます。

デザインの要素が更新されると、その要素が使われている各デザインファイルに一貫性と最新性が保たれ、それによって組織全体は最新リリースが同期された状態が保たれます。

アトミックデザインとは ‐ Figma のデザインシステムに適用するために

Figma は、ブラッド・フロスト氏の「アトミックデザインの原則」に基づき、チームライブラリを設計しました。

アトミックデザインは、UI （ユーザーインターフェース）を以下のように分解します：

• 原子： カラースタイル、ラベル、テキストスタイル、スペーシングなど、Web ページの基本的な構成要素。

• 分子： 例えばボタン、フォーム入力、チェックボックスなど、色のように原子をいくつか組み合わせ、ラベルと形をつけると分子になる。

• 有機体：複数の分子を結合させると有機体になる。サイドバーやヘッダーなど、より複雑な UI 要素になることもある。

• テンプレート： さまざまな生物を組み合わせると、ページ全体のレイアウトを形成するテンプレートができあがる。

Figma のアトミックユニット：コンポーネントとスタイル

コンポーネントとスタイルは、Figma のデザインシステムの原子単位です：

• コンポーネント： ボタンやアイコンのような再利用可能なデザイン要素

• スタイル： 色やタイポグラフィなどのデザイン仕様

この要素は、デザインシステムのチームが作成したオリジナルのファイルに存在しています。

さまざまなファイル間でアクセスできるようにするには、ファイルの所有者がチームライブラリに公開するといいでしょう。

Figma のチームライブラリにアクセスするには？

コンポーネントとスタイルを公開すると、Figma のチームライブラリで見つけることができます：

• デザインファイルを作成するか、開く

• Assets のタブから［Team Library（チームライブラリ）］をクリックして開く

• 目的のチームライブラリを検索または参照する

• ライブラリを有効にして、そのコンポーネントをアセットパネルで利用できるようにする

チームライブラリを有効にすると、デザイナーはそのコンポーネントのインスタンスをデザインファイルに簡単にドラッグ＆ドロップでき、それによってデザインの一貫性が確保されます。

Figma のデザインシステムの主な特徴

• スタイル： コンポーネントの色、文字、エフェクト、レイアウトグリッドを確定する

• 変数（ベータ）： 色値、数値、文字などの再利用可能な値を保存して、コンポーネントを半インタラクティブにしたり、明暗モードを切り替えたりできる

• バリアント： コンポーネントとパターンのバリアントとステートを作成する

• デザイントークン： デザインシステムチームが複数のデザインファイルで共有できる動的なスタイルで、変更と更新を一元管理する

• Storybook：デザイナーは、Figma のデザインをStorybookコンポーネントに埋め込むことができ、関連する Figma コンポーネントとともにストーリーをインポートして参照することができる

• ライブラリー分析： デザインシステムのチームがパターンやコンポーネントの使用状況や採用を監視できるようにする

• バージョン履歴： Figma ファイルのバージョン履歴を表示し、古いバージョンを復元する

Figma のチームライブラリを使うデメリット

Figma のデザインシステムは、デザインをシンプルにするために進化してきましたが、デザイナーとエンジニア間のギャップを埋めることはできません。

デザインシステムチームは、Figma 用とコード用の２つのライブラリを管理が必要になります。

UXPinは、２０２３年に Whitespaceと共同出版し、そこでデザインシステムの課題とその克服方法について、世界的に有名な１９社にインタビューをしたレポートを発表しました。

インタビューを行った企業では、Figma や Sketch のような画像ベースのツール を使用して いました。

筆者たちは、各組織にとっての主要な目標が「信頼できる唯一の情報源（Single source of truth）」であることがわかりました。

企業はこの目標を達成するためにプラグインやカスタムソリューションに依存し、コストを増加させ、フローを複雑にしているのです。

以下に、デザインシステムに画像ベースのツールが使われる場合での、主な問題点を挙げてみましょう：

• デザイナーと開発者は別々のライブラリ (Figma用のUIキットとデベロッパー用のコードコンポーネント) を使用するため、組織が「信頼できる唯一の情報源（Single source of truth）」を得ることはできない。

• 変更の更新には、デザインシステムレポジトリ、Figma、プロトタイピングツール、関連ドキュメントなど、複数の場所の変更が必要。

• 単一のUIライブラリを一元管理しないと、さまざまなバージョンを使っているチーム間でエラーが発生する。

• ハンドオフでは、インタラクションを説明するための長いドキュメントが必要であり、２０２３年のリリースでも、コードに匹敵するインタラクティブ性を実現できない。

• デザイナーは、プロトタイプやテストのために追加のツールやプラグインを使わなければならず、それによってコストや運用の負担、ミスの可能性が増大する。

UXPinのデザインシステムと Figmaのチームライブラリの比較

UXPinは、デザインシステムの成熟度に応じて２つのソリューションを提供しています：

• デザインシステム： コンポーネント、アセット、タイポグラフィ、ドキュメントを含むデザインシステムを作成する。

• Merge技術： レポジトリから UXPin にコードコンポーネントライブラリをインポートして、プロトタイピングとテストを行う。

UXPin のデザインシステム

UXPinのデザインシステムは、Figmaのチームライブラリと同じように機能します。

組織は、デザインシステムを作成し、チームメンバーと共有することができ、デザインシステムチームは、権限のない変更を防ぎ、システムの完全性を確保するために、権限 を設定することができます。

UXPin のビルトインデザインライブラリの活用

組織は、iOS、マテリアルデザイン、Bootstrap、Foundation など、UXPinのビルトインデザインライブラリのいずれかを基盤として使うことで、デザインシステムをサッと構築して拡張することができます。

インタラクティブ性の向上

FigmaとSketchは画像ベースのデザインツールで、デザイナーは最小限の機能しか持たない静的なプロトタイプしか作成できません。

一方、UXPinはコードで動き、ベクターグラフィックスを生成する代わりに、キャンバスは HTML、CSS、Javascript を裏でレンダリングします。

つまり、UXPinのようなコードベースのプラットフォームを使うことは、デザイナーが、完全に機能する入力要素、状態管理、複雑な UI パターンなど、最終製品のコンポーネントを忠実に模倣したインタラクティブ性を実現できるということです。

以下に、UXPinが他のデザインツールと一線を画す４つの特徴を挙げましょう：

• ステート（状態）：デザイナーは、１つのUI要素に対して複数のステートを設定し、ドロップ ダウンメニュー、タブメニュー、ナビゲーショナルドロワー などの複雑なインタラクティブコンポーネントをデザインできる。

• バリアブル：ユーザーの入力からデータを取得し、アプリバーに名前やプロフィール画像に表示され るなど、個別化された動的なユーザー体験を作成する。

• Expression： Javascript のような関数で、複雑なコンポーネントや高度な機能を作成できる

• 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」と「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。

UXPinの高度なコードベース機能により、企業はプロトタイプやテストに外部ツールやプラグインを必要とせず、それによってコストや重複したワークフロー、運用タスクが削減されます。

UXPinのデザインシステムは、デザインシステム成熟の初期および中期段階を支援し、Merge の技術により、組織は最終段階である完全に統合された「信頼できる唯一の情報源（Single source of truth）」を達成することができます。

Merge の技術で「信頼できる唯一の情報源（Single source of truth）」を実現する方法

Mergeの技術は、デザイナーとデベロッパーがまったく同じコンポーネントライブラリで作業するという究極の成熟を実現します。

１回の更新で、ドキュメントを含むデザインとエンジニアリングの変更が同期されるのです。

真の 「信頼できる唯一の情報源（Single source of truth）」

Mergeを使うと、組織はレポジトリから UXPinにUIライブラリをインポートできます。

そのため、デザイナーはデザインプロセスで、エンジニアが最終製品を開発するのと同じデザインシステムコンポーネントを使うことができます。

レポジトリへの変更は自動的にUXPinに同期され、最新バージョンがチームに通知されます。

この新しい UXPin Mergeのアプローチにより、より連携しやすく統合的なデザインプロセスが実現します。

デザイン、プロトタイプ、開発を分離するのではなく、UXPinを使うことで、プロセス全体を通してエンジニアリングチームと製品チームを関与させる統合フローを構築することができます。

そしてその結果、製品の最終品質は劇的に上がりました。

ー エリカ・ライダー氏、プロダクト、UX、DesignOps のソートリーダー。

バージョン管理でチームの同期を保つ

デザイナーは UXPinのバージョン管理を使って、最新リリースに切り替えるタイミングを選択し たり、必要に応じて古いバージョンに戻すことができます。デザイナーとエンジニアが同じバージョン管理で同期しているため、混乱や伝達ミスがなく、デザインシステム全体の変更履歴が１つで済みます。

Merge が Figma のチームライブラリより秀でている点

Figmaのチーム ライブラリを使う場合、組織は 2 つのバージョンのデザインシステムを維持する必要があります。

さらにプロトタイプとテストにさまざまなツールを使う場合は、さらに多くのバージョンを維持することもあります。

一方、それがMergeの場合、管理するのはデザインシステムのレポジトリのみです。

一元管理

デザインシステムチームは、デザインチームとエンジニアリングチームのためのレポジトリを一元で管理します。

この一元管理によって、チームはコンポーネントライブラリ、更新、ガバナンス、ドキュメント化、パターンの推進を完全にコントロールできるのです。

究極の一貫性

デザインシステムを一元管理することで、コンポーネントライブラリへの不正な変更を防ぐことができ、インタラクティブ性やスタイリングなどのプロパティは、コンポーネントやパターンに織り込まれます。

デザイナーがコンポーネントを取り外して調整できる Figma とは違って、Merge の要素とそのプロパティは固定されます。

デザイナーは、UXPin のプロパティパネルに表示される、デザインシステムのレポジトリで定義されたプロパティのみを扱うことができます。

デザインシステムチームは、React propsまたはStorybook Argsを使ってコンポーネントのプロパティを確定でき、デザイナーは、プロパティパネルで確認および調整をすることができます。

このような制約は、デザイナーとエンジニアが常に同じパラメータと制限の中で作業するということであり、リリースのたびにピクセルパーフェクトな一貫性がもたらされます。

MergeはUX負債と技術的負債を大幅に削減しながら、ドリフトを排除するのです。

複数のフロントエンド技術に対応

ほとんどの Javascript フロントエンド技術を 以下２つの統合機能を使って UXPin と同期させることができます：

• Git統合： Reactレポジトリに直接接続

• Storybook 統合： React、Vue、Ember、Angular など、あらゆる Storybook ライブラリを同期する

Figmaの Storybookプラグインは、componentとStoryを視覚化させるだけですが、UXPinのStorybook統合は、エディター内で完全にインタラクティブなプロトタイプを構築するためにコンポーネントライブラリをインポートします。

デザイン、プロトタイプ、テストを１つのツールで

Figmaではインタラクティブなエフェクトやアニメーションなどの制限もまだあるため、多くの企業はデザインとプロトタイプに複数のツールを使わないといけません。（例：プロトタイプに Zeplin の使用など）

一方、Mergeテクノロジーの場合、１つのツールだけで完結するので、ワークフローはシンプルになり、同時にコストも削減されるでしょう。

デザインプロセスでコードコンポーネントを使うことは、デザイナーが最終製品のような外観と感触のプロトタイプを作成できるということであり、プロトタイプの幅は広がるため、ステークホルダーやユーザーテスト参加者からのより良いフィードバックの取得に繋がります。

オープンソースのコンポーネントライブラリを使ってプロトタイプを作成して進化させる

UXPinには、Fluent UI、Ant Design、MUI、UXPin BoilerplateなどのMergeライブラリがあります。これらの使用によって、完全に機能する高忠実度なプロトタイプやテストのための MVP（実用最小限の製品）を作成することができます。

また、MergeのGit統合を使っているチームは、上記のライブラリからコンポーネントを組み合わせて、新しいパターンの構築や新しいパターンの検証できるのです。開発者のサポートなしでもデザインシステムの進化が促進されるのです。

UXPinのコードベースのソリューションを使用することで、ワンランク上の製品設計をしてみましょう。

Mergeテクノロジーを使って、「信頼できる唯一の情報源（Single source of truth）」でデザインと開発をつなげましょう。

詳細とアクセス権については、Merge のページをぜひご覧ください。

The post FigmaとUXPin【 デザインシステム 徹底比較】 appeared first on Studio by UXPin.

このブログでは、UXPin Mergeにある「Patterns」機能をご紹介いたします。Patternsを使うことで、簡単に新しいコンポーネントや変数の作成や再利用が可能です。これによって、デザインプロセスでのスピード感と一貫性の向上につながります。さらに、新しいUI要素を試してみたり、デザインシステムの拡張したり、同じプロパティを何度も設定する時間を節約することもできるんです。

 Pattern を試してみたい方は、まずはUXPinの14日間の無料トライアルをお試しください。

UXPin Mergeが選ばれる理由

UXPin Mergeは、コードコンポーネントをUXPinのデザインエディタに取り込むことができる技術を提供します。この技術により、デザインチームは完全に機能する要素を使って、インタラクティブなプロトタイプを構築することができます。たとえデザイナーのよりもデベロッパーの数が大きく上回っていたとしても、UXPin Mergeを使用するチームはデザインの拡張だけでなく、デザインシステムの高い成熟度も実現できることがわかったのです。

UXPinはこのMergeテクノロジーを日々進化させており、デザイナーがUXPinにコンポーネントをインポートしたり、エディタで使用できる方法を研究しています。そこで、複雑なコンポーネントをUXPinで構築・保存可能にする機能「 Patterns 」を発表しました。

堅牢なデザインライブラリをスピーディに構築できる

UXPinでは、Storybook、Git、NPMパッケージ経由でコードコンポーネントライブラリをUXPinにインポートできるだけでなく、プロトタイプですぐに再利用可能で、定義済みのUIコンポーネントを備えたデザインライブラリがあります。

この新しいMerge機能によって、デザイナーの生産性を向上につながり、デザインシステムの拡張、コード化していない新しいコンポーネントのテストができます。これにより、以下のことがずっと楽になりました：

• コンポーネントのバリエーションとプロパティの保存及び再利用
• Mergeコンポーネントをより大きく、より高度な要素と結合
• まだコード化されていない、定義済みのプリセットを持つ新しいコンポーネントの作成及び共有

 Patterns は標準的なUXPinライブラリとして機能しますが、原子や基本的なコンポーネントだけではなく、より複雑なものを作成することができます。また、MergeコンポーネントとClassicコンポーネントと合わせて、開発者にコーディングを依頼することなく新しい要素を試すこともできます。

 Patterns の使い方

 Patterns は、Mergeのアカウントをお持ちの方で、Git、Storybook、およびNPMパッケージなどすべてのMerge統合にてお使いいただけます。

UXPin日本語公式ドキュメントにあるPatternsの使い方をご参照ください。

 Patterns はStorybook統合でお試しいただけます。UXPinの無料トライアルで、デザインプロセスでコードコンポーネントを使ってみて、そのスピード感と迅速さをぜひご体験ください。

The post コンポーネントを素早く構築 & 保存できる「 Patterns 」とは？ appeared first on Studio by UXPin.

UXPinのnpm統合により、デザインチームはより忠実でコード同様の機能でプロトタイプが作成できるようになりました。これまではエンジニアにコーディング依頼が必要だったところを、UXPinが持つコンポーネント駆動型プロトタイピング機能によって、デザイナーでも高忠実度なプロトタイプ作成の実現が可能です。

npm統合で、簡単にコンポーネントライブラリをUXPinのデザインツールにインポートできます。これには、技術面での複雑な設定は不要で、共有コンポーネントのインタラクティブ性を最大限に活かすことができるのです。今回は、Mergeを使ってコンポーネントの統合が実際にいかに速く行えるのか見ていきましょう。

さっそくGitレポジトリ、Storybook、または最新のnpmからUXPinにコンポーネントを統合させてみましょう。UXPin Mergeテクノロジーついての詳細は、こちらのページをぜひご覧ください。

UXPin Merge とは

npmについてお話しする前に、UXPin Mergeの概要を説明します。UXPin Mergeはコンポーネント駆動型プロトタイプを実現するコードベースのテクノロジーです。デザイナーはゼロからデザインする代わりに、レポジトリからProduction ReadyなUI要素を使用して、高忠実度で完全に機能するプロトタイプを構築することができます。

デザイナーはビジュアル要素、エンジニアはその背後にあるコードに取り組むことで、製品開発チーム全体で「信頼できる唯一の情報源（Single source of turth）」が構築されます。これによって、実際に、UXPin Mergeを導入したPayPalやTeamPasswordのチームは、デザインの品質、スピード、一貫性向上に成功しました。

UXPin で「npm統合」って何？

UXPin Mergeを非公開のデザインシステムで使う場合、同期のためのレポジトリをセットアップする上で技術的な知識が必要になってしまうのですが、オープンソースのコンポーネントライブラリを使う場合だと、デザインチームは直感的なダッシュボードを使用して簡単にnpm統合を完了できます。

また、デザイナーはMergeコンポーネントマネージャー機能を使って、コンポーネントのインポートとプロパティを管理することができます。たとえば、 Bootstrapのコンポーネントライブラリまたは以下９つのVariants（変数）からButtonをインポートできます：

• プライマリー（primary）
• セカンダリー（secondary）
• 成功（success）
• 危険（danger）
• 警告（warning）
• 情報（info）
• 明るい（light）
• 暗い（dark）
• リンク（link）

これらのVariantsはUXPin上の画面右にあるプロパティパネル（Properties Panel）でドロップダウンとして表示されます。Mergeはほとんどのコンポーネントにホバーステートも含んでいるため、デザイナーはこのような詳細を気にせず、プロトタイピングにすぐに取り掛かれることができます。

デザインチームは、React Bootstrapのドキュメントから、インポートするコンポーネントのプロパティを探すことができ、全てのプロパティまたはプロジェクト関連のもののみをインポートすることもできます。

 Bootstrapを使うメリット

 BootstrapはReact、Vue、Angularで利用可能な最も有名なモバイルファーストのフロントエンドフレームワークです。

UXPinのnpm統合では、React Bootstrap のコンポーネントライブラリを使用しますが、VueまたはAngularのバージョンをインポートするにはStorybook統合で可能です。

BootstrapはレスポンシブなWebサイト・Webアプリ開発に最適ですが、モバイルアプリのデザインプロジェクトでもReactライブラリを使うこともできます。Bootstrapには、フォーム要素、レスポンシブテーブル、その他の関連コンポーネントが豊富に揃っているため、Webベースのエンタープライズ向け製品に適しています。

なお、Boostrapは総合的なフロントエンドフレームワークなので、Bootstrapのサンプルページでできることを見ておくことをおすすめします。

UXPin Mergeで Bootstrapの npm 統合

npmパッケージ（react-bootstrap）を使って、BootstrapのコンポーネントをUXPinのデザインエディタにインポートできます。Mergeコンポーネントマネージャーによって、各UI要素と利用可能なプロパティをインポートが可能です。

UXPinのコンポーネント駆動型のプロトタイピングで、要素は同じレポジトリから取り込めることから、デザインチームはエンジニアと同じ忠実度と機能性を手に入れることができます。エンジニアがレポジトリのコンポーネントでできることを、デザイナーも同様にUXPinのプロパティパネルで実現することができます。

また、フレームワークのドキュメンテーションにあるBootstrapのReact propsを使用することでこれらのプロパティを割り当てることができます。

Merge コンポーネントマネージャでプロパティの割り当て

Mergeコンポーネントマネージャーはnpmコンポーネントをインポートおよび管理するためのハブ的存在であり、プロジェクトを完成させるために必要な数だけインポートすることができます。

また、インポートするプロパティ数のコントロールも可能です。例えば、Bootstrap Buttonの［プライマリー］と［セカンダリー］Variantsのみを使いたい場合、全てのプロパティをインポートするのではなく、使いたいプロパティ２つのみをインポートすればいいだけです。

UXPinを React Bootstrapの npm パッケージにつなげる

ステップ１

UXPinのDashboard（ダッシュボード）画面に移動し、［+ New Project（新規プロジェクト ）］をクリックします。

ステップ２

プロジェクトに名前を付け、［Create New Project （プロジェクトの新規作成）］をクリックします。

ステップ３

［Design with Merge components （Mergeコンポーネントでデザインする）］と ［+ Add new Library （ライブラリの追加）］をクリックします。

ステップ４

［Import React Components with npm integration（npm統合でReact Componentsをインポートする）］を選択し、［Next（次へ）］をクリックします

ステップ５

ライブラリに名前を付けます。この名前は参考用のためだけなので、インポートには影響しません。

Mergeを動作させるには、npm統合に 『React Bootstrap（react-bootstrap）』と『 Boostrap（bootstrap）』という２つのBootstrapパッケージが必要です。

最後に、コンポーネントのプロパティをUXPinで動作させるには、BootstrapのCSSファイルへのパスが含まれてないといけません。（パスはReact-Bootstrap のドキュメントのCSSの下にあります。）

• bootstrap/dist/css/bootstrap.min.css

React Bootstrapコンポーネントのインポート

上記の手順を完了すると、UXPinはMergeのコンポーネントマネージャー にリダイレクトします。

ステップ１

左側のサイドバーから、［Open Merge Component Manager （Mergeコンポーネントマネージャーを開く）］をクリックします。

Mergeコンポーネントマネージャーが新規タブで開きます。

ステップ２

［Add new component （新しいコンポーネントの追加）］をクリックします。

ステップ３

インポートするコンポーネントの名前を入力します。

正しい命名規則は、React Bootstrapのドキュメントにあります。

このチュートリアルでは、Bootstrap Buttonをインポートして、［Components （コンポーネント）］という新しいカテゴリーを作成してみます。ここでは、デザイナーとエンジニアが同じ基準点持つためにReact Bootstrapのドキュメントと同じカテゴリを使うことをお勧めします。

１回のインポートで複数のコンポーネントを追加できるので、ステップ２と３の繰り返しは省略されます。

［Import Components（コンポーネントをインポートする） ］をクリックします。

ステップ４

右上の［Publish Changes（変更を公開）］をクリックして、インポート処理を初期化します。

新しいコンポーネントで初めてこの作業を行う際は、少し時間がかかるかもしれません。

ステップ５

インポートが完了したら、［Refresh Library （ライブラリの更新）］をクリックし、プロジェクトライブラリの変更を更新します。

ここまで進めると、左サイドバーのカテゴリーに[Components]、その中に[Button]があります。

ステップ６

［Button］をクリックしてプロパティを追加してみましょう。このReact propsは、React Bootstrapのドキュメントで、Components > ButtonのAPIの下にあります。

Mergeコンポーネントマネージャーでコンポーネントプロパティの追加

React Bootstrap のドキュメントを使って、Buttonプロパティをいくつか追加します。

Buttonラベル

ステップ１

React BootstrapのButtonラベルは、childrenプロパティを使って、次のように設定します：

• プロパティ名：「children」と入力（小文字を使用する）
• 表示名：（これは必須ではないですが）デザイナーとエンジニアの両方が使うわかりやすいものにする（ 統一感があるように 、ここでは『label』とします。）
• 説明：デザイナーに簡単な説明や指示を加える
• プロパティの種類：String（ストリング）型
• プロパティコントロール：『textfield（テキストフィールド）』
• デフォルト値：好みで設定 （ 今回は 『Button』を選択。）

コンポーネントのプロパティを完成させると、コンポーネントのプレビューが表示され設定した通りに変更されます。

ステップ２

すべての項目を入力したら、［Add property （プロパティの追加）］をクリックします。

そして［Save Changes（変更の保存）］

最後に［Publish library changes（ライブラリの変更を公開）］

コンポーネント 駆動型のプロトタイピングをご体験ください

実際にReact Bootstrapコンポーネントとプロパティをインポートしてみると、UXPinでのプロトタイピングはドラッグ＆ドロップでレイアウトを作成するのと同じくらい使いやすいんです。ちなみに、下画像のシンプルなデザインのメール登録フォームだと、３つの Bootstrapコンポーネントを使っただけで、１分もかからずに作成できました。

 Bootstrapコンポーネントを選択すると、Mergeコンポーネントマネージャーで作成したプロパティはUXPinのキャンバス画面右側にあるプロパティパネルで表示されます。

UXPinのnpm統合でコンポーネント駆動型プロトタイピングをさっそく試してみませんか？ Bootstrapのnpmコンポーネントをインポートして、いかに早く製品のアイデア出しから開発までできるかをご体験ください。開発時間を大幅に短縮できますよ。詳しくはMergeのページをご参照ください。

The post BootstrapコンポーネントをUXPinに追加する方法 – npm統合ガイド appeared first on Studio by UXPin.

Storybookではデザイナーと開発者がプロトタイプを構築する際に、コードコンポーネントを使用することで、サイロ化を解消しUIの一貫性を向上させることができます。（詳しくは「画期的なStorybookの魅力」に関するこちらのブログをご覧ください）

当社のMergeテクノロジーをベースにしたこの連携により、コードの力を利用して高度なプロトタイプを迅速に構築し、デザイナーも開発者も同じコンポーネントを使って製品を作ることが可能になりました。これにより、ハンドオフプロセスの複雑さを大幅に軽減することができます。

 Product Hunt にもStorybook 連携に関して載せておりますので、ぜひご覧ください！

製品チームが信頼できる唯一の情報源を必要とする理由

製品開発における信頼できる唯一の情報源 とは、製品を設計・製造するために必要なすべてのドキュメントや要素を保管する1つの場所のことです。理想では、信頼できる唯一の情報源 は簡単に共有、常に最新の状態、プロセスに関わるすべての人が使用できることです。

 デザインシステムは、製品チーム間で情報がバラバラになってしまうという問題を解決するはずでした。デザインシステムはUIやドキュメントをシステム化するための素晴らしい第一歩ではありますが、それだけではデザインと開発の作業において完璧には解決できないこともあります。

そこで、Mergeという革新的なテクノロジーが誕生しました。製品チームは、GitリポジトリやStorybookなどの開発ツールを活用して、DesignOpsプロセスを改善し、デザインとコードの同等性を維持することができます。その結果、デザイナーも開発者も同じUI要素、ドキュメント、コードを1つのソースから使用することができます。

開発ライブラリからコードベースの完全なインタラクティブコンポーネントを取り出し、キャンバスにドラッグ＆ドロップするだけで、デザインエディタで使用できることを想像してみてください。これが非常にエキサイティングな理由です:

もう 「あのコンポーネントはどこだっけ？」と悩むことはありません。

パズルのピースが散らばっているのと同じように、製品開発に必要なピースを探して作り上げることは、かなりの時間がかかります。コンポーネントやドキュメントを常に最新の状態に保つのは本当に大変なことです。しかし、すべての情報を１つに保管する場所があれば、正しいバージョンのコンポーネントやそのコードを探す必要はありません。

開発者用のライブラリからデザインエディタにUI要素を持ってくると、1つの場所でメンテナンスするだけでよく、ライブラリも自動的に同期されます。

デザイナーと開発者が共通のテクノロジーを使用

デザイナーが作成・開発者が作成したものの間で起こる問題の原因はそれぞれが異なるテクノロジーを使って仕事をしているということです。デザインツールは一般的にベクターやピクセルを使っているのに対し、アプリやウェブサイトは特定のプログラミング言語やフレームワークを使っています。

ベクトルやピクセルを使った手法は非常に限られたもので、最終製品を単純にイメージにしたものに過ぎません。例えば、プロトタイプに実際に動いたりなどの高度なインタラクションを追加したい場合、ベクターやピクセルでは変数や条件付きロジック、あるいは単純な入力フィールドを扱うことができないため、必ずしもそれが作れるとは限りません。しかし、開発者がUIコンポーネントにコードを使用すると、これらの障害はなくなります。

もし、デザイナーがコードに反映されるようなコードパワーのあるテクノロジーを使ってプロトタイプを作ることができれば、デザイナーと開発者は共通の言語でコミュニケーション、作業ができるのです。つまり、2つの異なる環境でUI要素を作成するのではなく、まったく同じ環境を使用することで、製品制作をスムーズにさせます。

10倍の成果

製品をデザインする際には、ユーザーがクリックしたときに何が起きてどのように動くのかを開発者に説明する必要があります。また、すべてのインタラクションを使用して製品の動きをより上手く説明するために、高再現性なプロトタイプを作成することもできます。通常だと、高度なプロトタイプの作成には多くの時間がかかり、詳細を正確に把握するためには、インタラクションやプロトタイプの機能性についてコメントで長い会話をする必要があります。

この流れはデザインオペレーションの観点から言うと、決して効率的なワークフローとは言えません。しかし、コード化されたUIコンポーネントをデザインエディターで使用することにした場合、デザインプロセス全体が決定的にスピードアップします。

完全にインタラクティブで、すべての制作基準に沿った要素を使って作業すると、従来の方法でプロトタイプを作るのに比べて、10倍以上のデザインにおいての成果が得られます。  節約できた時間をユーザーテストなど他の重要なことに回して、費やすことができます。

ユーザーテストの特典：最終製品と同じように動作するプロトタイプ

すべてのUIパーツが完全にインタラクティブでない場合、どうやってプロトタイプをテストする方法としてユーザーテストがあります。しかし、ユーザーテストでは、ユーザーが自身でクリックし、プロジェクトを進めることができなければ十分な信頼性が得られません。アコーディオンをクリックしたり、メニューにマウスを置いたりすると何が起こるかを説明しても、それを見せるのと同じ品質のフィードバックは得られません。

コードで作られたプロトタイプが最終製品とまったく同じように動作するようになれば、ユーザビリティテストで完全に没入感のある体験を提供して、リサーチチームをサポートすることができます。

コードでデザインする  Storybookの連携を試す

Storybook は、開発者がUIコンポーネントを構築し、保存するための唯一の場所です。また、要素をテストしたり、明確なドキュメントを作成するのにも最適なツールです。Storybookは、React、Angular、Vueなどの人気の高いフレームワークを含む多くのフレームワークをサポートしています。

UXPinで Storybook連携 

Storybook は、Merge 技術を使用してコード化されたコンポーネントをデザインツール UXPin と同期させる 2 つの連携のうちの 1 つです（Git repo が最初の連携です）。Storybookとの連携は約1分で完了し、コード化されたコンポーネントを使ってすぐにデザインすることができます。

プライベートまたはパブリック？

あなたのStorybookライブラリは、プライベート（あなたのサーバーにホストされ、選ばれたユーザーだけがアクセスできる）と、URLを知っている人が自由にアクセスできるパブリックのいずれかにすることができます。私たちの統合は両方のタイプをサポートしているので、どちらを使用するかは問題ではありません。

パブリックのライブラリでは、ストーリーブックのURLをコピー＆ペーストするだけで簡単に利用できます。プライベートライブラリでは、開発者は2つの簡単なコマンドを実行するだけです。プライベートライブラリをお試しになりたい場合は、ガイドツアーをご利用ください。

既にお持ちで、他社のパブリックライブラリを使用されたい場合は、オープンソースのStorybookのサンプルをお楽しみください。

コードで自由にデザイン

同期されたコンポーネントはコード化されているので、デザイナーは開発者の手を借りずに、UXPinエディタ内でプロパティ、入力、スタイルを自由に変更することができます。また、コードに埋め込まれた制約は、スタイルにミスマッチがないようにガイドしてくれます。

ノンデザイナーに権限を与え、より良いDesignOpsを実現する

コードを使ってデザインすることで、DesignOpsプロセスを再定義することができます。PayPalは、製品開発のデザインフェーズを変革することで、デザイナー以外の役割を持つ人々がUXPinのコード・コンポーネントを使ってアイデアを視覚化できるようにした素晴らしい例です。PayPalのErica様と彼女のチームはMergeとGit の連携を使用していますが、Storybookを活用しても同様の結果を得ることができます。

デザイナー以外の人は、コンポーネントをキャンバスにドラッグ＆ドロップして、必要に応じてコントロールを操作するだけなので簡単です。その後、デザインドラフトをもとにUIの専門家がプロジェクトを仕上げ、ユーザビリティに焦点を当てることができます。

コードの力を味わう

登録して、Storybookから直接コンポーネントが提供されている内蔵のマテリアルUIライブラリを試してみたり、ご自身で新しいライブラリを同期させたりすることができます。コードの力を実感し、信頼できる唯一の情報源を使用することで、製品チーム全体がどのようなメリットを得られるかをご覧ください。

The post Storybook連携を試してみましょう appeared first on Studio by UXPin.

リードデザイナーは、チームメンバーが正しい道を歩んでいるかどうかを確認する必要があります。マネージャーは目標を達成するために、パターンライブラリやスタイルガイドなど、いくつかの方法を試してきました。これらのオプションは、上手く活用している組織もある一方で、デザインの効率を最適化し、ミスを避けるために必要な唯一の真実の情報源とは限りません。

UXPin Mergeを使用することで、デザインと製品の一貫性とコラボレーションを促進する信頼できる唯一の情報源でプロトタイプを作成する方法をご覧ください。

信頼できる唯一の情報源とは？

今日のデザインおよびプロトタイピングツールは、信頼できる唯一の情報源としてデザインシステムに依存する傾向があります。デザインシステムには、製品開発に携わる社員が会社のブランドアイデンティティに適合し、すべての期待に応えるために必要なものがすべて含まれていなければなりません。

 デザインシステムを唯一の情報源 として使用する場合、承認されたものが多くなります:

• カラーパレット
• タイプスケール
• アイコン
• ボタン
• フォームス
• スライダー

既存のデザインシステムを利用することも、独自のデザインシステムを作ることもできることを覚えておいてください。新しいデザインシステムの構築には時間がかかるため、小規模なデザイングループの多くは、魅力的で機能的なコンポーネントのライブラリがすでに用意されており、デザインに簡単に追加できるMaterial Designのようなオプションを使用することにしています。 

他にも人気のあるデザインシステムは以下の通りです:

• Design Language (IBM)
• Fluent Design System (Microsoft)
• Human Interface (Apple)

これらのデザインシステムを使用することで、時間とエネルギーを節約できる一方で、美的感覚のコントロールが少し失われます。また、多くのデザイナーがこれらのデザインシステムをすでに使用しています。信頼できる唯一の情報源を開発することで、あなたのブランドが他から抜きん出ることができるかもしれません。

新しいデザインシステムを作る場合、アトミックデザインで構築することができます。UXPinには、アトミックデザインシステムの成功に役立つチェックリストがあります。また、Creating a Design System: The 100-Point Process Checklist（無料）をお読みください。

 信頼できる唯一の情報源 が必要な理由

信頼できる唯一の情報源を確立することは、デザイナーが使用するコンポーネント、アイコン、および配色を管理する以上の利点をもたらします。デザインシステムへの取り組み方やツールの選択次第で、チーム全員の作業をより簡単にすることができます。

デザイナーが製品を作るために必要なものを提供する

非常に緩やかな方法ですが、これは静的なスタイルガイドにすでに期待されていることです。ホームページの背景色をどうするか悩んだら、スタイルガイドを参考にします。また、テキストの行間をどのくらいにすればいいのかわからないときも、スタイルガイドが答えを教えてくれます。しかし、会社の基準に沿った要素を再利用したい場合には、インタラクティブデザインシステムが便利です。

さらに一歩進んで、デザイナーの信頼できる唯一の情報源と開発者の信頼できる唯一の情報源をリンクさせることもできます。完全にインタラクティブで開発されたコンポーネントをデザインエディターに持ってくることで、生産可能なコンポーネントを使ってすぐにプロトタイプを作ることができます。そして、承認されたコンポーネントのライブラリを手に入れ、それをデザイナーが自分のデザイン環境にドラッグ＆ドロップすることができます。 

従業員が休暇を申請できるような新しいアプリを作る必要がある場合、適切なインタラクティブ要素を見つけてデザイン環境に落とし込み、目的に合わせて個々のフィールドを微調整することができます。誰かが頻繁なニーズに応える再利用可能なコンポーネントを作成したため、ほとんどの作業はすでに完了しています。

また、ハンドオフ・プロセスの矛盾もすべて解消されます。デザイナーも開発者も同じコンポーネントを使用しているので、プロトタイプでそれらがずれてしまうことはありません。再利用可能なコンポーネントはすでにコード化されているため、製品チームにとって信頼できる唯一の情報源を使用することは、設計時間を短縮するだけでなく、開発プロセスも短縮することができます。

時代遅れのデザインシステムなど存在しない

かつてスタイルガイドが印刷されて使用されていた時代があったのはご存知ですか？優れたスタイルガイドには、新しいデジタル製品をデザインする際に必要な情報がほぼすべて記載されています。

企業がスタイルガイドのデジタル化を始めたときも、たいていはPDFファイル形式でした。

デジタル化されたスタイルガイドは素晴らしいものですが、それ以上の選択肢はありません。なぜなら、何ページもの説明書を印刷する必要がないからです。1つの文書をメールで全員に送ればいいだけなので簡単ですね。

とはいえど、年も変われば去年のスタイルガイドが今年の基準に合うとは限りません。先月のスタイルガイドでさえ、適合しないかもしれません。

誰もが何をすべきかを示す静的な文書を持っていると、間違った版を使ってしまうかもしれません。このような厳しい状況は、常に起こり得ることです。

しかし、デザインシステムを導入すれば、誰もが古いガイドを持つことはありません。ライブラリを更新すると、その瞬間からアクセスした人全員が変更を目にすることができるのです。UXPinでライブラリを作成し、全員が最新の状態に保つことができます。

デザインツールと開発者のGitリポジトリやStorybookを統合すれば、文字通り、信頼できる唯一の情報源は一つになります。開発者が要素を変更すると、デザインライブラリとプロジェクトが自動的に更新されます。また、デザインはコードで動くので、すべてが同期し、開発者のライブラリやリポジトリとまったく同じように表示されます。コンポーネント、色、タイポグラフィなどがずれていることを心配する必要はありません。

 信頼できる唯一の情報源 で時間を節約

信頼できる唯一の情報源となるデザインシステムを構築することで、デザイナーはスタイルガイドを参照することができるので確実に時間の節約になります。

しかし、デザインや開発にかかる時間を大幅に短縮したいのであれば、デザインエディタと開発者のリポジトリやライブラリを同期させることを検討すべきでしょう。PayPalでは、インタラクティブなコードコンポーネントとピクセルベースのコンポーネントを使ったデザインを比較したところ、前者の方が6倍以上も速いことがわかりました。複数の企業がコードアプローチを用いて製品設計や開発モデルを改善しています。PayPal が UXPin Merge のコードベースのデザインを活用して、小規模なデザインチームでの開発を効率化した方法をご覧ください。

UXPin Mergeですべてのステップが簡単に

UXPin Mergeは、信頼できる唯一の情報源を作成し、デザイナーが効率的に作業するために必要なインタラクティブで生産可能なコンポーネントを提供します。プロトタイプが開発者に届くまでの時間を短縮する、より良いオプションを提供します。14日間の無料トライアルをお試しいただき、製品開発を効率化できるコードベースデザインツールをご体験ください。

The post 信頼できる唯一の情報源（SSOT）とは？徹底解説 appeared first on Studio by UXPin.

コンポーネント駆動プロトタイプは、ユーザーテストを大幅に改善すると同時に、ステークホルダーに現実的な製品デザインの期待値を提供しますが、UXPinの npm統合 で、デザインチームは、完全に機能する高忠実度のプロトタイプのデザインに、オープンソースのコンポーネントライブラリを使うことができます。

UXPinのMergeテクノロジーと npm統合 で、コードベースのデザイン革命に乗り出しましょう。 デザインシステムを最大限に活用し、デザインハンドオフを改善し、デザインを大幅に拡張するコンポーネント駆動型プロトタイプの詳細をぜひご覧ください。

UIコンポーネントは、Gitレポ、Storybook、または最新の npm統合 によって提供されます。最後のオプションについては、ぜひこちらをご覧ください。

UXPin Mergeとは

UXPin Merge は、レポジトリ、Storybook、または npm パッケージとしてホストされているコンポーネントライブラリをUXPinのデザインエディタに同期できる、コードベースの技術であり、デザイナーは、このような UIコンポーネントを使って、最終製品のような外観と機能を持つプロトタイプを構築できます。

エンジニアやデザイン システム チームがレポジトリ内の機能コンポーネントに加えた変更は、自動的にUXPinに同期され、デザイン チームに更新が通知されます。Mergeにはバージョン管理が含まれており、チームメンバーは必要に応じて古いデザインシステム バージョンに切り替えることができます。

この『信頼できる唯一の情報源（Single source of truth）』は連携を強化し、「デザインツール」と「コード」という２つのデザインシステムを管理するDesignOpsとDSチームの負担を軽減します。

UXPinの npm 統合 とは

これまでUXPin Mergeは、セットアップ全般にはエンジニアリングの専門知識を必要としていましたが、セットアップのための貴重なエンジニアリングリソースがどのチームにもあるわけではないので、npmコンポーネントをUXPinに統合する方法を考え出しました。

Merge の npm 統合により、デザイナーは npm パッケージとして利用可能なオープンソースのコンポーネントライブラリのインストールと管理を完全に制御することができます。また、直感的なインターフェースを使って、プロトタイプのニーズに合わせてコンポーネントをインポートおよびカスタマイズすることができます。ちなみに、全設定においてコーディングスキルは不要です。

デザイナー向けのnpmについて学びたい方は、入門ガイドをお読みください：NPMと言うのは？把握しよう！

 Ant Design とは

Ant Designは、Alipay、華北、優慧宝など、中国に拠点を置くハイテク/金融企業のコングロマリットである Ant GROUPから生まれた製品です。

Ant Designは、B2B、B2C、エンタープライズ製品など、数多くのアプリケーションの構築に利用されており、この包括的なデザインシステムには、React、Angular、Vueのコンポーネントライブラリと、それを補完するアイコンセットが含まれています。また、ネイティブアプリケーションの構築に、Ant Design モバイルも入手できます。

UXPin Mergeを使った Ant Design の npm 統合方法

Ant DesignのReactコンポーネントライブラリは、 npm パッケージ（antd）として提供されており、デザイナーは、UXPinの  npm 統合を使った Ant React コンポーネントをインポートし、Mergeのコンポーネント管理でプロパティをカスタマイズすることができます。

デザインチームが Ant Design を他のデザインツールと併用する場合、 Ant Design の静的ベクターベースの UI キットをいずれか使う必要がありますが、UXPinの npm 統合 により、デザイナーはエンジニアが使う同じコンポーネントへのアクセスが可能です。

Ant Designのコンポーネント駆動型プロトタイプは、デザイナーとエンジニアの間に『信頼できる唯一の情報源（Single source of truth）』を作成し、UXチームと製品チームの間に最高の一貫性を確保します。

UXPinの  npm 統合 では、インポートする Ant DesignのReactpropsを色、サイズ、アイコン、ステートなど自由に選択することができます。

Merge のコンポーネントマネージャ でのプロパティの割り当て

  npm 統合 には、各 Ant Designのコンポーネントプロパティをインポートおよび管理するための一元管理である『Merge コンポーネントマネージャ』が含まれています。

UXPinの npm 統合はReactコンポーネントで動作するので、 Ant Design のReactドキュメントに従って、どのpropsをインポートするかを参照できます。これらを Merge のコンポーネントマネージャ で設定すると、コンポーネントのプロパティが UXPin のプロパティパネルに表示されます。

例えば、Ant のボタンには以下のように６つのタイプまたはバリエーションがあります：

• プライマリー
• ゴースト
• ダッシュ
• リンク
• テキスト
• デフォルト

これらのボタンタイプ（および他のすべてのプロパティ）は、デザイナーが選択できるようにプロパティパネルにドロップダウンとして表示されます。プロップは、コンポーネントによって、テキストフィールド、チェックボックス、コードエディタなどとして表示されます。

UXPinとAnt Designの npm パッケージの連携

ステップ１

UXPinのダッシュボードに移動し、【New Project（新規プロジェクト） 】をクリックします。

ステップ２

プロジェクトに名前を付けて、【Create New Project（新規プロジェクトの作成 ）】をクリックします。

ステップ３

【New prototype（新規プロトタイプ）】をクリックし、UXPinのデザインキャンバスにプロジェクトを開きます。

ステップ４

左サイドバーのDesign System Libraries（デザインシステム・ライブラリ）タブの下部にあるドロップダウンをクリックし、【New library （新規ライブラリ）】をクリックします。

お使いのサイドバーや利用可能なライブラリは、例と異なる場合があります。

ステップ５

【Import React Components （React コンポーネントをインポートする）】を選択し、【Next （次へ）】をクリックします。

ステップ６

ライブラリに名前を付けます。この名前は純粋にあなたの参考のためであり、インポートに影響を与えることはありません。

また、Ant Design のnpmページの「Install（インストール）」にある、npmパッケージのレポジトリ名を取得する必要があります。npmからインストール内容をコピーして、「Library Package name （ライブラリパッケージ名）」欄に貼り付けます（antdより前は削除）。

コンポーネントのスタイリングプロパティをインポートするために、Merge は Ant Design の CSS (antd/dist/antd.css) へのパスを要求します。これは、Ant Design の React インストール手順の 【Usage（使用） 】 に記載されています。

Ant Design コンポーネントをインポート

npm の統合が完了すると、UXPinは自動的にキャンバスにリダイレクトします。では、インポートしたいAnt Design のコンポーネントを選択してみましょう。

ステップ１

左側のサイドバーから、【Open Merge Component Manager（Mergeコンポネントマネージャを開く）】をクリックします。

Merge のコンポーネントマネージャが新しいタブで表示されます。

ステップ２

【Add new component（新しいコンポーネントを追加） 】をクリックします。

ステップ３

インポートするコンポーネントの名前を入力します。

正しい命名規則は、Ant Design のドキュメントの コンポーネント API にあります。Ant Designのコンポーネントは、例えば、「Date Picker」 は 「DatePicker」 となるように、スペースなしのキャメルケースを使い、常に最初の文字を大文字にします。

このチュートリアルでは、最初のコンポーネントとしてAnt Design のボタンをインポートし、「General」という新しいカテゴリに追加します。その際、Ant Design のドキュメントと同じカテゴリを使うことをお勧めします。そうすることでデザイナーとエンジニアが同じリファレンスポイントを持つことができますからね。

一度のインポートで複数の部品を追加できるので、手順の「２」と「３」を繰り返す手間が省けます。

【Import Components （コンポーネントをインポートする）】をクリックします。

ステップ４

右上の【Publish Changes（変更を公開する）」をクリックすると、インポート処理が初期化されます。

新しい部品に対して初めて行う場合は、１～２分かかるかもしれません。

ステップ５

インポートが完了したら、【Refresh Library（ライブラリを更新する）】をクリックして、プロジェクトライブラリの変更内容を更新します。

この手順を順を追って見ていくと、左サイドバーにカテゴリ【（General（一般）】と最初のコンポーネント（ボタン）があるのが見えます。

ステップ６

そのボタンをクリックして、プロパティの追加を開始します。このような Reactプロップは、Ant Design のドキュメントで、Components > General > ButtonのAPI で見ることができます。

Merge のコンポーネントマネージャを使ったコンポーネント プロパティの追加

ドキュメントにあるReact propsを使って、Ant Designのボタンのプロパティをいくつか追加してみましょう。

ボタンの種類：ステップ1

Reactのボタン型プロップは、Ant Designのボタンスタイル６種をインポートします。

• プロパティ名：「type 」と入力（propsは必ず小文字を使用）。
• 表示名：デザイナーとエンジニアの両方が使う説明的なもの（これは参照用であり、わかりやすように「Type」が使用されている）。
• 説明文：デザイナー向けの簡単な説明または指示を追加。今回は「ボタンの種類」を使用。
• プロパティの種類：「列挙型（enum）」 − スタイル６種を表示するドロップダウンを作成することができる。
• プロパティコントロール：「セレクト」
• オプション：Ant Design の API ドキュメントにあるオプションである「primary（プライマリ）」、「ghost （ゴースト）」、「dashed（破線）」、「 link （リンク）」、「 text （文字）」、「default （デフォルト）」 を追加。
• デフォルト値：お好みで。ここでは Ant Designのドキュメントにあるように「default （デフォルト）」とする。

プロフィールを完成させると、コンポーネントのプレビューが表示され、お好みに応じて変化することがわかります。

ボタンの種類：ステップ２

項目を全て入力したら、【Add property（プロパティを追加） 】をクリックします。

その後、【Save changes（変更を保存） 】します。

最後に、【Publish library changes（ライブラリの変更を公開）】します。

UXPinによるコンポーネント駆動プロトタイピング

Ant Designの必要なコンポーネントとプロパティをインポートすれば、UXPinでのプロトタイプは、ドラッグ＆ドロップでレイアウトを構築するのと同じくらい簡単です。３つのAnt Designのコンポーネントを用いて、以下のシンプルなメール登録フォームを１分足らずで作成しました。

Ant Designコンポーネントを選択すると、Mergeのコンポートマネージャ で作成したプロパティが右側のプロパティパネルに表示されます。

UXPinの npm 統合でAnt Designのプロトタイプを構築してみませんか。コンポーネント駆動のプロトタイプが、どのように製品開発のワークフローを改善し、より良いユーザー体験を顧客に提供するかぜひご体験ください。

The post 中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド appeared first on Studio by UXPin.

UXデザインの仕事を獲得するには、 ポートフォリオ の質が重要になります。uxfolioのような企業がオンライン ポートフォリオ 作成のためのソリューションを専門に提供しているほど、 ポートフォリオ は採用プロセスの重要な一部となっています。

しかし、どのようなツールを使ってポートフォリオを作成しても、プロジェクトマネージャーに優れたデザインを見せることができなければ、仕事を獲得することはできません。ポートフォリオのプレゼンテーションの質よりも、UXデザインの質の方が重要視されますが、プレゼンテーションを自分のスキルの例として使うことはできます。

残念ながら、自分のUX ポートフォリオ を客観的に見ることはほとんど不可能と言えるでしょう。レビューを受けることで、自分のポートフォリオの強みと弱みを簡単に把握することができるはずです。いくつかの視点が得られれば、自分のスキルや才能を示すUXデザインのセレクションをまとめることができます。

UXPinでは、進行中の作品や完成したプロトタイプを簡単に共有することができ、必要なフィードバックを得ることができます。

UXPinの無料アカウントを作成すれば、誰とでもプレビューを通じて作品を共有し、レビューを受けることができます。

UXデザインを共有し、他の人からポートフォリオのフィードバックをもらう

UXデザインの ポートフォリオ を誰かに送っても、必ずしも有意義なフィードバックが得られるとは限りません。たとえレビュアーがあなたのポートフォリオの完成度を高めるために多大な努力をしてくれたとしても、結局はあまり役に立たない情報になってしまう可能性があります。

その難しさの多くは、人々のオンラインでのコミュニケーション方法にあります。ほとんどのUXデザイン、プロトタイプ、ポートフォリオでは、レビュアーは作品に直接意見を書き込むことができません。その代わりに、メールなどで意見を送ってもらいますが、その際には自分が確認したい機能と、それをどのように改善できるかを説明してもらいます。

ビジュアルメディアでは、デザインに直接レビューを残せる機能が必要です。

UXPinでは、メンターや同僚がワークスペース内でリアルタイムにコミュニケーションを取ることができるので、より洞察力のあるUXポートフォリオレビューを得ることができます。右上隅付近にある青いアイコンは、クリックすると何が起こるのかユーザーに伝わっていないのではないでしょうか」というようなことを書く代わりに、アイコンの近くに「これは分かりにくいアイコンですね。機能をもっとわかりやすくしてみてください」というコメントをアイコンの近くに置くことができます。

また、デザインや完全に機能するプロトタイプを共有できるため、UXポートフォリオレビューの質も向上します。プロトタイプレビューが実際の情報や機能に基づいていれば、人々はLorem ipsumや偽のデータに気を取られることなく、正確なアドバイスをすることができます。

おすすめの記事: How collaboration makes you a better designer

Spec Modeを使って、素晴らしいデザインアイデアを実現する

UXPinのSpec Modeでは、あなたのデザインにアクセスして、劇的な結果につながる微妙な変更を加えることができます。例えば、メニューを少し左にずらすことで、ユーザーにアピールできるバランスになるかもしれません。また、無理に多くの機能を盛り込もうとすると、UXを向上させるためにもドロップダウンメニューの追加を検討する必要があります。

また、Spec Modeのデザインを開発者と共有し、静的なデザインをデジタル製品に変換する人たちからポートフォリオレビューを受けることもできます。あなたのUXデザインが、開発チームに無理な期待をさせていることがわかるかもしれません。一方で、あなたの作品からCSSコードを生成する能力を評価する開発者からは、賞賛の声が寄せられるかもしれません。UXPinは、あなたのグラフィックから自動的にコードを生成することで、2番目の部分をシンプルにします。

 UXPinの無料トライアルを開始すると、Spec Modeでのレビュアーとの共同作業のメリットを実感できます。

おすすめの記事:２０２３年版 UX / UI デザイン の最新 トレンド １０選

コンセプトを表現する完全な機能を持つプロトタイプを作る

完全に機能するプロトタイプを共有できなければ、最も深いレベルの洞察を得られるポートフォリオレビューを受けることはできません。UXPinはあなたのUXデザインからプロトタイプを生成し、同僚やメンターと共有することができます。

理想的には、機能するプロトタイプを送ることで、現実的なフィードバックを得ることができます。静的なデザインは素晴らしく見えるかもしれません。しかし、それがインタラクティブな機能になることを計画しているのであれば、あなたが期待する機能をレビュアーに体験してもらう必要があります。そうしないと、作品の間違った側面に対するフィードバックを得ることになります。

確かに、優れたデザインは採用担当者やプロジェクトマネージャーを惹きつけるのに役立ちます。しかし、実際に意図したとおりに機能するデザイン機能は、より多くの注目を集め、他の応募者と差をつけることができます。

プロトタイプで機能をテストしてみると、一見すると問題なく機能しているように見えるかもしれません。しかし、その機能が何をすべきかについてのあなたの期待は、あなたの判断を曇らせてしまいます。先入観のない客観的なレビュアーは、新しいユーザーとしてプロトタイプの機能にアプローチすることができます。もし何かが直感的に感じられなければ、改善すべき点を指摘することができます。

おすすめの記事: クリッカブル ・プロトタイプの作成方法

UXPinを使って作品の作成と共有を始める

UXPinでUXポートフォリオを共有することで、あなたの能力をより強く表現するための率直なフィードバックを簡単に得ることができます。UXPinのアカウントを作成すると、誰でもフィードバックやデザインの微調整、反復作業に招待することができます。UXPinアカウントがなくても、フィードバックしてくれる人はいます。UXPinのアカウントは必要ありませんが、正しいリンクを渡しておけば、あなたの成功に貢献してくれます。

今すぐUXPinの無料トライアルを開始して、誰とでも共有できる完全な機能を持つUXプロトタイプを作成しましょう。UXPinはあなたのキャリアに関係なく、あなたのニーズと収入に合ったメンバーシップレベルを提供します。

The post UXの質を高める ポートフォリオ レビュー appeared first on Studio by UXPin.

UIコードコンポーネントをUXPinのエディターにインポートするための、デザイナーに便利な方法が発表されました。エンジニアの積極的なサポートがないチームでも Mergeにアクセスできるようにするための、新しい “npm 統合” です。

UXPin Mergeでデザインプロセスに革命を起こす

UXPinとMergeテクノロジーにより、プロトタイプでの新しいレベルの忠実度とインタラクション性を生み出し、スムーズなデザインハンドオフ、デザイナーとデベロッパーの作業の信頼できる唯一の情報源（Single source of truth）での統合が可能になります。まさに、製品開発プロセスを効率化するものです。

静的なデザインから完全にインタラクティブなデザインへ

静的なプロトタイプの時代は終わり、今は特にデザイン成熟度が高い企業で、より効率的なプロトタイピングの方法を探しています。動きのないアートボードをリンクさせ、不完全なツールでデザインをコードに変換し、ニュアンスの異なるインタラクションを何度も文書化することは、仕事を増やし、成長の妨げにもなるのです。

そこでMergeの出番です。この技術があれば、真の機能を持つ要素を組み込んだプロトタイプの作成ができるのです。Mergeは、PayPalのチームが行ったように、デザインをスケールアップさせます。

デザインと開発間の連携の効率化

Mergeでは、デザインチームと開発チームが、制作プロセス全体を通して同じインタラクティブなコンポーネントを使用して作業します。デザイナーはUIコンポーネントを使用し、一方、開発者は全く同じデザインから作成されたコードをコピーします。

デザインからコードへの変換はもう完了です。信頼できる唯一の情報源（Singe source of truth）を最大限に活かすことで、デザインとエンジニアリングが一体となり、デザインのハンドオフ段階がシンプルになります。つまり、デザイナーもデベロッパーもハッピーで、行ったり来たりのやりとりで時間を無駄にすることもありません。

デザインの一貫性を保証する正確なUIコンポーネントの使用

デザインプロセスで使用されるコード化されたUIコンポーネントは、プロトタイプを最初から最後まで一貫したものにします。デザイナーが意図したとおりに製品が作られていくのです。何よりも、デザイナーがコードを扱う必要ないことが1番ですね。

その結果、Mergeの技術ない場合、デザインと最終製品の外観や感触の間にずれがないため、非常に時間とエネルギーを消耗する結果になります。

UXPin MergeへのUIコンポーネントの新たなインポート方法

コンポーネントを使ってデザインする前に、コンポーネントのライブラリへのインポートが必要ですが、今までコード化されたコンポーネントをUXPin Mergeに取り込むには、2つの方法がありました。

• Gitの統合：デベロッパーはソースコードとその履歴をホストするためにGitを使いますが、コードコンポーネントをUXPinにインポートするには技術的なサポートが必要です。
• Storybookの統合： Storybookには、UXPinに持ち込むことができる公私でのコンポーネントライブラリが保存されています。

今回、UIコンポーネントをインポートする3つめの方法として、デザイナーにとって自由度が高いnpm統合機能が追加されました。

Merge npm統合で得られるもの

デベロッパーからの積極的なサポートがない場合、多くのデザインチームが大変な思いをしてMerge Git 統合をすることになります。そこで、本来Mergeが持つ威力を発揮するために、UXPinにコンポーネントライブラリをインポートする、デザイナーにとっても使いやすく新しい方法がリリースされました。

npm統合の使い方って？

では、npmの統合をどのように使うか見てみましょう。まずは、その方法を以下で文章でご説明します。

npmコンポーネントをUXPinにインポートする

npmは、プロジェクトで使用するためにダウンロードできる既製の開発要素を持つ、パッケージのレジストリです。最も使われるオープンソースのデザインシステムの一部は、この方法で配布されています。

Adele (UXPin のデザインシステムレポジトリ) を使って、どのデザインシステムが npm パッケージに含まれているかを調べることができ、最終列までスクロールすると、配布方法が表示されます。 または、独自のReactベースのコンポーネント ライブラリをnpmにアップロードして、UXPinで使用することもできます。

npmデザインシステムをUXPinに取り込む手順は次のとおりです。

1. 新しいライブラリをUXPin Mergeに追加する

どの React ベースのデザイン システムを使用するかがわかったら、それを UXPin Merge と同期します。そして UXPin ダッシュボードの【Merge】タブに移動し、npm パッケージを介してライブラリを追加します。 npm パッケージ名と使用するバージョンを指定する必要があり、 ドキュメントで必要な場合は、「assets location（アセットの場所）」のフィールドにスタイルを追加します。

2. UI コンポーネントを構成する

Merge Component Managerを開き、インポートするコンポーネントを指定しますが、必要に応じてコンポーネントを分類できます。 コンポーネントを作成した後、そのプロパティを管理し、インポートするものを確定します。 ライブラリの文書にアクセスして、プロパティの名前とタイプを確認しましょう。

3. 完全にインタラクティブなプロトタイプの作成を開始

最初のデザインを作成する時が来ました。デザインエディタ（design editor）に移動し、コンポーネントをキャンバスに置きます。 使用するコンポーネントのプロパティを簡単に変更できることをご覧ください。コンポーネントのインタラクティブ性（動きなど）を確認するには、【Preview（プレビュー）】モードに移動します。

プロトタイプは完成しましたか？ これで、プロジェクトのリンクを仲間のデベロッパーに渡すだけで、デザインからコードをコピーしてスペックをチェックできるようになります。

それでは実際にやってみましょう！

1. 統合の使用方法を説明するビデオをご視聴ください。

Youtubeで統合の流れについて一通り説明してくれるビデオをご用意しました。 npmデザイン システムをUXPinにインポートする方法については、この動画をご覧ください。

2. npmコンポーネントをMUI からUXPinにインポートする

MUIをUXPinにインポートしますか? 以下のブログ記事では、一連のプロセスについて説明しています。

MUIのコンポーネントをUXPinにインポートするには？

3. Ant DesignからUXPinにnpmコンポーネントをインポートする

Ant Designは、最も人気のあるライブラリの1つです。 UXPinにログインすると、npm を介してインポートした Ant Design コンポーネントの一部が表示されます。 すぐに使用できるので、 下の記事でUXPinへのインポート方法を確認してください。

 中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド

npm統合 + Patternsを使う

必要なものをすべてインポートし、変更を保存したら、基本的なものからより複雑なコンポーネントを作ったり、同じ手順を何度も繰り返さないように、コンポーネントをプロパティで保存したりすることができます。つまり、パターンを作るのです。

詳しく読む： Patterns（パターン）の使い方

npm統合を試してみよう

npmの統合により、コード化されたUI要素をUXPinに取り込むのにデベロッパーの手助けは必要なく、デザイナーはUIコンポーネントをUXPinに取り込み、好きな方法で自分で管理することができます。

npmの統合でUIコンポーネントを導入しましょう。デザインチームと開発チームを信頼できる唯一の情報源（Single source of truth）でつなぎ、組織のサイロを解消しましょう。14日間のトライアルにサインアップして、ぜひ統合をテストしてみてください。

The post UXPin Mergeで npm 統合するには？ appeared first on Studio by UXPin.

製品とそのデザインシステムは、常に進化し続けるプロジェクトです。製品の規模が大きくなるにつれ、デザイナーはユーザビリティの課題を解決しながら、ビジネス目標やユーザーニーズを満たすために、新しい UI パターンやコンポーネントを作成しないといけません。

デザイナーは新しいパターンを普及させる前に、まずはそれを作らないといけないんです！さらに、大抵の組織では、デザインシステムのガバナンスの手順に従っているため、新しいパターンがライブラリで利用できるようになるまでに時間がかかる可能性があります。

UXPinのPatterns（パターン）では、デザインチームが「既存のMergeコンポーネント」と「標準的なUI 要素」を組み合わせて新しいUIパターンを作成し、UXPinライブラリに保存することができます。

そこで本記事では、UXPin のPatterns（パターン）機能の使い方などをご紹介し、製品やデザインシステムをスケールアップするためどのように活用することができるかをみていきます。

UXPin Merge で完全に統合されたデザインシステムを構築し、製品開発チームに「信頼できる唯一の情報源（Singl source of truth）」を提供しませんか。この革新的なコードベースのデザインテクノロジーの詳細とリクエスト方法については、ぜひ Mergeのページをご覧ください。

UXPin Mergeとは、その仕組み

Merge によって、Gitレポジトリ、Storybook、npmパッケージでホストされているコンポーネントライブラリの要素を UXPin のデザインエディターにインポートして、チーム全体が同じデザインシステムを使えるようになります。そして、デザイナーはその要素を使って、最終製品と完全に一致するプロトタイプを作成することができます。

従来、多くのデザインシステムでは、以下の２つの UI ライブラリが搭載されています：

• デザインチームは静的なUIキットを使用
• エンジニアはコード化されたコンポーネントライブラリを使用

多くの組織は、この二重のシステムが「信頼できる唯一の情報源（Single source of truth）」であると主張していますが、その実現には多くの時間とリソースが必要です。

UXPin Merge は、コンポーネントライブラリが１つしかないため、純粋にそれが「信頼できる唯一の情報源」になり、デザイナーとエンジニアは、同じレポジトリから同じ UI 要素やパターンを使います。

また、Vue、Ember、Web Components、Angularなど、他の一般的なフロントエンド技術については、Merge for Git や UXPin の Storybook 統合を使ってReactコンポーネントを同期することができます。

さらに、デザイナーは Merge の npm 統合を通じて、MUI、Bootstrap、Ant Design、Lightning などのオープンソースのコンポーネントライブラリの npm パッケージをインポートして、完全に機能するプロトタイプまたは最小実行製品（MVP）を構築することもできます。

UXPin パターン（Patterns）とは

パターンとは、デザインチームが Merge コンポーネントと標準的な UXPin UI  要素を組み合わせて、より複雑な UI パターンを構築することができる Merge 独自の機能です。

ブラッド・フロスト氏の「アトミックデザイン」のコンテクストでは、デザイナーはパターンによって、基礎となる UI 要素やコンポーネントである原子や分子を使って、カード、フォーム、ナビゲーション、ヘッダー、フッターなど、有機体やテンプレートなどの大規模で複雑なデザインを構築できます。

UXPin パターンの代表的な使用例として、以下のようなものがあります：

• 現在のライブラリにはない高度なコンポーネントの作成
• よく使うコンポーネントのバリアントのプロパティの保存
• グループ化と保存 要素の大きなUIパターンへの統合
• 一貫性を上げるための新しい UI パターンのデザインチームとの共有
• エンジニアがコンポーネントライブラリに追加するための新しいパターンの推進

デザイナーは、複数のコンポーネントライブラリや UXPin の基本的なコンポーネントの UI 要素を組み合わせて、新しいパターンを作成することができます。この柔軟性は、新しい UI パターンに必要なパーツがデザインシステムにない場合に有益です。

例えば、ドロップダウン メニューを使ったヘッダー ナビゲーションを構築したいけど、現在のデザイン システムにはドロップダウン メニューがないとします。その場合は UXPin の npm 統合を使って、MUI（または他のオープンソースライブラリ）からドロップダウン メニューをインポートし、それを使って新しいナビゲーションのパターンを構築することができます。エンジニアは、MUIのドキュメントを読み、JSXコードを見ることで、新しいパターンのコーディング方法がわかり、それをデザインシステムに追加することができます。

UXPin Patterns（パターン）の３つのメリット

パターンは製品開発およびデザインシステムチームに対して 主に３つの利点があり、この３つは、Merge レポジトリに必要なものがない場合に、パターンが同等の代替手段を提供してくれる点が共通しています。

１．UI 要素を入れ子にして複雑なコンポーネントを構築できる

包括的なデザインシステムがあっても、デザイナーは製品の進化に伴って新しいコンポーネントやパターンを作らないといけないことがよくありますが、多くの場合、そのパターンはデザインシステムには存在しないため、デザイナーは毎回ゼロから構築しないといけません。

特にグラフやデータテーブルのようなものを作る場合、ゼロからデザインすると、貴重な時間がその作業に費やされることになります。その代わりに、このような複雑なパターンを一度作成し、UXPin のパターンライブラリに保存しておくといいでしょう。また、このパターンを他のデザイナーと共有することで、チームで作業が被ったり、矛盾が生じたりすることがなくなります。

多くのデザインツールがこの機能を提供していますが、コードコンポーネントを操作して組み合わせることができるものはありません。これがパターンだと、デザイナーはデザイナーとエンジニアのハイブリッドな役割を担い、１行のコードも書かずに、完全に機能する複雑なUIを構築することができます。

２．同じコンポーネントのプロパティを再利用できる

デザイナーは Merge によって、プロトタイプを画像ベースのデザインツールよりずっと速く構築できますが、より効率的に作成する余地は常に存在します。

例えば、デフォルト、エラー、警告、成功など、さまざまな Merge フォームの入力やボタンの状態についてパターンを保存したいと思うかもしれません。パターンだと、それを一度設定してパターンライブラリに保存し、次の UI（ユーザー インターフェース）のためにドラッグ ＆ ドロップする準備ができます。

このような構築済みのパターンは、デザインスプリントや、ステークホルダーとのミーティングやユーザーテスト中でのちょっとした変更がしたい場合に特に便利です。UXPin のプロパティパネルでプロパティを操作する代わりに、目的のパターンをキャンバスにドラッグするだけですぐに使えますよ！

３．新しいデザインシステムの UI 要素の推進とテストができる

新しい UI 要素は、デザインシステムで魔法のように現れるわけではなく、DSチームは、リリース前にこのパターンを構築してテストする必要があります。UXPin パターンを使えば、DSチームは既存のコンポーネントを 基本的な UXPin やオープンソースのライブラリと組み合わせて、より高い忠実度と機能性でテストおよびイテレーションを行うことができます。

また、UXPin Mergeとパターンを使ったコンポーネント駆動型のプロトタイプによって、デザイナーはエンジニアからのより少ないインプットでイテレーションを行い、エンジニアは最終コンポーネントの開発とデザインシステムのテクニカルバックログの処理に集中することができます。

パターンがあれば、デザインチームはエンジニアが新しいコンポーネントを開発するのを待つ必要がなく、DSチームが作成したプロトタイプのパターンを使うことで、忠実性や機能性を損なうことなく、デザインとテストのプロセスを継続できるのです。

UXPin パターンは、１回こっきりの UI コンポーネントやほとんど使われない UI コンポーネントを作成するのに素晴らしいツールです。このようなパターンは、デザインシステムに昇格するほどには使われていませんが、デザインチームはまだそこへのアクセスが必要な時がありますからね。

それを UXPin パターン ライブラリに保存すると、デザイン システムのレポジトリに追加されることなく、完全に機能する Merge コンポーネントの利点を得られ、エンジニアは、そのコンポーネントを別のレポジトリに保存して、必要なときに使えます。

UXPin Merge Patterns（パターン）の使い方

では、UXPinで新しいMerge パターンを作成するのがいかに簡単であるかをみてみましょう。MUI npm のチュートリアルでインポートしたものと同じコンポーネントを使用しているので、そちらもぜひご覧ください。

以下のパターンは、Merge の npm 統合 を使ってインポートした MUI コンポーネント３つと、UXPin の基本的な テキスト要素 ２つが使われています（デザイン賞はもらえないでしょうけど！）

でもこのようなシンプルなパターンでも設定が必要なので、再利用可能なパターンを作ることで、その繰り返しの作業をなくすことができたらいいですね。

ステップ１

パターンに必要なコンポーネントを追加して配置します。複数のコンポーネントライブラリや UXPin の基本的な要素を組み合わせることができることを忘れずに。

ステップ２

Merge コンポーネントのプロパティを設定します。

• アクセシビリティのために、プレースホルダーとヘルプテキストを備えたメール入力フィールドを作成しました。また、ユーザーが入力しないといけないことがわかるように、このフィールドは「必須項目」としました。
  
  
• 次に、MUIチェックボックスを追加しました。これはユーザーが当社からのメールを受信するためにチェックする必要があります。
• 最後に、ユーザーがメールフィールドとチェックボックスを完了した後にクリックしなければならない場所が明確になるように、MUIボタンを選択し、プライマリに設定しました。

以下は、メールコンポーネントのプロパティパネルの例です。

ステップ３

コンポーネントライブラリの上にある左サイドバーの「Patterns（パターン）」タブに切り替えます。

ステップ４

パターンとして保存したい UI 要素のグループまたは単一のコンポーネントを選択します。左サイドバーの大きな白い「＋Add（追加）」のボタンをクリックすると、新しいパターンが表示されます。

ステップ５

パターンの名前をクリックして、より分かりやすいものに変更したり、デザインシステムの命名規則と一致させます。複数のパターンを用意したら、UXPin の検索機能🔍を使って、必要なものを絞り込むといいでしょう。

パターンの削除

また、下の鉛筆のアイコン（「Enter edit mode（編集モードに入る）」）をクリックすると、古いパターンを削除できます。

削除したいパターンを選択して【Delete（削除）】をクリックします。

複数のステートの作成

デフォルトのパターンができたので、ワークフローをさらに最適化するために、追加のステートを作成したいと思うかもしれません。

例えば、ユーザーがメールアドレスを入力しなかったときに発生するエラーステートのパターンを設定するといいでしょう。

また、ユーザーが有効なメールアドレスを入力し、入力を確認した場合にのみ、ボタンが有効になるような無効ステートを作るのもいいですね。

これで、プロトタイプを始めるのに３つのニュースレターパターンの準備ができました。デザイナーは、プロパティの設定やパターンからの個々のコンポーネントの切り替えを気にすることなく、ドラッグ＆ドロップで簡単に変更することができます。

UXPin MergeとPatternsでワークフローを効率化する準備はできましたか？Merge へのアクセス権をリクエストして、さっそく使ってみましょう。

The post UXPin Merge Patterns（ パターン ）の使い方・チュートリアル appeared first on Studio by UXPin.

２０２１年１２月から２０２２年１月にかけて、UXPin と Whitespace は、約２０の企業レベルの組織のデザインシステムマネージャーにインタビューを行い、この調査を「Design Systems and DesignOps in the Enterprise（企業における デザインシステム とDesignOps）」と題した１万語の無料 レポート にまとめました。

 レポート は以下で無料でダウンロードできます：Design Systems and DesignOps in the Enterprise.

この記事は、本レポートの概要と、調査から学べることをまとめたものです。理想では、組織で共通のツール、文書、ガバナンスがあることが望まれますが、現状ではこれらの結果を効果的に達成できていないことがわかりました。

 レポート の目的

UXPin のチームは、組織がどのように デザインシステム を利用しているのか、そしてその利用を促進および効率化するために DesignOps がどのような役割を担っているのかを理解したいと考えていました。

このレポートを通じて、 デザインシステム に関する「組織の課題」を把握し、その課題を解決するためのツールやソリューションを明らかにしたいと考えました。

調査資料

UXPin は Whitespace と提携し、アメリカ、スイス、ドイツ、フランス、イギリス、インドネシア、オーストラリアの７カ国から１９の企業機関にインタビューを行いました。

その企業はそれぞれ、テクノロジー、ヘルスケア、輸送、小売、行政など、様々な業界へのサービスを提供しています。

インタビュー内容

各組織への取材では、以下の重要な６テーマを取り上げました：

1. これまでの デザインシステム の歩み
2.  デザインシステム の成熟度
3. ガバナンスとプロセス
4. デザイナーとデベロッパーの連携と課題
5. ロードマップとマイルストーン
6. 既存の市場調査との比較

企業の現状

デザインシステムに関する多くの企業の現状は以下のようになります：

• 「信頼できる唯一の情報源（Single source of truth）」が主な目標だが、サイロと不十分な文書によって、この理想的な成果への進歩が妨げられている
•  デザインシステム のガバナンスのサポートが欠けており、チームメンバーは自分の仕事の ROI （投資収益率）を示そうとリソースを浪費してしまう。
•  デザインシステム の導入が多くの組織で課題となっている
• デザインシステムの成熟度は組織や業界によって大きく異なり、多くの場合、リーダーシップやステークホルダーのサポートに左右される

無料ダウンロードはこちらより：Design Systems and DesignOps in the Enterprise.

各章の簡単な概要

デザインチーム

デザインチーム編では、組織構造や部門横断的な連携、そしてデザインシステム採用への影響について述べられています。

リーダーシップのサポートがあるケースでも、サイロや不十分なコミュニケーションチャネルにより、デザインシステムの導入が遅れたり大変になったりしています。そこで本レポートでは、以下のような解決策を概説しています：

• チーム間の透明性のあるコミュニケーション
• 「信頼できる唯一の情報源（Single source of truth）」の確立
• 測定可能な目標設定および、進捗確認のための KPI の設定
• 共通の目標に向けたチーム全体の責任の割り当て

デザインプロセス

デザインプロセス編では、作業標準、ハンドオフプロセス、チームの願望について見ていますが、デザイナーは新しいものを作るのを好み、デベロッパーは使い回せるだけ使い回したいということがわかりました。

多くのデザインシステムのワークフローやコンポーネントは時代遅れになっており、コンポーネントライブラリの更新、要素の追加、全体的な変更などは、企業にとって最大の懸念になっています。

もう一つの課題は、デザインハンドオフです。ほとんどの組織で、現在のデザインプロセスに対する懸念の声が聞かれましたが、より効果的にするための明確な道筋は示されていませんでした。しっかりとしたデザインシステムがあっても、デザインから開発への移行は大変であり、チームは、このハンドオフプロセスをシンプルにするためにツールを採用しますが、断片的なコミュニケーションと非効率がよく起こってしまいます。

ツール

ここでは、デザインおよび開発時に使うツールが、デザインシステムの採用や成功にどのような影響を与えるかを探ります。

多くの企業は「信頼できる唯一の情報源（Singe source of truth）」をもたらす直感的なツールが必要であると認識していますが、ツールを変えるのは、みんなの意識を変えるために時間とリソースを必要とする大変な仕事です。

 デザインシステム のドキュメント

デザインシステムを管理する上で最も大変な作業の１つは、その各部を常に最新の状態に保つことであり、ドキュメントは、デザイナーやデベロッパーが一貫した UI を提供するための労力をモデル化できるようにするための貴重なリソースになります。

組織は、適切なドキュメントなしには、製品のデザインと納品の成功はほぼあり得ないことがわかりましたが、デザインシステムのドキュメントの維持に必要な帯域は、特にリソースの少ない小規模なチームにとっては大変です。

適切なツールによって、文書化のための構造を提供しながら、デザインシステムの成熟を促進することができます。ツールについての詳細は、以下のレポートからご覧ください：Design Systems and DesignOps in the Enterprise.

デザインシステムの採用

デザインシステムの採用には、その価値と効率性をステークホルダーに理解してもらうための継続的な伝道（トレンドや新技術などをわかりやすく伝えること）とアウトリーチが必要です。

効果的な採用には、トップダウンのサポートと人事および DesignOps チームによる変更管理が必要であり、採用戦略は、組織が進捗をモニタリングし、成功したイニシアチブを特定できるように、測定できるものでないといけません。

理想的なモデル像

調査から得られた見解をもとに、理想のデザインシステムモデルのビジョンをまとめました。理想的なデザインシステムの枠組みは組織によって異なりますが、明確に共通しているのは、「より良い製品開発のための、より効果的なワークフローの構築 」でした。

組織は、以下のような目的達成のために、デザインシステムを導入します：

• 効率性を高め、要素やコンポーネントを複製する機能を使用した、大規模なデザインおよび開発作業の作成
• デザインリソースへの負担の軽減
• 統一されたデザイン言語の作成
• 製品、チャネル、部門を超えたビジュアルの一貫性の創出
• 明確な基準、プロセス、ドキュメントを備えたオンボーディングツールとしての提供

 レポート の活用法

この調査は、製品開発およびデザインシステムに関して、企業が同じような問題を抱えていることが示されています。なのでこの調査結果を共有することで、他の企業が同じような課題をどのように解決したか（あるいは解決する予定か）に基づき、企業が解決策をモデル化できるよう、また、デザインシステムの成熟度や製品デザインの未来をめぐる議論につながるよう期待しています。

 レポート を無料ダウンロードできます：Design Systems and DesignOps in the Enterprise.

The post 企業のデザインシステム活用とDesignOpsに関する レポート appeared first on Studio by UXPin.

皆さんご存知かと思いますが、 Storybook は開発チームの生産性を大きく向上させ、開発や作業のスケールアップや同じページでの作業をスムーズにしてくれるツールです。このツールは、UXPinでも活用できる新バージョンになります。今回のアップデートでは、いくつかの大きな改善点が加わり、 Storybook の機能が拡大されました。

 Storybook のコンポーネントをUXPinに取り込み、最終製品のような外観と機能を持つプロトタイプをデザインできます。デザインと開発間の一貫性を保ち、信頼できる唯一の情報源でチームをひとつにまとめましょう。UXPinのStorybook統合をこちらのリンクよりぜひお試しください。

 Storybook 7.0の魅力は？

Storybook 7.0の正式リリースは3月14日を予定しています。正式リリースに先立ち、ベータ版でお試しいただき、その効果を体験していただくこともできます。詳しくは、Storybookの2023年の予定についての記事でご紹介しています。

パフォーマンスの向上

Storybookのチームは、ツールの性能を大幅に向上させました。前バージョンに比べ、2倍以上のスピードを実現しました。

より多くの互換性のある統合を実現

Storybookの新バージョンでは、統合がより簡単になりました。Frameworks APIを提供開始に伴い、StorybookはVite、NextJSをサポートし、SvelteKitのサポートに取り組んでいます。また、Remix、Qwik、SolidJSなどの新しいフレームワークとの統合を検討できるようになったそうです。

より広範囲なテストが可能

コード・カバレッジ・レポートが追加されました。これで、コンポーネントやライブラリのどの行のコードが、ユーザーのストーリーによってテストされているかが見えるようになりました。

ドキュメントの改善

Storybookでは、ドキュメンテーションについてもいくつかのアップデートがあります。その1つとして、StorybookのチームがドキュメントをMDXのバージョン2にアップグレードしたことです。また、docsのストーリー（コンポーネント例）のインポート方法をより簡単にしたそうです。

Storybook 7.0とUXPinの連携

UXPinはすでにStorybook 7.0をサポートしています。StorybookのコンポーネントをUXPinと同期させましょう。とても簡単で、製品デザインや 開発プロセスを向上させる多くのメリットを得ることができます。

 Storybook のコンポーネントを使ったプロトタイプの作成

UXPinに持ち込まれたコンポーネントは、Storybookにあるものを単に視覚的に表現しているの だけではありません。これらは実際に機能し、実際のユーザーインタラクションをテストすることができます。これこそが、忠実度の高いプロトタイピングのあるべき姿なのです。

部門横断的なコラボレーションを促進

この統合では、製品設計と開発の間のサイロ化を解消することができます。チームは同じコンポーネントを共有することで、デザインと開発の間に起こる問題を防ぐことができます。

デザインハンドオフの効率化

完全に機能するコンポーネントでプロトタイプを作ることで、デザイナーはデザインのハンドオフプロセスを円滑に進めることができます。Storybookのコンポーネントは、チーム間で共有する信頼できる唯一の情報源となるため、大量のドキュメントを作成する必要がなく、ズレも生じません。

 Storybook との連携方法

統合には1分もかかりません。以下の動画でご紹介します。

使用したいStorybookライブラリへのリンク（パブリックまたはプライベート）が必要で、UXPinにログインし、フォームにリンクを貼り付けて新しいライブラリを追加します。

UXPinのStorybook統合のガイドツアーはこちらです。

UXPinと Storybook  7.0を試してみる

StorybookはUIコンポーネントの品質管理に最適なツールですが、UXPinと組み合わせることで、デザインシステムの維持と拡大につながります。Storybookコンポーネントを使ったインタラクティブなプロトタイプのデザインを始めましょう。

The post Storybook 7.0 – 待望のアップデート情報と注目すべきポイント appeared first on Studio by UXPin.

自分に合ったデザインツールをお探しですか？すでにリサーチされている方は、デザインツールは様々な機能があることはすでにご存知だと思います。数多くあるUXツールが多くの機能を提供しているなかで、今の自分に一番あったツールを選ぶことは難しいですね。1つのツールのみではなく他のツールも並行して使いこなす必要があるかもしれませんし ね。

製品開発やデザインプロセスでの効率性において、どのような機能をみるべきか、なぜそれが必要なのかをご紹介します。

開発とデザインの連携をサポートするツールをお探しですか？UXPin をぜひ無料でお試しください。

デザインプロセスにおいて、UX ツール がどのように役立つのか

最適なUX プラットフォームを探すために、おさえておくべき７つの主要な機能をそれぞれご紹介します：

１．リアルタイムでの連携が可能

  リアルタイムでの連携で、チームメンバーが同じ部屋にいるかどうかにかかわらず、同じプロジェクトでチームと一緒に作業することができるようになります。これにより生産性が上がり、リモートで作業している人も他のチームメンバーとリアルタイムでやり取りができるようになります。例えば、UXPin は高度な連携能力を備えており、プロジェクトに対するフィードバック取得や、コメント、プロトタイプの共有も可能です。

また、プロジェクトの保存や、過去に保存したバージョンをコマンドでめくることも可能ですし、連携の環境を充実させるために、Slackや Jiraとの統合もできます。チームのメンバーが編集した箇所も確認できるので、チーム全員の足並みを揃えることができます。

２．便利なデザインハンドオフ機能がある

  ご存知のように、プロトタイプが完成すると、次はデベロッパーにプロトタイプを渡し、完成品を作ってもらうことになりますが、残念ながらこのプロセスは単純ではありませんよね。

Adobe XD のようなハイエンドなツールでは、ユーザーが他のチームメンバーとデザインドキュメントを共有することができ、これは簡単なプロセスですが、デザインが通常「ベクター」でレンダリングされるという問題があります。

一方、UXPin はデザインを「コード」でレンダリングします。

デザインドキュメントが「ベクター」ではなく「コード」でレンダリングされるため、デベロッパーはデザインの各コンポーネントを明確に理解することができます。さらに、最終製品を作る際にも、デベロッパーはコード化されたデザインを参照することができ、より迅速で便利な開発プロセスを実現できるのです。コード化されたデザインで、チームは製品を市場投入プロセスでの誤解や混乱を回避することができるのです。

３．インタラクティブなプロトタイプ

  インタラクティブなプロトタイプは、アイデアを試すことができるインタラクティブな環境を作ることで、さまざまなデザインアイデアを探求できるため、ますます人気が高まってきています。また、デザインの説明やアイデアの売り込みの際にも、そのデザインの価値をより深く理解してもらうのに最適です。UXPinにはインタラクティブなプロトタイプ機能が搭載されており、それを利用することで、以下のことが実現します：

• 製品がどのようなものになるかを十分に理解し、体験することができるようにするための、エンジニアやステークホルダーに作成したデザインのよりインタラクティブな体験を提供
• ユーザーがどのようにデザインを使用するかについて、より正確なフィードバックとデータを収集するための、実際のユーザーでの製品テスト
• ステート、変数、高度なインタラクションなどの機能を用いて、完成品と同様の機能を持つプロトタイプのデザイン
• デザインに名前や画像などを追加してくれる自動生成機能を使って、プロトタイプをより完成品に近づけるための詳細の追加
• デザインの良さを最大限に引き出すための、ボタンのホバー（hover）や条件付きナビゲーションフローなどのインタラクティブなコンポーネントの作成

  UXPinがあれば、プロトタイプが静的でクリックもできないデザインにはなりません。その代わり、完成品の外観、UX、機能が正確に反映された動きのあるプロトタイプを作成することができます。  

４．ステークホルダーがデザインを理解できる 

ご存知のように、製品をデザインする際には、ステークホルダーや関係者とも足並みを確実に揃えるのが不可欠です。そのため、新しいアイデアのブレストからデザインのテストに至るまで、デザインプロセス全体を通じて彼らを関わらせることが重要です。

上記のことから、UXデザインツールで必要なことは：

• ステークホルダーがインタラクティブな体験を通じて、プロトタイプやデザイン・コンポーネントを体験・試用することができ、それによって、デザインとそれが完成したときにどのように展開するかがわかりやすくなる。
• デザインプロセスを通じて、ステークホルダーがデザインにフィードバックを残すことができる。ちなみにUXPinでは、comment機能から他の人がデザインにコメントや質問でき、その場にいなくても、フィードバックへの返答が簡単にできる。

５．デザイナーとデベロッパーのコミュニケーションをサポートする

  デザイナーは、デザインを作るだけでなく、デベロッパーに完成品を作る方法を伝える役割も担っています。特に、リモートワークが主流となりつつある現代では、コミュニケーションは非常に重要であるため、適切なコミュニケーションツールの導入は、デザインプロセスにおいて不可欠な要素となっています。  

そこで、UXPinのようなツールを使うと、デベロッパーとのコミュニケーションと理解を深めることができます。UXPinのMergeテクノロジーでは、Git レポジトリや Storybook との統合も可能で、デザイナーがデベロッパーと同じ技術を使うことで、２つのチーム間で一貫性を生み出せるようになります。

最終的に、Mergeはデベロッパーとデザイナーの両方が使えるツールであるため、複雑な問題が発生することなく、両者が一緒になってプロジェクトを進めることができるでしょう。

６．プラグインの購入が必要ないツール

  筆者のように、その機能の多くが有料であることに製品購入後に気付くと、イライラすることがあります。ただ残念ながら、市販のデザインツールには、そのようなものがけっこうあるんです。

世の中の多くのデザインソフトには、必要な機能が不足しており、そのため、デザイナーが製品を完成させるためにプラグインを購入しなければならないケースも珍しくありません。

UXPin を使う場合、ありがたいことに必要な機能はすべて組み込まれていて追加費用はかからないので、プラグインの購入は不要です。つまり、UXPinにはデザインを最初から最後まで行うために必要なものがすべて備わっているのです。

７．MacとWindowsの両方で利用でき、クラウドベースである

イメージベースのデザインツールはウェブベースでであるため、デザイナーはさまざまなデバイスを使用する際に、互換性の問題やさまざまな制限にぶつかることがあります。そこで、Mac、Windows、クラウドベースなど、複数のシステムで利用できる互換性のあるデザインツールを見つけることが重要になってきます。

UXPinはウェブ上だけでなく、デスクトップアプリケーションからも使えます。さらにいくつかのプラグイン機能を搭載しいるため、Figmaをお使いの方はデザインをUXPinにインポートすることで、より多くの機能を利用できるようになり、システム間での使い勝手もよくなります。

UXPinは、Finder/Explorerへのダウンロードも、ウェブベースのバージョンの使用も可能であり、ダウンロードしたソフトウェアを使うことで、オフラインの状態でもプロジェクトに取り組むことができる機能が追加されます。

さらに、UXPin はモバイルアプリのビューも備えていることから、モバイルデバイス用のプロトタイプを作成してテストすることができ、アプリの UX についての評価ができるようになります。

UXPin で UXデザインプロセスを実践しよう

  UXPinはすべてのデザイナーにとって、まさに「１つで全てをこなせるソリューション」です。様々なショートカットキーもあり、デザインを拡大縮小したり、インタラクティブなプロトタイピングを行うなど必要な機能はすべて備わっています。

UXPinには充実した連携機能も備えており、リモートで仕事をしているかどうかにかかわらず、全員がチームとシームレスに協働できます。さらに、デバイスやシステムに関係なく利用できるため、チームメンバー間の互換性の問題もありません。  

シンプルなデザインから複雑なシステムまで、UXPin にはプロジェクトの最初から最後まで必要な機能がすべて備わっています。UXPin の無料お試しでぜひご体験下さい。  

The post 自分に合ったUX ツール の選び方とは？注目すべき７つの機能 appeared first on Studio by UXPin.

UXPin とMergeの違いは何だろうと思われるかもしれません。そして、どちらが自身のデザイン チームに適しているのでしょうか？  

簡単に言うと、UXPinはデザインハンドオフを含む製品デザインプロセス全体を一緒にカバーするオールインワンデザイン「ソフトウェア」で、MergeはUXPinにインタラクティブなコンポーネントを持ち込み、それを使ってプロトタイプをデザインできるようにする「技術」です。  

  つまるところ、Mergeテクノロジーは、デザイナーとデベロッパーの両方が「信頼できる唯一の情報源（Single source of truth）」を共有して一貫したUIを作成できる、より協力的で迅速なデザイン プロセスにつながります。UXPin Merge の詳細はぜひこちらでご確認ください。  

画像ベースと コードベース のデザインツール

  UXPinとMergeについて見ていく前に、画像ベースとコードベースのデザインツールの違いを把握しておくことが重要です。  

コードベースのデザインツールと聞くと、デザイナーはデベロッパー向けのツールだと思ったり、コードを学ばなければ使えないと思ったりしますが、どちらも間違いです。  

コードベースとは、UXデザイナーがキャンバス上に作成したものを、ツールがどのようにレンダリングするかということを指し、従来の画像ベースのツールは静的なベクタグラフィックスを生成しますが、コードベースのツールはコードをレンダリングします。  

詳しく読む： Figmaのデザインをインタラクティブなプロトタイプにしよう

コードベースのツールには、インタラクティブ性のためのより多いオプションが大体あることを除けば、大抵はデザイナーはこの2つのインターフェースを比べても大きな違いを感じることはないでしょう。  

たとえば、画像ベースのツールを使って入力フィールドを作成した場合、それはキャンバス上のブロックに過ぎません。UXPinでは、入力は最終的な製品と同じように動作し、ユーザーが入力欄をクリックするとカーソルが表示され、テキストを入力することができます。そしてデザイナーは、UXPinのさまざまな機能によって以下ができるようになります：  

• 入力の有効性確認
• 文字、数字、記号などのパスワードの条件チェック
• ウェルカムメッセージの個別化
• ユーザープロファイルページの作成

UXPinとは

  UXPinは、高度なプロトタイプテストのためのエンドツーエンドのコードベースのデザインツールであり、デザイナーは、最終製品のインタラクションや機能を正確に再現するプロトタイプを作成できます。

UXPinは、他のデザインツールと同じように見えますが、UXワークフローやコラボレーション、プロトタイプ、およびテストを強化する機能を備えています。  

以下は主な機能の一部です：  

• 変数
• インタラクションと条件付きインタラクション
• エクスプレッション
• オートレイアウト
• デザインシステム
• コメント

変数

  変数によって、デザイナーは入力フィールドからデータを取得し、プロトタイプの他の場所で使うことができます。この例は、サインアップフォームのデモで、ユーザーのメールアドレスを取得し、確認ページを個別化する方法が表示されています。

インタラクションと条件付きインタラクション

UXPinで、プロトタイプへのインタラクションの追加が数回のクリックで簡単にできるようになり、デザイナーは、最終製品のインタラクティビティを正確に模倣するトリガー、アクション、アニメーションの豊富なリストを利用できます。

条件付きインタラクションは、Javascriptがデベロッパーに提供するのと似たような感じで、【if-then】と【if-else】の条件によって、インタラクションをさらに高いレベルに引き上げることができます。

デモのサインアップフォームに戻り、条件付きインタラクションを使って、ユーザーがメールアドレスとパスワードのフィールドを空白にした場合にエラーメッセージを表示する方法を見てみましょう。ユーザーが入力の条件を満たしたときのみ、確認ページに進むことができます。

エクスプレッション

エクスプレッションで、プロトタイプは次のレベルに上がり、それによってデザイナーはコードと同等のダイナミックなUX（ユーザーエクスペリエンス）を作成できるようになります。サインアップフォームのプロトタイプでは、メールと入力フィールドの条件を定めるために、以下のような【エクスプレッション】を使います：

• メールアドレス：@記号と、.com や.co.jp などの「ドメイン拡張子」が必要
• パスワード：8文字以上

デザイナーは、コンポーネントやプロトタイプに好きなだけエクスプレッションを追加し、それによってコードと見分けのつかないような結果が得られます。

オートレイアウト

多くのデザインツールにオートレイアウトがありますが、UXPinのオートレイアウトは、Flexboxの命名とプロパティを使って現実的な期待値を作り出し、デザイナーとデベロッパーの提携を向上します。

デザイナーは、オートレイアウトを使ってデザインのサイズ変更やフィット、配分、塗りつぶしを自動的に行い、それによって、手動で行ったら時間を食うような作業はなくなります。  

さらに読む：UXPinのオートレイアウト機能をご紹介  

デザインシステム

  デザインシステムは、文書化や権限の設定など、ゼロからデザインシステムを構築するための素晴らしい機能であり、これによってデザイナーは、デザインシステムで再利用可能なコンポーネントのライブラリの作成や、組織全体でのその共有ができるようになります。  

UXPinは、デザインシステムを以下のように自動的に分類します：  

• 色
• タイポグラフィ
• アセット
• UI（ユーザーインターフェース）のパターン

  左側のサイドバーにはライブラリ全体が表示されるので、デザイナーは要素をドラッグ＆ドロップするだけでUI（ユーザーインターフェース）を構築することができます。 

また、UXPinにはOS（オペレーティングシステム）、マテリアルデザイン、ブートストラップ、ファンデーション、ユーザーフローの5つの内蔵されたデザインライブラリがあり、チームはプロトタイプやMVP（Minimum Viable Product）をサッと作成して、デザインプロセスのあらゆる段階でアイデアや仮説を検証することができます。  

コメント

コメント機能によって、デザインチームやステークホルダーは、連携やフィードバックの共有、タスクの割り当て、デザインプロジェクトやプロトタイプのプレビューへのコンテキストの提供ができるようになります。

UXPinでは、誰でも【プレビューへのコメント】機能を使えるため、ステークホルダーやデベロッパーなどのUXPinのキャンバスへのアクセスが不要なユーザーのための、追加でのユーザー購入が必要ありません。また、デザイナーはデザインをパスワードで保護することができるので、許可された人しかデザインを見ることができません。  

UXPinの用途

  デザインチームは、デザインプロセスのあらゆる段階でUXPinを使います。高忠実度のプロトタイプはUXPinの最大の特徴ですが、既製のフォームを使うことでそれが優れたワイヤーフレーム作成ツールになります。  

以下は、画像ベースの競合他社よりもUXPinが一歩先行く一例です：  

• インタラクティブなプロトタイプ
• IFTTT（イフト）によるAPI 統合
• 高速なデザインイテレーション
• デザインチーム、エンジニア、ステークホルダーとの連携
• よりスムーズなデザインハンドオフ
• ゼロからのデザインシステム構築と拡張
• UXPinの機能に関する情報やチュートリアルを提供するUXPinのドキュメント
• UXPinの機能を実際に使用したインタラクティブなパターンとアプリの例

  コードベースのデザインがどのようなものかご覧になりませんか？今すぐ無料トライアルにサインアップして、UXPinでインタラクティブなプロトタイプ”第１号”を作成しましょう。  

UXPin Mergeとは

  UXPin Mergeは、レポジトリからUXPinのデザインエディタにコードコンポーネントを同期させる技術であり、組織は Merge をオープンソースのライブラリと一緒に使ったり、製品のデザインシステムをインポートしたりすることができます。

デザイナーは、このようなコードコンポーネントをビルディングブロックのように使い、ドラッグ＆ドロップで UI を構築しますが、Mergeのコンポーネントには、インタラクション、ステート、カラー、タイポグラフィー、サイジングなど、デザイン システムで確定されたプロパティが含まれます。  

そのプロパティはUXPinのプロパティパネルに表示され、そこでデザイナーはプロトタイピングの要件に応じて調整を行うことができます。  

この例では、MUIのデザインシステムで確定されたプロパティを使って、色、サイズ、変数を変更し、アイコンを追加する方法を説明しています。  

Merge はこのようなプロパティをレポジトリから取り出し、変更があれば自動的に同期します。たとえば、デザイン システム チームが原色を青から赤に変更した場合、Merge はその更新を検出し、デザイン チームにその新しいリリースを通知します。  

さらに、バージョン管理により、デザイナーは最新のリリースに切り替えるタイミングを選択でき、いつでも初期のバージョンに戻すことができます。  

UXPin Mergeでデザインシステムを同期させる方法

  UXPin Mergeでデザインシステムを同期させるには、以下の３つの方法があります：

• Git統合：Reactのコンポーネントライブラリのみ対象
• Storybook統合：React、Angular、Ember、VueなどのStorybookのライブラリ向け
• npm統合: npmレジストリで利用可能なオープンソースライブラリからコンポーネントをインポート

この 3 つの統合は、それぞれ異なるプロトタイプとチームのニーズに対応します。Git と Storybook の統合では、Merge 用のコンポーネントとレポジトリをセットアップするのに技術的な知識が必要ですが、UXPin はエンジニアのためにボイラープレートを提供し、当社の技術チームがセットアップ プロセスを指導します。  

Storybookは、エンジニアがコンポーネントを単独で構築し、プロトタイプを作成・テストしてからデザインチームのUXPinにプッシュできるため、プライベートのデザインシステムとしてはおそらくベストな選択肢でしょう。  

npm 統合と Mergeコンポーネントマネージャー により、デザイナーはインポートするコンポーネントとプロパティをもっとコントロールできるようになります。デザイナーはデザイン システムのドキュメントに従うことができ、UI 要素をインポートするのにエンジニアを必要としません。  

Mergeの主な利点

  Merge の主な利点は、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成することです。デザイナーとエンジニアは同じレポジトリから同じコンポーネント ライブラリを使い、以下のようにしてシームレスなデザインハンドオフ プロセスを作成します。  

1. エンジニアは、ただコンポーネントライブラリをインポートする
2. UXPinがコンポーネントプロパティから生成するJSXの変更をコピーする
3. そして、デザインチームのプロトタイプに従って、最終製品を開発する

  この効率化されたワークフローは、以下のような多くの製品開発の効率化を生み出します：

• 高速プロトタイプ（Paypalは速さが８倍アップ）
• 市場投入の時間短縮
• ゼロからのデザインが不要
• フロントエンドのコーディングが全くまたは殆どない
• デザインドリフトがない
• UXとフロントエンドの負債の減少
• 少ないコミュニケーションとドキュメントでのシームレスなハンドオフ
• 完全なまとまりと一貫性
• ステークホルダーからのより質の高いフィードバック
• テスト中の有意義で実用的な結果
• 質の高い結果　=　よりよいUX（ユーザーエクスペリエンス）

UXPinからMergeへ – 拡張性の高いデザインソリューション

  UXPinは、成熟期のあらゆる段階でワークフローをサポートするツールと機能を備えた、拡張性のあるデザインソリューションを企業に提供します。

Mergeでの拡張

  急成長中のスタートアップ企業であれ、多国籍企業であれ、Merge で企業のデザイン業務の拡張が可能になります。  

FinTechの大手であるPayPalと大手ソフトウェア開発会社のIressは、UXPin Mergeに切り替えることでワークフローの最適化と連携が強化されたことを経験しています。

企業レベルでは、Mergeには製品開発チーム全体にわたって「信頼できる唯一の情報源（Single source of truth）」があるため、チームがより速やかに行動できるようになります。デザイナーとエンジニアが同じ言語で話し、同じ制約の中で作業するため、摩擦が少なく、より良い連携が可能になるのです。

Merge のデザイナーが UXPin でボタンなどの UI コンポーネントを作成する際に使うのは、エンジニアが最終製品を開発するためにレポジトリから取得するのとまったく同じボタンか何かです。  

また、筆者たちはMerge がスタートアップ段階の企業をどのようにサポートしているかも見てきました。例えば、スタートアップ企業である TeamPassword には UX チームがないため、エンジニアはプロトタイピングとテストに UXPin Merge を使っています。また、Merge はドラッグ＆ドロップの環境を作るので、従来のデザインツールに比べ、学習曲線が大幅に短縮されます。  

TeamPassword のエンジニアは、プログラミングしたコンポーネントを使って UXPin でプロトタイプを作成するため、テスト、変更、イテレーションを速やかに行うことができます!  

Merge のパワーでプロトタイピングとテストを次のレベルへステップアップしませんか。詳細およびアクセス要求方法については、Mergeのページをぜひご覧ください。

The post UXPinとMergeの違いをわかりやすく解説！ appeared first on Studio by UXPin.