レイヤー

ProtoPieでのレイヤーの編集方法は、他のデザインツールとほぼ同様です。長方形、円、星、ポリゴンなどのベクトルレイヤーを追加した後、それらのサイズと位置を調整します。シェイプを作成するには、キャンバス上の任意の場所をクリックしてドラッグし、シェイプの境界線上の任意の位置にタッチして、シェイプを自由に拡大または縮小しましょう。

レイヤープロパティ

位置

レイヤーのXとY座標

サイズ

レイヤーサイズ

回転

レイヤーアングル

基準点

レイヤーの位置、サイズ、アングルなどが変化したときの基準点

角数

星またはポリゴンの角の数を設定します

比率

星形の内側の点とその中心の間の距離を調整し、パーセンテージで表します。

フィレット

ProtoPieでは、長方形レイヤーのコーナーごとに異なる曲率の設定が可能です。各コーナーの半径を設定するときは、対応する角の丸いアイコンをクリックして、半径の値を入力します。

不透明度

レイヤーの不透明度が0％の場合、レイヤーに割り当てられたトリガーは無効になります。

塗りつぶし：単色

カラーコードを使用して、塗りつぶしを設定します。色の不透明度が0％の場合でも、レイヤーに割り当てられたトリガーは有効となります。

塗りつぶし：画像

塗りつぶしとして画像を選択します。塗りつぶしには、フル、フィット、ストレッチの3種類があります。

フレーム

レイヤーのフレーム枠には、内側、中間、外側の3種類があります。

影

レイヤーに影を追加し、影の色と奥行きなどの値を調整します

タッチエリア

実際のレイヤーサイズを超えるタッチエリアの設定が可能です

下にあるレイヤーをタッチできるようにする

レイヤーの下にある他のレイヤーをタッチできる様に設定します

レイヤーマスクとして使用

レイヤーマスクとオーバーラップした部分のみを表示します。

SVG Layer

SVG（Scalable Vector Graphics）ファイルをインポートし、画像の品質を損なうことなくスケーリングすることができます。
SVGファイルのcolor、border、shadowなどのプロパティを変更したい場合は、「shape layer」に変換します。

現在、グラデーションや複数カラーのSVGファイルはサポートされておりません。
インポートされたSVGファイルの一部のプロパティがサポートされていない場合、「Convert to shape」ボタンが機能しないことがあります。(現在、ProtoPieでサポートしているのはpath、ellipse、polyline、polygon、rect、circleおよびlineです。)

Paste SVG codes

Sketch、Figma、Adobe XD、ZeplinからSVG codeをコピーして直接ProtoPieに貼り付けることができます。以下はSVGコードの例です。

SVG code example

<svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
    <polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
  </g>
</svg>

Video Layer

プロトパイは動画レイヤーもサポートしています。h264でエンコーディングされたMP4形式の動画ファイルが使用できます。

音量

映像レイヤーのボリューム属性を調整します。

自動で再生

プロトタイプが実行されたら、自動的に動画を再生します。

繰り返す

動画を繰り返し再生します。

Lottie Layer

Lottieレイヤーは、Adobe After EffectsアニメーションをプロトタイプでレンダリングしたJSONファイルです。詳細についてはLottieをご覧ください。

自動で再生

プロトタイプが実行されたら、自動的にLottieを再生します。

繰り返す

Lottieを繰り返し再生します。

Audio Layer

Audio(オーディオ)レイヤーをサポートしています。wav, mp3, m4aフォーマットが使用できます。

音量

オーディオレイヤーのボリューム属性を調整します。

自動で再生

プロトタイプが実行されたら、自動的にオーディオを再生します。

繰り返す

オーディオを繰り返し再生します。

Camera Layer

スマートデバイスで撮影した写真をプロトタイプのレイヤーとして活用したり、レイヤーからQRとバーコードを読み取ることもできます(詳しく見る)。スマートデバイスのカメラから出力されたものをレイヤーとして使用でき、ProtoPie Playerでプロトタイプを実行したときに機能します。プレビューウィンドウまたはブラウザでプロトタイプを実行すると、プレイスホルダーが代わりに表示されます。

自動スタート

シーンがスタートする時にカメラが自動的に起動される。

フロントカメラ [前面]

前面のカメラを使用する。

フロントカメラ [背面]

背面のカメラを使用する。

R及びバーコードスキャナー(QR & Barcode Scanner)

プロトタイプ内でQR及びバーコードスキャンをアクティブ化します。サポートされる形式にはQRだけでなく、CODE39、CODE128、EAN13_UPCA、EAN8、UPCEのようなバーコードのサブタイプが含まれます。

すぐにURLを開く(Open URL Immediately)

QRコードをスキャンして、Webブラウザからリンクを開くことができます。バーコードをスキャンするには、追跡維持オプションを使用します。

追跡維持(Keep Tracking)

QRとバーコードに保存された値をモニタリングします。

Text Layer

テキストレイヤーを利用して、テキストの直接入力が可能です。

フォント

パソコンに設置されているフォントはすべて選択できます。システム基本フォントを使えば、プロトタイプで装置を基本のフォントに選択すれば、プロトタイプで装置を基本フォントで使用できる。

ウエイト

フォントの太さを調整できます。

サイズ

テキストのサイズを調整できます。

整列

フォントの左右,上下の整列を調整できます。

テキストリサイズ

テキストレイヤは幅や高さによって自動でサイズ調整、または固定しておくこともできます。

字間

テキストの字間を調整できます。

行間

テキストの行間を調整できます。

Missing Font

ProtoPie Studio で使用されているフォントが、実行中のデバイスに表示されない場合は、「missing font」というメッセージが表示されます。フォントを置き換える場合には、表示される代替フォントから選択してください。

テキストレイヤーにユーザー指定フォントの適用

エンタープライズプランでのみご利用いただけます。

エディターは、次の簡単な手順に従ってプロトパイスタジオでユーザー指定フォントをテキストレイヤーに簡単に適用できます。

編集できるテキストレイヤーを選択します。
テキストレイヤーのプロパティパネルにあるフォント(Font)メニューにアクセスします。
フォントリストを検索して“ユーザー指定(Custom)”のカテゴリ内で使用できるユーザー指定フォントのいずれかを選択します。このリストには当該のエンタープライズチームおよび/または組織内からアクセスできるユーザー指定フォントのみ表示されます。
今選択したテキストレイヤーがここで選択したユーザー指定のフォントで表示されます。

参考: チーム所有者とサービス管理者のみ、ユーザー指定フォントをアップロードすることができます。

同じフォントを使用するすべてのテキストレイヤーにユーザー指定フォントの適用

エンタープライズプランでのみご利用いただけます。

エディターは、次の手順に従ってプロトタイプのすべてのシーンで同じフォントを共有するすべてのテキストレイヤーにユーザー指定フォントを簡単に適用できます。

上段の探索メニューから"編集(Edit)"をクリックします。
オプションの中から"フォント取り替える(Replace Fonts)"を選択します。
フォント取り替える(Replace Fonts)モーダルからユーザー指定フォントと取り替えるフォントを選択します。
“取り替える(Replace)”ボタンをクリックします。
全体のプロトタイプから選択したフォントがここで選択したユーザー指定フォントに変わります。

Input Layer

インプットレイヤはスマート機器のキーボードや普通のキーボードを通じてSingle-lineまたはMulti-lineのテキストを入力するのに使用します。

１．テキスト

インプットレイヤに予めタイピングされているテキストが必要な時に使用します。

２．プレースホルダ

インプットレイヤにプレースホルダを設定することができます。プレースホルダの色はタイピングされるテキストの色と異なるように設定できます。

３．キーボードタイプ

モバイルキーボードのタイプが選べます。

テキスト
URL
電子メール
数字
テキストパスワード
数字パスワード

4. リターン

下記のものの中で一つを使い、スマート機器の基本キーボードにあるリターンキーを修正できます。

移動
次
送る
検索
完了
New Line (複数の行のみ)

５．キーボードテーマ

iOSに限りキーボードのテーマをダーク/ライトの中で選べます。

６．フォーカスアウとオプション

キーボードを解除できる二つのオプションがあます。

Returnキーを押す
Input Layerの以外の部分を押す。

iOS Background Blur Layer

ぼかし効果の適用：Android及びiOSに3種類の基本効果(ダーク、ライト、エキストラライト)を適用することができ、またウェブやiOS 13以上の場合は10種類のぼかし効果を追加適用することもできます。

デフォルトエフェクト

Extra Light
Light
Dark

マテリアルエフェクト（明るいテーマ及び暗いテーマ）

Ultra Thin Material
Thin Material
Material
Thick Material
Chrome Material

Constraints

レイヤーにコンストレイント（制約）を追加します。元のレイヤーがリサイズされた場合、追加するコンストレイントによって、レイヤーそのもののサイズと位置が自動で調整されます。コンストレイントは、元のレイヤーがレスポンスによってリサイズされた時も適用が可能です。

左部分は位置制約を測り、上下左右の4方向で固定スペースを使うことができます。これにより、親レイヤーのいずれの四方に対してもレイヤーのある位置を維持することができるのです。
右側はサイズ制約を測り、固定幅と固定高さを使うことができます。これにより、親レイヤーの幅と高さに対して、レイヤーのサイズを維持することができるのです。