Sketchからのインポート

SketchからデザインをProtoPieにインポートするには2つの方法があります。

• プラグイン（推奨）:Sketch用ProtoPieプラグインをインストールして、Sketchでプラグインを開く
• 旧方式（Legacy）: インポートしたいSketchファイルを開き、ProtoPie Studioを立ち上げる。ProtoPieで'ファイルメニュー'をクリックし、そこから'インポート'を選択する。

Sketch用ProtoPieプラグイン

SketchのProtoPieプラグインのダウンロードとインストールはこちらから。インストールにはProtoPie7.0またはそれ以上のバージョンが必要です。

Sketch用ProtoPieプラグインで超高速で効率的なデザインを体験できます。SketchからProtoPieへのインポートはすべてローカルで行われ、待ち時間がありません。

アートボードをシーンとしてインポートし、オブジェクトはSketchと同じレイヤー階層、配置、および制約を持つオブジェクトとしてインポートが可能です。

ProtoPieへデザインをインポートする間は、Sketchを継続的に立ち上げておく事をお勧めします。

Sketch用ProtoPieプラグインはProtoPie5.4以降のバージョンにてご利用頂けます。

こちらのサンプルファイルを使用して、Sketch用のProtoPieプラグインをお試しください。

インポートは下記の機能に対応しています

• Visibility
• Lock
• Position
• Size
• Rotation
• Opacity
• Constraints
• Fill (solid color & image)
• Borders
• Shadow

ProtoPieのレイヤーの詳細についてはこちらをご覧ください

旧方式（Legacy)とSketchインポートとの違い

Sketchプラグインでは下記の事項が可能です

• 1つまたは複数のアートボードとオブジェクトをインポートします。
• アートボードをシーンとしてインポートします。
• 選択したものをインポートできます。
• ベクターレイヤーをSVGとしてインポートします。
• テキストレイヤーをテキストレイヤーに変換できるSVGとしてインポートします。
• 制約を制約としてインポートします。

シーンとしてインポートする

同じ名前を維持したまま、SketchのアートボードをProtoPieのシーンとしてインポートします。 1つまたは複数のアートボードをシーンとして一度にインポートすることができます。 アートボードをシーンとしてインポートする際は、Sketchのレイヤー階層に基づいています。

オブジェクトとしてインポートする

Sketchと同じレイヤー階層、配置、および制約を維持したままオブジェクトのインポートを行います。 1つまたは複数のオブジェクトを一度にインポートできます。

Sketchのコンポーネントとコンポーネント・インスタンスは、コンテナとしてインポートされます。 それらをコンポーネントに変換して、ProtoPieのコンポーネントとして保持します。コンポーネントの詳細についてはこちらをご参照下さい。

SVGとしてインポートする

SketchのベクターレイヤーをProtoPieのSVGとしてインポートします。 プロパティを編集可能にするには、インポート後にシェイプに変換します。まだすべてのSVGプロパティがProtoPieではサポートされておりませんのでご注意ください。SVGレイヤーの詳細についてはこちらをご覧ください。

テキストレイヤーとしてインポートする

SketchのテキストレイヤーをSVGとしてProtoPieにインポートします。 プロパティを編集可能にするには、インポート後にテキストレイヤーに変換します。 テキストレイヤーの詳細はこちらをご参照下さい。

再インポート

通常、Sketchから再インポートされたアートボードとオブジェクトは、以前にインポートされたものに置き換わります。 ただし、いくつかの例があります。

• ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、変更した事項は再インポートした際にはオブジェクトには影響しません。
• インポート後にレイヤー階層を変更した場合、再インポートの際には変更は反映されません。
• Sketchで特定のレイヤーのみを選択して、ProtoPieにインポートしない限り、インポートした削除済みのレイヤーは再インポートされません。
• シーンまたはオブジェクトの複製が必要な場合は、一度インポートしてから複製します。 たとえば、SketchのアートボードをProtoPieの2つのシーンとして作成するとします。 その場合には、まず一度インポートをしてから、シーンを複製して2番目のシーンを作成します。
  

Sketchインポート旧方式（Legacy)

ProtoPieはSketchインポートをするために、様々なオプションを提供しています。Sketch内の全てのレイヤーを読み込みしたり、再読み込みする時にProtoPieで変更した位置やサイズを維持しながら変更事項だけを読み込むこともできます。

ArtboardSketch

ファイルの中でインポートするアートボードを選択します。

Import Size

レイヤーの倍率を設定します。Sketchで制作したアートボードのサイズによって変わります。

All layer structure

アートボード内の全てのレイヤーをフォルダ構造を維持したままインポートします。

Exportable layers

アートボード内のレイヤーで、exportable（エクスポート可能)に設定されているレイヤーだけをインポートします。

Overwrite positions of layers

再インポートする時にSketchレイヤーの位置の値を上書きします。

Overwrite sizes of layers

再インポートする時にSketchレイヤーのサイズの値を上書きします。

Update layer orders and grouping structure

再インポートする時にSketchレイヤーの順番と構造を上書きします。

Remove layers deleted in Sketch

再インポートする時にSketchから削除されたレイヤーがあればProtoPieからも削除します。

FAQs

• Why does importing my designs with mask layers from Sketch not work?

  ProtoPie can only import artboards if all mask layers and layers affected by the mask layers have been grouped. However, when a mask layer and the layers affected by this mask layer are at the top of layer hierarchy within an artboard, it could be that they are not grouped.

  Group a mask layer and layers affected by this mask layer if they happen to be ungrouped.