ペースト＆置換

この機能を使うと、要素をクリップボードにコピーし、キーの組み合わせでキャンバス上にある要素と入れ替えることができます。要素を削除して代わりに別の要素を貼り付けるのではなく、「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.

このブログでは、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.

自分に合ったデザインツールをお探しですか？すでにリサーチされている方は、デザインツールは様々な機能があることはすでにご存知だと思います。数多くある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のデザイン をインタラクティブなプロトタイプに変える

大抵の場合、デザイナーはこの２つのインターフェースを比べても、コードベースのツールの方が一般的にインタラクティブ性のオプションが多いこと以外は、大きな違いは感じないでしょう。

たとえば、画像ベースのツールを使って入力フィールドを作成した場合、それはキャンバス上のブロックにすぎません。UXPin では、入力は最終製品と同じようにでき、ユーザーが入力をクリックするとカーソルが表示されて文字を入力できます。UXPin のさまざまな機能を使って、デザイナーは次のことができます：

• 入力の検証
• パスワード基準のチェック（文字、数字、記号など）
• ウェルカムメッセージの個別化
• ユーザープロファイルページの入力

UXPin とは

UXPin は、高度なプロトタイプとテストのためのエンドツーエンドのコードベースのデザインツールであり、デザイナーは、最終製品のインタラクションや機能を正確に再現したプロトタイプを作成できます。

UXPin は見た目も使い勝手も他のデザインツールと変わりませんが、UX ワークフロー、コラボレーション、プロトタイプ、テストを強化する機能があります。

主な特徴として以下が挙げられます：

• Variables（変数）
• インタラクションおよび条件付きインタラクション
• Expression
• Auto Layout（オートレイアウト）
• デザインシステム
• コメント

Variables（変数）

デザイナーは Variables（変数）を使って、入力フィールドからデータを取得し、それをプロトタイプの別の場所で使うことができます。このデモの登録フォームの例では、ユーザーのメールアドレスを取得して確認ページをパーソナライズする方法がわかると思います。

インタラクションおよび条件付きインタラクション

UXPin では、数回のクリックで簡単にプロトタイプにインタラクションを追加でき、デザイナーは、最終製品のインタラクティブ性を正確に模倣するトリガー、アクション、アニメーションなどを利用できます。

条件付きインタラクションでは、「if-then」や「if-else」の条件によって、インタラクティビティの幅がぐっと広がります。‐ デベロッパー向けの JavaScript   の機能みたいな感じですね。

デモの登録フォームに戻ると、メールアドレスとパスワードの欄が空白の場合に、ユーザーにエラーメッセージを表示するために条件付きインタラクションを使う方法がわかります。ユーザーが入力条件を満たしたときだけ、確認ページに進むことができるというわけです。

Expression

Expression でプロトタイプがレベルアップすることで、デザイナーはコードと同等のダイナミックなユーザー体験を作成できるようになります。登録フォームのプロトタイプでは、Expression を使ってメールアドレスと入力フィールドの条件を以下のように定めています：

• メールアドレス：@記号と（.com、.co.ukなどの）ドメイン拡張子が必要。
• パスワード：８文字以上

デザイナーは、コンポーネントやプロトタイプに好きなだけ Expression を追加して、コードと遜色のない結果を得ることができます。

Auto Layout（オートレイアウト）

多くのデザインツールに自動レイアウトがありますが、UXPin の Auto Layout（オートレイアウト）は Flexbox の命名とプロパティを使って、現実的な期待値を作成し、デザイナーとデベロッパーの連携を改善します。

デザイナーは Auto Layout （オートレイアウト）を使って、デザインのサイズ変更、フィット、配分、塗りつぶしを自動的に行うため、時間のかかる手作業がなくなります。

さらに読む：UXPinのオートレイアウト機能をご紹介

デザインシステム

デザインシステムでは、デザイナーは再利用可能なコンポーネントのライブラリを作成し、組織全体で共有することができます。これは、ドキュメント作成や権限の設定など、デザインシステムをゼロから構築するための素晴らしい機能です。

UXPin はデザインシステムを次のように自動的に分類します：

• カラー
• タイポグラフィ
• アセット
• UIパターン

ライブラリ全体が左側のサイドバーに表示されるので、デザイナーは要素をドラッグ＆ドロップするだけで UI（ユーザーインターフェース）を構築できます。

また、UXPin には、OS、Material Design、Bootstrap、Foundation、User Flows の５つのビルトインデザインライブラリがあるため、チームはプロトタイプや MVP（実用最小限の製品）を速やかに作成し、デザインプロセスの各段階でアイデアや仮説をテストすることができます。

コメント

コメント機能によって、デザインチームとステークホルダーは、連携、フィードバックの共有、タスクの割り当て、デザインプロジェクト内やプロトタイププレビューへのコンテクストの提供などができます。

UXPin では、誰でもプレビューでコメント追加の機能を使えるため、UXPin のキャンバスにアクセスが必要ないステークホルダーやデベロッパーなどのために「ユーザー」を追加購入する必要がありません。また、デザイナーはデザインをパスワードで保護することができるため、許可された人だけがデザインを見ることができます。

UXPin の用途

デザインチームでは、デザインプロセスのあらゆる段階で UXPin が使われます。忠実度の高いプロトタイプが UXPin の最大の特徴ですが、既成のフォームを利用することで優れたワイヤーフレームツールにもなります。

UXPin が画像ベースの競合他社を凌駕している例として、以下が挙げられます：

• インタラクティブなプロトタイプ
• IFTTT による API 統合
• 迅速なデザインの反復
• デザインチーム、エンジニア、ステークホルダーとの連携
• よりスムーズなデザインハンドオフ
• ゼロからのデザインシステムの構築と拡張

さらに読む：

• UXPin の機能に関する情報やチュートリアルのための UXPin ドキュメント
• UXPinの機能の動作を示すインタラクティブなパターンとアプリの例

コードベースのデザインがどのようなものかご覧になりませんか？こちらの無料トライアルに登録して、UXPin でインタラクティブなプロトタイプ第一号を作成してみましょう！

UXPin Merge とは

UXPin Merge は、レポジトリから UXPin のデザインエディターにコードコンポーネントを同期させる技術であり、オープンソースライブラリで使うことも、自社製品のデザインシステムをインポートすることもできます。

それでデザイナーは、コードコンポーネントを積み木のように使い、ドラッグ＆ドロップで UI（ユーザーインターフェース）を構築します。

Merge のコンポーネントには、インタラクション、ステート、カラー、タイポグラフィ、サイズ設定など、デザインシステムによって定められたプロパティが含まれます。そのプロパティは UXPin のプロパティパネルに表示され、そこでデザイナーはプロトタイプの要件に応じて調整を行うことができます。

プロパティを使って、色、サイズ、バリアントの変更や、アイコンの追加などができます。

Merge はこのようなプロパティをレポジトリから取得し、変更があれば自動的に同期します。たとえば、デザイン システム チームが原色を青から赤に変更した場合、Merge はその更新を検出し、デザインチームにその新しいリリースが通知されます。

また、バージョン管理によって、デザイナーは最新リリースに切り替えるタイミングを選択でき、いつでも初期バージョンに戻すことができます。

UXPin Merge をテストする方法

UXPin Merge はトライアル版でお試しいただけます。また、Merge AI プランでは、MUI、Ant Design、Bootstrap など人気のオープンソースコンポーネントライブラリをゼロから始めることなくご利用いただけます。

UXPin Merge にサインアップすると、MUI、Ant、Bootstrap のトライアルキットにアクセスできるようになるので、実際の React コードを使ったインタラクティブなプロトタイプの実験や作成を始めることができます。

各トライアル キットには、カード、スナック バー、スケルトン ローダーなどの参照パターンとサンプル コンポーネントが満載されており、プロジェクトで直接使用できます。さらに、ダッシュボードのような完全なレイアウトを閲覧することができ、一から構築することなくデザインをすぐに始めることができます。

UXPin Merge の仕組みは以下の通りです：

1. ライブラリの選択： MUI などのビルトインコンポーネントライブラリ、またはカスタム Tailwind UI コンポーネントから選択する。既製コンポーネントをデザインキャンバスにドラッグ＆ドロップすればOK。
2. バリアントとプロパティの編集：さまざまなバリアントの切り替えや、プロパティの変更によって、実際の React コードでコンポーネントをカスタマイズする。その際、静的なデザインアセットだけでなく、実際にコード化されたコンポーネントを扱うことになる。
3. カスタムコードの使用：Tailwind のカスタム UI コンポーネントを使っている場合、UXPin に直接コードを貼り付けて、UI セクション全体をすぐに生成することができる。この機能により、ゼロからコンポーネントをデザインする必要がなくなり、既存のコードを使うことでワークフローのスピードが上がる
4. AI によるコンポーネント生成：UXPin Merge には AI も統合されており、コードベースのコンポーネントをその場で作成できる。たとえば、システムに「ペルソナカード」を生成するように指示すると、UXPin はキャンバス上に直接、完全に機能する Tailwind CSS ベースのコンポーネントを作成する。
5. デベロッパーへのスムーズなハンドオフ：デザインが完成したら、UXPin Merge を使ってデベロッパーに作業を簡単に引き継ぐことができる。プレビューリンクを通じてプロトタイプを共有すると、デベロッパーは各コンポーネントの実際の JSX コード、依存関係、関数にアクセスできることから、デベロッパーは自分の環境ですぐに使えるプロダクションレディのコードを受け取ることができる。

UXPin Merge があれば、デザインチームのためにコンポーネントを再作成したり、すべての要素を一から手作業でコーディングしたりするのに時間が取られることがなくなります。また、Merge AI を使うと、デザイナーとデベロッパーは実際の React コンポーネントのパワーを活用することで、より効率的に作業を進めることができます。

UXPin Merge でデザインシステムを同期する方法

UXPin Merge でデザインシステムを同期するには以下の方法があります：

• Git 統合：React コンポーネントライブラリのみ対象
• Storybook 統合：Storybook ライブラリ（React、Angular、Ember、Vue など）用
• npm 統合：npm レジストリで利用可能なオープンソースライブラリからのコンポーネントのインポート向け

この統合は、それぞれさまざまなプロトタイプとチームのニーズに対応します。Git と Storybook の統合では、Merge 用のコンポーネントとレポジトリをセットアップするのに技術的な知識が必要ですが、UXPin はエンジニア向けのボイラープレートを提供しており、当社の技術チームがセットアップのプロセスをご案内します。

Storybook は、エンジニアがコンポーネントを個別に構築し、プロトタイプを作成してテストしてから、デザインチーム向けに UXPin にプッシュできるため、プライベートなデザインシステムに最適なオプションであると考えられます。

npm 統合と Merge コンポーネントマネージャーにより、デザイナーはインポートするコンポーネントとプロパティをより自由にコントロールできます。また、デザイナーはデザインシステムのドキュメントに従うことができ、エンジニアが UI 要素をインポートする必要はありません。

UXPin Merge の主な利点

Merge の主な利点には、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成する点があります。デザイナーとエンジニアは同じレポジトリから同じコンポーネント ライブラリを使うので、以下のようなシームレスなデザインハンドオフのプロセスができあがります。

• エンジニアはコンポーネントライブラリをインポートすればOK。
• コンポーネントのプロパティから UXPin が生成する JSX の変更をコピーする。
• そして、デザインチームのプロトタイプに従って最終製品を開発する。

この効率化されたワークフローで、以下のような多くの製品開発効率が実現します：

• プロトタイプの迅速化（PayPal は８倍に拡大）
• 市場投入までの時間が短縮される
• ゼロからデザインする必要がない
• フロントエンドのコーディングがほとんどない
• デザインドリフト（摩擦）なし
• UX とフロントエンドの負債の削減
• より少ないコミュニケーションとドキュメントでのシームレスなハンドオフ
• 完璧な整合性と一貫性
• ステークホルダーからの質の高いフィードバック
• テスト中の有意義で実用的な結果
• 質の高い成果＝より良いユーザー体験

UXPin to Merge – スケーラブルなデザインソリューション

UXPin で、企業は成熟度のあらゆる段階でワークフローをサポートするツールと機能を備えたスケーラブルなデザインソリューションを得られます。

UXPin Standard は、デザインシステムが使われていないスタートアップや企業にとって優れたソリューションであり、これでデザイナーは、完全に機能するインタラクティブプロトタイプや MVP を作成し、正確なテストを行うことができます。

UXPin Standard には UXPin のデザインシステム機能も含まれており、デザイナーは製品コンポーネント、カラーパレット、タイポグラフィ、アセットの保存や共有ができます。

Merge によるスケーリング

急成長中のスタートアップ企業でも多国籍企業でも、Merge で企業のデザイン業務のスケーリング（拡張）が実現します。

フィンテック大手の 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.

UXPinの目標は、デザイナーがデザインと構築に費やす時間を減らし、アイデアのテストと反復にもっと時間をかけられるようにすることです。UXPinには、デザイナーがより速くプロトタイプを作成し、より意味のあるテスト結果を得られるよう、多くのショートカットや機能があります。

セクションへ移動します：

• 1ページデザインと複数のアートボード
• データのリフレッシュ
• スクロール可能なコンテンツ
• スタイルのコピーと貼り付け
• インタラクションのコピーと貼り付け
• プレビューからページを非表示にする
• 高度なアニメーション
• アクセシビリティ機能
• アイコンとフォームのビルトインライブラリ

UXPinでより速くデザインするためのヒントトップ9と仕掛けをリストアップしました。コードベースのデザインに慣れていない方は、無料トライアルにサインアップし、この記事のヒントに従って、UXPinでいかにプロトタイピングをさっと楽しくできるか是非ご確認ください。

1ページデザインと複数のアートボード

画像ベースのデザインツールでは、基本的な機能やインタラクションを作成するのに、デザイナーは複数のアートボードの複製が必要です。その結果、トランジションが「不自然」になり、本物のUX（ユーザーエクスペリエンス）を提供できないことがよくあります。

UXPinでは、アートボードを切り替えることなく、最終製品を使用するのと同じように、1つの画面に対して複数のインタラクションを作成することができます。UXPinのCalming Appは、1つのスクリーンでインタラクションとアニメーションを作成できるいい例です。

Calming Appには4つのスクリーンがあり、それぞれのスクリーンではユーザーがボタンをタップすることでマイクロインタラクションやアニメーションが発生します。アプリの「Breathe」セクションで【Start】をクリックすると、画面が完全に変化し、脈打つようなアニメーションが表示されますが、これらはすべてUXPinの1フレームでデザインされています。

UXPinのデザイナーがこの没入型プロトタイプをどのように作ったか、Calming Appを自由にダウンロードしてインストールしてみてください。UXPinのアカウントをお持ちでない方は、無料トライアルにサインアップし、ダウンロードの添付ファイルの指示に従って、アプリをインストールしてください。

データの更新

プロトタイプにダミーデータを探して追加するのは、時間の無駄に感じられるかもしれません。よく整理されたコンテンツ・ライブラリがあったとしても、コピー＆ペーストして適宜アップロードが必要です。

UXPinでは、数回のクリックでダミーデータをプロジェクトに追加したり、レイヤー名でコンテンツを一致させる機能を使ってフィールドに自動的にデータを入力することができます。

UXPinでは、Macでは【CMD】＋【SHIFT】＋【D】、Windowsでは【CTRL】＋【SHIFT】＋【D】のデータ更新のショートカットで、ダミーコンテンツの瞬時の更新も可能です。

スクロール可能なコンテンツ

使用するデザインツールによっては、スクロール可能なコンテンツの作成は時間のかかる作業ですが、UXPinのクロップとスクロール機能を使えば、わずか2クリックで縦または横のスクロールを追加できます。

• ステップ1：（コンテンツがアートボードからはみ出ることになっても）すべてが見えるようにプロトタイプにコンテンツを追加します（例を参照）。
• ステップ2：コンテンツが選択されていることを確認し、【選択したコンテンツを切り抜く】にチェックを入れ、縦にスクロールさせるか横にスクロールさせるか選択します。
• ステップ3：コンテンツをプロトタイプの端にトリミングし、余分な部分が隠れるようにします。

プロトタイプをプレビューすると、設定にしたがってコンテンツがスクロールします。

スタイルのコピー＆ペースト

あるコンポーネントから別のコンポーネントへのスタイルのコピー＆ペーストは、たった2つのショートカットコマンドででき、2番目のコンポーネントのコンテンツに影響を与えません。

• コピー：Macでは【CMD】＋【OPTION】＋【C】、Windowsでは【CTRL】＋【ALT】＋【C】
• ペースト： Macでは【CMD】＋【OPTION】＋【V】、Windowsでは【CTRL】＋【ALT】＋【V】

このショートカットはスタイルをコピー/ペーストするだけです。インタラクションはコピー/ペーストしませんが、そのためのショートカットはあります :)

インタラクションのコピー＆ペースト

コンポーネントのインタラクションもコピー＆ペーストしたい場合は、このUXPinのショートカットが使えます：

• コピー：Macでは【CMD】＋【SHIFT】＋【C】、Windowsでは【CTRL】＋【SHIFT】＋【C】
• ペースト： Macでは【CMD】＋【SHIFT】＋【V】、Windowsでは【CTRL】＋【SHIFT】＋【V】

プレビューからページを非表示にする

「制作中のプロトタイプをステークホルダーに見せることになったが、まだ完成していない部分は見せたくない」ような時は、プロトタイプを複製して余分な画面を削除し、完成したものを見せることができます。

ただ、この方法には問題点がいくつかあります：

• 時間を食う
• 複数のプロジェクトファイルが作成され、それぞれ別々の画面が欠落する。
• エラーが発生する可能性が高くなる
• 2つ目のプロトタイプで自身やステークホルダーが作成したメモを、オリジナルにコピーする必要がある
• 同じプロジェクトで作業している他の人と混同してしまう

より簡単な解決策は、他の人に見られたくない画面を非表示にして、プロトタイプのリンクを共有することですが、これはUXPinの【プレビューからページを非表示】でできます。プロトタイプに表示したくない画面を非表示にできますが、シングルクリックで再度表示することができます。

高度なアニメーション

UXPinはHTML、CSS、Javascriptをレンダリングするため、デザイナーはコードのようなインタラクションやアニメーションを作成することができ、UXPinのプロパティパネルでアニメーションの種類を選択して設定を微調整することで、思い通りの結果を得ることができます。

条件付きインタラクションがあれば、デザイナーはインタラクションを次のレベルに引き上げることができます。コード化された製品を正確に表現するダイナミックなユーザーエクスペリエンスを引き起こすべく、【if-then】と【if-else】のルールセットを作成してみましょう。

UXPinの高度なアニメーションがあれば、デザイナーはUXを実現する没入感のある直感的なプロトタイプを作成することができるのです。

アクセシビリティ機能

インクルーシブな製品を作ることの重要性は誰もが知っていますが、デザイナーはUIのテストにプラグインや外部ツールを使用しなければならないため、アクセシビリティが面倒に感じられることがあります。

内蔵されているアクセシビリティ機能があれば、デザイナーは色の選択をテストするためにUXPinを離れる必要がありません。UXPinには、その場でテストするためのツールが以下のように2つ用意されています：

• コントラストチェッカー：プロトタイプをWCA（ウェブコンテンツ・アクセシビリティ・ガイドライン）規格に照らし合わせ、レベルAAとAAAに対応したインジケータでチェック。
• 色覚異常シミュレーター：8種類の色覚異常を切り替えて、色覚異常のユーザーがプロトタイプをどのように見るかをテスト。

アイコンとフォームの内蔵ライブラリ

プロトタイプをサッと作りたいとき、フォームやアイコンを最初から作るのはとても時間がかかります。多くのデザインツールにはサードパーティーのライブラリが用意されていますが、その中から必要なものを探し出すのもまた大変です。

UXPinには、GoogleのMaterial UI、Font Awesome、Pixel、Retinaのアイコンセットなど、膨大なアイコンのライブラリが内蔵されており、また、自身のSVGを読み込んで、UXPin内での編集も可能です。

UXPinには、デザイナーがそのまま使用することも、ニーズに合わせてカスタマイズすることもできる基本的なフォームエレメントも含まれています。

UXPinで高度なプロトタイピングを試してみよう

このようなヒントやトリックをご自身で実際に試してみませんか？UXPinの高度なデザインおよびプロトタイプ機能をご紹介するサンプルプロジェクトがいくつかあります。無料トライアルにサインアップして、コードベースのデザインがどのようにプロトタイプに革命をもたらし、顧客にとってより良いユーザー体験を生み出すのかぜひご確認ください。

The post UXPinでより速いデザインのための9つのヒントと機能紹介 appeared first on Studio by UXPin.

UXPinに「オートレイアウト」が導入され、今までよりもさらに速くデザインができるようになりました。数秒のうちにすべてのコンポーネントを思い通りに配置し、デザインワークフローをスピードアップすることが可能です。UXPinは、デザインプロセスを簡素化し、デザイナーが有意義な仕事に専念できるような時間を確保することを常に目標としています。自動レイアウトは、手動でサイズを変更する手間を省き、より直感的に作業できるようになります。

オートレイアウトを使用しない場合のデザインの課題

しかし、デザインはクリエイティブで楽しい仕事だけではないのではないでしょうか。実際、UI/UXツールの制約にも応じなければなりません。デザインは元々静的なもので、適切な技術がなければコード化された製品のような動きを期待することはできません。つまり、あなたが描くすべての要素は、それがどのように見えて、機能するかを視覚化しているに過ぎません。たとえば、シンプルなボタンをデザインする場合、まず矩形を描き、テキストを追加します。テキストを拡大しようとすると、長方形の長さも調整しなければなりません。このように、デザイナーはすべてのUI要素の関係性を考えなければならないのです。 複数の要素のサイズを変更し、それぞれを調整することで、全体として統一感を持たせることができます。すべてを手作業で行うには、あまりにも時間がかかりすぎます。さらに、すべての要素で変更の一貫性を保つ必要があります。正直なところ、特にデザインに新しい要素を追加する場合、正しいパディングやギャップを設定することを忘れてしまいがちです。 そんなとき、オートレイアウトがボトルネックをすべて解消してくれます。

https://t.co/rXr0hFKg94 🆕 Take care of your responsive and consistent design with our new Auto Layout feature! 🔥Sign up and take it for a test ride. pic.twitter.com/Hox6bwhZY9

— UXPin (@uxpin) November 8, 2021

オートレイアウトは、繰り返しの手作業から解放され、重要なことに集中する自由を与えてくれます。UXPinでは、あなたのUIが静的デザインの法則に縛られることなく、コードアプローチのメリットを受けることができます。Flexbox – CSS Flexible Box Layoutのおかげで、グループやコンポーネントに自動レイアウトを適用し、選択した要素を互いの位置に依存させることができるようになりました。

オートレイアウトは、すべての手間を省き、ほんの数秒でコンポーネントを思い通りに調整します。例えば、シンプルなボタンを例にとると、テキストを変更する必要がある場合、残りの要素は新しいテキストの長さに適応します。これは、オートレイアウトが作業をスピードアップする数あるケースの一つに過ぎません。メニューのように繰り返される要素をデザインして、アイテムの位置を入れ替えたり、拡大・縮小表示を追加したい場合、私たちの新機能はあなたの作業を大幅に軽減してくれることでしょう。

導入

キャンバスに要素をドロップし、グループを選択するか、ライブラリからコンポーネントを選びます。プロパティパネルでオートレイアウトを追加すると、デザインがフレックスボックスのように動作するようになります。また、デザインシステムにオートレイアウトコンポーネントを追加することもできます。

数回のクリックですべての要素を整列させ、オートレイアウトがあなたをサポートします。

分散する要素をグループ化し、好みでラッピング

包むだけで、すぐに整列し、幅や高さをコントロールして何行にするかを調整できます。別のボックスを移動させるのとは、もうおさらばです。

エレメントのレイアウトと配置

コンポーネントを互いに関連して配置したい場合は、縦または横の方向を設定し、どのように配置するか（開始、中央、終了、伸張）を選択するだけです。

一貫性を維持

ギャップ、パディング、ボーダー、ラディウスの整合性を保つのも簡単です。指定した値を適用すると、オートレイアウトのすべての要素がそれに合わせて整列します。

リサイズ機能

オートレイアウトグループの中から選んだ1つの要素を変更したいときに便利なのが、リサイズです。グループに設定されているすべてのプロパティを維持したまま、幅や高さを変更したり、メイングループを塗りつぶしたりして、1つの要素で遊ぶことができます。

まとめ

オートレイアウトは、要素の微調整、整列、サイズ変更時に必要な手作業を一部自動化します。アイテムのグループは、全体として動作するように直感的に整列できるようになりました。すべての機能の詳細に関しては、こちらのドキュメントをご覧ください。ご質問やUXPin Mergeの導入などのご相談はこちらまで。また、UXPinのコミュニティもございますのでよろしければご活用ください！

トライアルにサインアップして、ワンクリックですべてのコンポーネントを整列させましょう。

The post UXPinのオートレイアウト機能をご紹介 appeared first on Studio by UXPin.