ProtoPie では、生産性と表現力は私たちが大切にしている 2 つの柱です。多くのデザイナーにはすでに一定のワークフローの習慣があるため、よりなじみやすいものを取り入れることで、使いにくさをできるだけなくすよう努めました。同時に、以前から強く求められていた「本格的なメディアプレーヤーのプロトタイプを作る」というユースケースの実現も支援したいと考えています。
そのため、ProtoPie 5.5 では、誰にとっても少しずつうれしい内容を用意しています。
生産性を高める機能と改善に加え、すでに慣れ親しんでいるデザインツールとのギャップを埋める機能。
数式の技を極めた達人のために、表現力を高める機能。
これらの新機能と改善を詳しく見ていきましょう。
再生応答での数式サポート
メディアプレーヤーやストリーミングアプリのプロトタイプを作るとき、実際に動くシークバーは、プロトタイプをリアルに感じさせるうえで欠かせません。再生応答で数式を使えるようになり、オーディオ、ビデオ、または Lottie ファイルの特定のタイムスタンプを指定して、その時点から再生を開始できます。
再生応答では、Play、Pause、Seek の 3 つのアクションを選べます。数式は Seek アクションで使用します。シークバーを動作させるには、シークバーの x 座標を対応するタイムスタンプに「リンク」するだけです。
[IMG url="https://cdn.sanity.io/images/qyzm5ged/blog/1b7073baa8e586aa74ea5a62e6f2ebbc69a9fb9a-1634x1272.gif"]
本格的なビデオプレーヤーのプロトタイプを自分で作る方法について、別の記事も用意しました。
画像フィル
Figma、Sketch、Adobe XD からデザインを取り込むとき、画像が読み込まれたサイズから引き伸ばされてしまったり、画像フィルのレイヤーが真っ白に表示されたりしたことがあるかもしれません。ですが、現在は ProtoPie と 3 つのプラグインが画像フィルに対応しているため、こうした心配はもう不要です。
ProtoPie でシェイプレイヤーを作成し、塗りとして使う画像を選ぶこともできます。画像フィルには、fill、fit、stretch の 3 種類があります。fill か fit のどちらかを選べば、歪みなく元の比率を保てます。
クリック & ドラッグでレイヤーを作成
多くのデザイナーは、クリックしてドラッグすることでシェイプレイヤーを作成するこの動作に慣れています。ProtoPie でも、まさにこれが可能になりました。
カンバス上のどこでも、カーソルがある場所にシェイプレイヤーを作成できます。もうレイヤーのサイズ変更や移動に時間を費やす必要はありません。
ショートカットモーダル
便利なキーボードショートカットがあることと、それを知ることは別の話です。そこで私たちは、すべてのキーボードショートカットをまとめたワンストップのショートカットモーダルを導入します。
生産性を高めたり、ワークフローをよりスムーズにしたりするショートカットを、一目で見つけられます。ショートカットモーダルを開くには、⌃ + ⇧ + /（macOS）または Ctrl + ⇧ + /（Windows）を使用します。
ドキュメントでもショートカット一覧を確認できます。すべてのキーボードショートカットについて詳しく見る。
さらに新しいショートカット
先日、生産性を高める新しいショートカットをいくつか追加しました。今回のリリースでも、この流れを継続しています。
左、右、上、下、中央、真ん中に揃えるショートカット
多くのデザイナーにとって、ショートカットでレイヤーを整列させるのは習慣です。これからは、プロパティパネルで正しい整列アイコンを探さなくてもレイヤーを整列できます。
整列ショートカットについて詳しく見る。あるいは、⌃ + ⇧ + /（macOS）または Ctrl + ⇧ + /（Windows）でショートカットパネルを開けます。
色を選択するショートカット
まずプロパティパネルに移動しなくても、スポイトで簡単に色を選べます。レイヤーを選択し、ショートカット: I（macOS & Windows）または ⌃ + C（macOS）を使用します。
変数の数式サポート
数式を使いこなす皆さんなら、数式が長くなったり、面倒になったりすることがあるのをご存じでしょう。特定の数式を何度も使い回したい場面もよくあります。これからは、再度使いたいときにその数式を覚えたり、探したり、コピー＆ペーストしたりする必要はありません。
変数（このシーン用）を作成し、データ型を選択して、数式を使用にチェックを入れます。使用したい数式を入力してください。実際にこの数式を再利用するには、変数名を使うだけです。
変数と数式について詳しく見る。変数と数式について詳しく見る。
新しい数式関数
数式の真の力を引き出すには、ほかのレイヤーとそのレイヤープロパティを参照する必要があります。そのため、数式をより効率的に使えるよう、新しい便利な関数を 2 つ追加します。
数式関数: parent
これまでは、数式で使用している親レイヤーに変更を加えると、たとえば名前を変更したり、別のレイヤーが親レイヤーになったりした場合に、数式を修正する必要がありました。ですが、もうその必要はありません。parent 関数を使えば、親レイヤーが何であっても、また親レイヤーにどんな変更があっても、その親レイヤーを参照できます。
親レイヤー、たとえばコンテナやコンポーネントを参照したり、そのレイヤープロパティを返したりできます。たとえば、Red または Blue をタップしたときに楕円を動かしてみましょう（どちらも内部にテキストレイヤーを持つコンテナです）。parent 関数により、楕円はそれぞれのテキストレイヤーの親の y 座標へ移動します。
その利点は、拡張性があることです。例のように 2 枚ではなく 10 枚や 20 枚のカードがある場合でも、すべてのカードに対するこれらのインタラクションの作り方は同じです。
この例を試してみてください。parent 関数について詳しく見る。
数式関数: initial
数式の課題の 1 つは、レイヤープロパティの初期値を覚えたり計算したりする必要があったことです。もうその必要はありません。initial 関数を使えば、特定のレイヤープロパティの初期値を取得できます。値を覚えたり、プロパティパネルに戻って実際の値を確認したりする必要はありません。
特定のレイヤープロパティの初期値（インタラクション前の値）を返します。たとえば、Oval の初期 x 座標を取得したい場合は、initial(Oval, "x") を使って初期 x 座標を取得します。
この例を試してみてください。initial 関数について詳しく見る。
ProtoPie 5.5—その他の機能と改善
ドロップダウンで最後に選択した項目を記憶
レイヤーとインタラクションパネルの描画を改善
カラーピッカーの遅延を解消
プロパティパネルにオーディオ、ビデオ、Lottie ファイルの長さを表示
ローンチイベントに参加しよう
5.5 のローンチイベントを見ると、よりよく理解できます。ProtoPie は新機能の実際の動作を紹介するとともに、機能をどのように選んでいるかも深掘りしました。
トピック 1 — より良い ProtoPie を作るために、どのように機能を選ぶか。
トピック 2 — ビデオプレーヤーのプロトタイプ：ProtoPie の新機能の実演。
