Adobe XD からのインポート

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

  • プラグイン(推奨): Adobe XD用ProtoPieプラグインをインストールして、Adobe XDでプラグインを開く
  • 旧方式(Legacy): インポートしたいAdobe XDファイルを開き、ProtoPie Studioを立ち上げる。ProtoPieで'ファイルメニュー'をクリックし、そこから'インポート'を選択する。(ProtoPie5.2またはそれ以前のバージョンでのみ利用可能)

Adobe XD用ProtoPieプラグイン

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

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

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

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

Adobe XDからProtoPieへのインポートは初めてですか?お試しファイルを使って試してみませんか?

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

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

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

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

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

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

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

オブジェクトのインポート
[object Object]

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

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

[object Object]
SVGとしてインポート

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

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

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

再インポート

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

  • ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、再インポートしても変更がオブジェクトには適用されません
  • インポート後にレイヤー階層を変更した場合、再インポートしても変更したレイヤー階層は適用されません。 (例)インポートしたレイヤーを新しく作成したスクロールコンテナーに追加する
  • 削除されたインポートレイヤーは、Adobe XDにてこの特定のレイヤーのみを選択してProtoPieにインポートしない限り、再インポートされません
  • シーンまたはオブジェクトの複製をしたい場合には、一度インポートしてから複製します。 (例)AdobeXDのアートボードを2つのシーンとしてProtoPieにインポートしたい場合。まずは一度インポートしてから、シーンを複製して2番目のシーンを作成します。

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

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

Artboard

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

Import Size

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

All layer structure

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

Only layers marked for batch export

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

Overwrite positions of layers

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

Overwrite sizes of layers

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

Update layer orders and grouping structure

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

Remove layers deleted in Adobe XD

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

panel import xd

FAQs

  • Importing from Adobe XD encountered a problem. What should I do?

    This only applies to the legacy Adobe XD import available in ProtoPie 5.2 or lower.

    If you receive the error message "Importing from Adobe XD encountered a problem" while importing a file from Adobe XD into ProtoPie on macOS, try the following.

    ProtoPie must have access to Adobe XD's data folder in order for the import to work. You need to verify that the folder's read and write permission is set up correctly in your system.

    To do so, click on the Spotlight icon in the top right corner of your screen to run queries.

    spotlight-icon

    Enter "~/Library/Application Support" in the search bar and open the Application Support folder. Right-click on it and press Get Info.

    adobe-xd-integration-doesnt-work-02

    At the bottom of the Info window, you may find the Sharing & Permissions section. Expand this section and click on the [+] button in the left bottom corner to add permission. If needed, click on the lock icon to unlock the permissions settings (this would require an administrator name and password).

    adobe-xd-integration-doesnt-work-04

    From the list of Users & Groups, please select the username you are currently logged in with on macOS and press Select to add it to the permission list.

    Click on the gear icon and select "Apply to enclosed items…". Press OK to apply the permissions to all enclosed items.

    adobe-xd-integration-doesnt-work-06

    Close the info window and restart both ProtoPie Studio and Adobe XD.

    Contact us if you need more help.

Back To Top