インポート

ProtoPieを利用すると数回のクリックだけでmacOSのSketch、WindowsとmacOSのAdobe XD及びFigmaからデザインを簡単にインポートすることが可能です。

現在、ProtoPieはFigman、Adobe XD、SketchからデザインがインポートできるProtoPieプラグインの開発に取り組んでいます。

FigmaおよびAdobe XDのProtoPieプラグインはすでにご利用可能です。Sketchのプラグインもまもなくご利用が可能になる予定です、ぜひご期待ください!

はじめましょう

  • 旧方式(Legacy):インポートに使うSketch、Adobe XDまたはFigmaファイルを開いてProtoPie Studioを実行します。ProtoPieのメニューから「インポ

    ート…」を選択します。

  • プラグイン:FigmaまたはAdobe XDのProtoPieプラグインをインストールし、インポートするファイルにてプラグインを実行します。

Figmaインポートプラグイン

新しいFigma用ProtoPieプラグインを利用すると面倒な手間が全くなく、スピーディに作業することが可能になります。FigmaからProtoPieへ、デザインの読み込みはたったの数秒で。

インポートする項目が管理できます。トップレベル・フレームをFigmaと同じレイヤー、位置、制約のシーンやオブジェクトとして読み込めます。

旧方式(Legacy)とFigmaインポートとの違い

  • 一つまたは複数のフレームとオブジェクトをインポート

  • 選択した項目をインポート

  • べクター・レイヤーをSVGとしてインポート

  • テキスト・レイヤーをテキスト・レイヤーとしてインポート

  • ContraintsをそのままContraintsとしてインポート

Figma用ProtoPieプラグインを使用するにはProtoPie 5.2以降が必要です。

シーンとしてインポート

Figmaのトップレベル・フレームを名前を変更せずにProtoPieのシーンとしてインポートでき、トップレベル・フレームはFigmaのレイヤー階層に合わせてシーンとしてインポートされます。

オブジェクトをインポート

Figmaと同じレイヤー、位置、制約でオブジェクトをインポートできます。一つまたは複数のオブジェクトを一度にに読み込むことが可能で、トップレベル・フレームでない項目はシーン内にレイヤーまたはコンテナーとして取り込まれます。

Figmaのコンポーネント及びコンポーネント・インスタンスはコンテナーとして読み込まれます。

これらをコンポーネントに変えることでProtoPieでコンポーネントとして使うことができます。詳細はこちらをご覧ください。

SVGとしてインポート

Figmaのベクター・レイヤーをProtoPieへSVG(Scalable Vector Graphics)形式でインポートします。シェイプに変換するとプロパティを修正することができます。現在ProtoPieは一部のSVGプロパティのみに対応しています。SVGレイヤーについてはこちらをご覧ください。

テキストレイヤーのインポート

Figmaのテキスト・レイヤーをProtoPieで編集できるようにビットマップとしてインポートします。ProtoPieでプロパティを編集するためには、インポート後にテキスト・レイヤーに変更してください。テキスト・レイヤーに関しての詳細はこちらをご確認ください。

再インポート

基本的にFigmaからフレームやオブジェクトを再インポートすると以前インポートした項目に書き換えられます。ただし、いくつかの例外があります。

  • ProtoPieにインポートしたオブジェクトのプロパティを一部変更した場合、再インポートしてもこのオブジェクトは影響を受けません。

  • ProtoPieで新しく作成したスクロール・コンテナーにはレイヤーの順番などが設定できますが、再インポートした場合は、編集されたレイヤーが適用されません

  • インポート後に削除されたレイヤーは、再インポートの際には自動的に適用されません。 レイヤーをインポートしたい場合にはFigmaでレイヤーを選択し、そのレイヤーを別にインポートする必要があります。

  • シーンまたはオブジェクトを複製したい場合は、一度インポートしてから複製してください。例えばFigmaのトップレベル・フレームをProtoPieで2つのシーンとして読み込みを行いたい場合は一度インポートしてからシーンを複製することで2つ目のシーンを作成します。

Figma インポート(Legacy)

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

Frame

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

Import Size

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

All layer structure

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

Exportable layers

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

Overwrite positions of layers

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

Overwrite sizes of layers

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

Update layer orders and grouping structure

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

Remove layers deleted in Figma

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

Sketch インポート

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

Adobe XD インポート(プラグイン)

Adobe XD用のProtoPieプラグインを使用するとより簡単に迅速にデザインをAdobeXDからProtoPieにインポートが可能となります。既存のLegacyインポートと異なり、Adobe XDで作業した内容のままProtoPieにインポートすることができます。

アートボードをシーンとしてインポートし、Adobe XDと同じレイヤー階層、配置、および条件を持つオブジェクトをインポートします。

従来のAdobeXDインポートとの違いは?

  • 1つまたは複数のアートボードとオブジェクトをインポートします

  • アートボードをシーンとしてインポートします

  • 選択したものをインポートします

  • ベクターレイヤーをSVGとしてインポートします

  • テキストレイヤーをテキストレイヤーに変換できるSVGとしてインポートします

  • 制約条件をそのままインポートします

デザインをProtoPieにインポートする間、AdobeXDを開いてデスクトップに表示したままにするとより効率よく便利にお使い頂けます。

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

AdobeXD用のProtoPieプラグインのお試しにはこちらのサンプルファイルをご利用下さい。

シーンとしてインポート

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

オブジェクトのインポート

Adobe XDと同じレイヤー階層、配置、および条件にてオブジェクトをインポートします。 1つまたは複数のオブジェクトを一度にインポートすることができます。

AdobeXDのコンポーネントとコンポーネントインスタンスはコンテナとしてインポートされます。 ProtoPieではそれらをコンポーネントに変換して保存します。 [詳しくはこちらから]

SVGとしてインポート

AdobeXDのベクターレイヤーをSVG(Scalable Vector Graphics)としてProtoPieにインポートします。 プロパティを編集可能にするには、インポート後にShape(シェイプ)に変換して下さい。 ProtoPieではまだ全てのSVGプロパティがサポートされておりませんのでご注意ください。 [詳しくはこちらから]

テキストレイヤーをインポートする

AdobeXDのテキストレイヤーをSVGとしてProtoPieにインポートします。 プロパティを編集可能にするためには、インポート後にテキストレイヤーに変換します。 [詳しくはこちらから]

再インポート

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

  • ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、再インポートしても変更がオブジェクトには適用されません

  • インポート後にレイヤー階層を変更した場合、再インポートしても変更したレイヤー階層は適用されません。 (例)インポートしたレイヤーを新しく作成したスクロールコンテナーに追加する

  • 削除されたインポートレイヤーは、Adobe XDにてこの特定のレイヤーのみを選択してProtoPieにインポートしない限り、再インポートされません

  • シーンまたはオブジェクトの複製をしたい場合には、一度インポートしてから複製します。 (例)AdobeXDのアートボードを2つのシーンとしてProtoPieにインポートしたい場合。まずは一度インポートしてから、シーンを複製して2番目のシーンを作成します。

Adobe XD インポート(旧方式: Legacy)

ProtoPie5.2またはそれ以下のバージョンでご利用可能です。

ArtboardAdobe XD CC

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

Import Size

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

All layer structure

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

Only layers marked for batch export

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

Overwrite positions of layers

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

Overwrite sizes of layers

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

Update layer orders and grouping structure

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

Remove layers deleted in Adobe XD CC

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

よくあるご質問

Back To Top