MenuToggle Menu

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插件。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[object Object]
再インポート

基本的に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からも削除します。

panel figma import

FAQs

Back To Top