ProtoPie 4.3: More Flexibility With Nested Components

またProtoPieのアップデートのお知らせです！ 数か月前にProtoPie 4.0でコンポーネントを導入して以来、私たちが受け取っていた主要な機能リクエストの1つが、ネストされたコンポーネントでした。もちろん、コンポーネントの上にさらに機能を重ね、ネストされたコンポーネントを導入するのはとても理にかなっています。というわけで、登場です！

面白い事実：ProtoPie 5.0をインタラクションライブラリとともにリリースしました。

ネストされたコンポーネントに加えて、ProtoPie 4.3にはほかにも素晴らしい機能が満載です。Send/Receiveメッセージのオートコンプリートと、シーンパネルおよびコンポーネントパネルを固定するオプションにより、コンポーネントを扱ったりシーンとコンポーネントを切り替えたりする作業がぐっと簡単になります。iOSのシステムステータスバーと背景ぼかしのサポートにより、プロトタイプはさらに本物らしくなります。

今すぐProtoPie 4.3を使い始めると、これらの変更をご覧いただけます。皆さまに喜んでいただければ幸いです。以下で特に重要なものをいくつかご紹介します。

ネストされたコンポーネントの導入

コンポーネントをリリースしてから数か月後、ネストされたコンポーネントを活用できるようになりました。

まず、コンポーネントとは何でしょうか？ コンポーネントとは、プロトタイプ全体で再利用できる、レイヤーとインタラクションの保存済みセットです。任意のレイヤーとインタラクションのセットをコンポーネントに変換できます。コンポーネントを使うことで、不要な繰り返し作業を減らし、シーンごとの見やすさを向上させ、最終的にはプロトタイピングのワークフローを加速できます。

これによりProtoPieでは、あるコンポーネントの中で別のコンポーネントを使えるようになり、多数のコンポーネントを使うプロトタイプを作成する際の柔軟性がさらに高まります。

ご覧のとおり、Month Drop Downコンポーネントの中でさまざまなコンポーネントを使っています。

サンプルプロトタイプでネストされたコンポーネントを使用しています。

ネストされたコンポーネントは、コンポーネント階層のどのレベルでも上書きできます。親コンポーネントは子コンポーネントを上書きでき、その逆も同様です。これは、すでにお使いのデザインツールのコンポーネントでおなじみのはずです。

ProtoPieでコンポーネントの使用に慣れている方なら、SendレスポンスとReceiveトリガーにもなじみがあるはずです。コンポーネントはシーンから独立しているため、SendレスポンスとReceiveトリガーは当初、コンポーネントとコンポーネント外のオブジェクトとの間にインタラクションを作成するために使われていました。

ネストされたコンポーネントの導入に伴い、いくつか変更を加えました。現在は Inside Pie で次のチャンネルを選択できます：

1. Parent — 親コンポーネント。親コンポーネントがない場合はシーン。

2. Child Component — 現在いるコンポーネント内の子コンポーネント。

3. Current Scene — コンポーネントが使用されているシーン。

4. Current Component — 子コンポーネントがある場合でも、それらは含めず、現在のコンポーネントのみ。

コンポーネントでSendレスポンスとReceiveトリガーを使用する際に選べるチャンネルです。

コンポーネントの使い方については、ドキュメントをご覧ください。

ご不明な点があれば、ぜひお問い合わせください。お手伝いできることをお知らせいただければ幸いです！

iOSの背景ぼかし

iOSとiPadOSでおなじみのぼかし効果を実現するために、iOS Background Blurという新しいレイヤーと、Background Blurというレスポンスを追加しました。

iOS 13およびiPadOS 13では、AppleのHuman Interface Guidelinesに基づく13種類すべてのぼかし効果を使用できます。iOS 12、iPadOS 12以前では、3つのデフォルトのぼかし効果のみ使用できます。

iOS向けBackground Blurは、ProtoPie 4.3で利用できるようになりました。

サンプルを見る。

システムステータスバー

スマートデバイス上でプロトタイプをさらにリアルに感じられるように、iOSとAndroidの両方でシステムステータスバーを利用できる機能を追加しました。シーンごとに、システムステータスバーの内容と背景の色を調整することもできます。

もう、Sketch、Figma、Adobe XDから最初に取り込んだ静的なステータスバーでこれを疑似再現する必要はありません。

シーンパネルとコンポーネントパネルを固定するオプション

ネストされたコンポーネントを導入したことで、コンポーネントをこれまで以上に使うようになるはずです。その結果、シーンとコンポーネントの切り替えが増えるでしょう。現在は、シーンパネルとコンポーネントパネルの両方を固定して、シーンとコンポーネントの概要をひと目で常に確認でき、切り替えもずっと速くできます。

シーンパネルとコンポーネントパネルの両方が固定されたとき。

その他の機能と改善

• Send/Receiveメッセージのオートコンプリート

• ピクセルにスナップ

• Colorレスポンスで数式をサポート

• 新しいデバイスフレーム。例：iPhone 11 Pro & Google Pixel 4

• コンポーネント内および対応するシーン内のナビゲーションボタン

• インタラクションの複製

ところで、リモートワーク中にプロトタイピングを最大限に活用する方法についての記事はもうお読みいただけましたか？