MenuToggle Menu

レイヤー

他のデザインツールと同じように、ProtoPieでもレイヤーを使いこなしましょう。 長方形や楕円などのシェイプレイヤーを自由に追加、移動、サイズ変更が可能です。

レイヤープロパティ

位置

レイヤーのXとY座標

サイズ

レイヤーサイズ

回転

レイヤーアングル

基準点

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

フィレット

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

不透明度

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

塗りつぶし：単色

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

塗りつぶし：画像

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

フレーム

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

影

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

タッチエリア

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

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

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

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

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

layer properties

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です。)
[object Object]

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>
[object Object]
[object Object]

Video Layer

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

自動で再生

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

繰り返す

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

video lottie audio layer property

Lottie Layer

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

自動で再生

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

繰り返す

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

video lottie audio layer property

Audio Layer

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

自動で再生

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

繰り返す

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

video lottie audio layer property

Camera Layer

スマートデバイスのカメラから出力されたものをレイヤーとして使用でき、ProtoPie Playerでプロトタイプを実行したときに機能します。プレビューウィンドウまたはブラウザでプロトタイプを実行すると、プレイスホルダーが代わりに表示されます。

自動スタート

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

フロントカメラ [前面]

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

フロントカメラ [背面]

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

camera layer property

Text Layer

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

フォント

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

ウエイト

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

サイズ

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

整列

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

テキストリサイズ

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

字間

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

行間

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

Text Property

Missing Font

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

[object Object]

Input Layer

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

１．テキスト

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

２．プレースホルダ

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

３．キーボードタイプ

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

  • テキスト
  • URL
  • 電子メール
  • 数字
  • テキストパスワード
  • 数字パスワード
4. リターン

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

  • 移動
  • 次
  • 送る
  • 検索
  • 完了
  • New Line (複数の行のみ)
５．キーボードテーマ

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

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

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

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

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
ios background blur layer

Constraints

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

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

constraints

Pin to top right corner

幅、高さ、上部領域と右上領域を固定することにより、元のレイヤーの右側と上部に対してブルーレイヤーの位置を維持することができます。元のレイヤーがリサイズされても、ブルーレイヤーは指定されたサイズを維持します。

[object Object]
pin to top right corner property

Center position

幅と高さを固定することで、元のレイヤーがリサイズされた時に、元のレイヤーの四方に対してブルーレイヤーは中心点を維持します。

[object Object]
center position property

Fixed spacing

左右の固定領域を使うことで、元のレイヤーの幅がリサイズされた時に、左右のスペースを維持しながらブルーレイヤーを調整することが可能です。

[object Object]
fixed spacing property
Back To Top