Layers
プロトパイでは、他のデザインツールのやり方と同じようにレイヤーのプロパティを調整することができます。レイヤーをはメニューバーから簡単に追加できます。また、レイヤーのサイズや位置を変更する方法も他のデザインツールと同じであるため、すぐに理解することが出来ます。
Layer Property
位置
キャンバス上でレイヤーの座標を設定します。
サイズ
レイヤーの大きさを設定します。
回転
レイヤーの角度を設定します。
基準点
レイヤーの位置、大きさ、角度を変更する際の基準点(原点)を設定します。
角丸の半径
四角レイヤーの角の曲率を設定します。
不透明度
レイヤーの透明度を設定します。レイヤーの透明度を0に設定するとトリガーに反応しません。
カラー
レイヤーの色と色の透明度を設定します。色の透明度を0に設定してもトリガーに反応します。
Border
レイヤの枠線を適用します。
Shadow
レイヤの影を適用します。
ヒートエリア
レイヤーのタッチ領域が任意に調整できます。
隠れたレイヤーのタッチを許可する
レイヤーがトリガーに反応しないように設定します。
マスクとして使う
ベクトルレイヤーだけが持つプロパティであり、他のレイヤーをレイヤーマスクするように設定します。
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 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をご覧ください。
Audio Layer
Audio(オーディオ)レイヤを支援します。wav, mp3, m4aフォーマットが使用できます。
Camera Layer
スマートデバイスのカメラから出力されたものをレイヤーとして使用できます。これはProtoPieプレイヤーでプロトタイプを実行したときに機能します。プレビューウィンドウまたはブラウザでプロトタイプを実行すると、プレイスホルダーが代わりに表示されます。
Text Layer
テキストがをプロトパイ上で直接入力できます。
フォント
フォントファミリーが選択できます。System Default を選択するとプロトタイプを実行するプラットフォームの基本フォントで表示されます。
ウエイト
フォントの太さを調整できます。
サイズ
テキストのサイズを調整できます。
整列
フォントの左右,上下の整列を調整できます。
行間
テキストの行間を調整できます。
Missing Font
ProtoPie Studio で使用されているフォントが、実行中のデバイスに表示されない場合は、「missing font」という警告が表示されます。 見つからないフォントを置き換える代替フォントを選択できます。
Input Layer
キーボードでタイピング可能なインプットレイヤです。
Text Options: Text
インプットレイヤに予めタイピングされているテキストが必要な時に使用します。
PlaceHolder
インプットレイヤにプレースホルダを設定することができます。プレースホルダの色はタイピングされるテキストの色と異なるように設定できます。
Keypad Options: Type
モバイルキーボードのタイプが選べます。"テキスト", "URL", "電子メール", "数字", "テキストパスワード", "数字パスワード"を支援します。
Keypad Options: Return
モバイルキーボードのリターンキータイプが選べます。"Go", "Next", "Send", "Search", "Done"を支援します。自動フォーカスアウトをオンにするとリターンキーを押したときインプットレイヤでフォーカスアウトします。
Keypad Options: Look
iOSに限りキーボードのテーマをダーク/ライトの中で選べます。
iOS Background Blur Layer
iOS 13以上及びウェブで機能する13種類のiOS背景ぼかしエフェクトを使用できます。 （iOS 12以下では、3種類のデフォルト背景ぼかしエフェクトを使用できます。）
デフォルトエフェクト
Extra Light
Light
Dark
マテリアルエフェクト（明るいテーマ及び暗いテーマ）
Ultra Thin Material
Thin Material
Material
Thick Material
Chrome Material
Constraints
レイヤーにコンストレイント（制約）を追加することができます。親レイヤーがリサイズされた際、追加するコンストレイントによって、レイヤーそのもののサイズと位置が自動で調整されます。コンストレイントは、親レイヤーがレスポンスによってリサイズされたときにも適用できます。
左部分は位置制約を測り、上下左右の4方向で固定スペースを使うことができます。これにより、親レイヤーのいずれの四方に対してもレイヤーのある位置を維持することができるのです。
右側はサイズ制約を測り、固定幅と固定高さを使うことができます。これにより、親レイヤーの幅と高さに対して、レイヤーのサイズを維持することができるのです。
Pin to top right corner
固定幅、固定高さ、固定上部領域と固定右領域を使うことにより、親レイヤーの右側と上部に対してブルーレイヤーはその位置を維持します。親レイヤーがリサイズされても、ブルーレイヤーはそのサイズを維持します。
Center position
固定幅と固定高さのみを使うことによって、親レイヤーがリサイズされた時に、親レイヤーの四方に対してブルーレイヤーは中心点を維持します。
Fixed spacing
左右の固定領域を使うことで、親レイヤーの幅がリサイズされた時に、左右のスペースを維持しながらブルーレイヤーはリサイズされます。
