Figmaからのインポート

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

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

Figma用ProtoPieプラグイン

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

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

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

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

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

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

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

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

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

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

• 一つまたは複数のフレームとオブジェクトをインポート
• 選択した項目をインポート
• べクター・レイヤーをSVGとしてインポート
• テキスト・レイヤーをテキスト・レイヤーとしてインポート
• ContraintsをそのままContraintsとしてインポート

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

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

安装并下载Figma插件。

シーンとしてインポート

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

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

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

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

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

SVGとしてインポート

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

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

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

インタラクションをインポートする

フレーム間のプロトタイプのインタラクションを、FigmaからProtoPieに簡単にインポートします。

ProtoPie は Figma でフレーム間に適用されたインタラクションを Jump レスポンスに変換してインポートします。これにより、インポート後にProtoPieでシーン間のトランジションを再作成する必要がなくなりました。

Figmaのフレームにスマートアニメート トランジションが含まれている場合、ProtoPieはこれらをスマートトランジション付きのジャンプレスポンスとしてインポートします。

詳細はこちらをご参照ください。

再インポート

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

• ProtoPieにインポートしたオブジェクトのプロパティを一部変更した場合、再インポートしてもこのオブジェクトは影響を受けません。
• ProtoPieで新しく作成したスクロール・コンテナーにはレイヤーの順番などが設定できますが、再インポートした場合は、編集されたレイヤーが適用されません
• インポート後に削除されたレイヤーは、再インポートの際には自動的に適用されません。 レイヤーをインポートしたい場合にはFigmaでレイヤーを選択し、そのレイヤーを別にインポートする必要があります。
• シーンまたはオブジェクトを複製したい場合は、一度インポートしてから複製してください。例えばFigmaのトップレベル・フレームをProtoPieで２つのシーンとして読み込みを行いたい場合は一度インポートしてからシーンを複製することで２つ目のシーンを作成します。

Figma导入（原有导入方式）

ProtoPie提供了多种在macOS和Windows上将 Figma 创建的文件导入进来的方法。您可以根据需要来自定义导入的方式，如导入所有图层或只导入在Figma中标记为可导出的图层。点击此处了解关于如何在Figma 中标记导出的更多知识。

您可以在Figma 中变更您的设计并重新导入到ProtoPie中，这意味着您可以在Figma 和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からも削除します。

FAQs

• Why does it take so long to import my designs from Figma?

  UPDATE: try out the ProtoPie plugin for Figma, a revamped import experience to boost productivity.

  If you still use the legacy Figma import, see below.

  The fact that Figma is a browser-based interface design tool brings its own set of challenges. Hence, importing a frame from Figma into ProtoPie takes longer than importing from Sketch and Adobe XD. Possible reasons for this are affected latency as well as your own internet connection.

  Make sure you have a fast internet connection with enough bandwidth for the best performance.

• Why have some layers been imported from Figma incorrectly?

  UPDATE: try out the ProtoPie plugin for Figma, a revamped import experience to boost productivity.

  If you still use the legacy Figma import, see below.

  When a frame contains text layers, mask layers, and rotated layers, it is possible that they appear differently after importing due to technical limitations of Figma's API.

  You could work around this issue by doing the following:

  1. Add a frame in Figma covering all layers that have been imported incorrectly before.
  2. If these layers have visual effects such as shadow and blur, make sure the frame is big enough to contain the aforementioned layers.
  3. Put the aforementioned layers into the frame.
  4. Mark the frame as exportable.
  5. Re-import your frame into ProtoPie after selecting the "Only layers marked for export" option.
  6. The frame that you just re-imported will appear as one layer in ProtoPie.

  If this workaround does not work for you, it would probably be due to technical limitations of Figma's API. We recommend that you contact Figma directly.