Figmaからデザインをインポートする

オプション 1：Export (エクスポート)

Exportボタンをクリックしたときの動作は、選択しているオブジェクトや選択したエクスポートタイプ（「Scene」、「Object」、「Flattened」）によって異なります。

例えば、フレームを選択してエクスポートタイプにSceneを選択した場合、そのセクションの構造がProtoPieのシーンに変換されます。ProtoPieが完全にはサポートしていないプロパティは、SVGレイヤーとして取り込まれます。

注意：サポートされていないプロパティが原因で、インポートしたデザインがFigmaと異なって見える場合は、より視覚的な再現性を高めるために、Export as Flattenedオプションを使用して再インポートしてみてください。

結合レイヤーのインポート

視覚的な再現性を高めるために、Figmaでレイヤーを結合（フラット化）してからProtoPieにエクスポートすることができます。

オプション 2：結合してエクスポート（Export as Flattened）

デザインを簡略化され統合された画像としてProtoPieに取り込むには、エクスポートタイプでFlattenedを使用します。これは、レイヤーレベルの詳細度よりも視覚的な再現性が重要な場合に特に便利です。

インポートする前に、個々のレイヤーを結合したり、複数のレイヤーを1つに統合したりできます。これにより、Studioでのインタラクションの管理や、視覚的な一貫性の維持が容易になります。

結合された画像の最終的な解像度は、ProtoPieの密度設定に従います。

シーンとしてのインポート

ProtoPieでは、同じ名前を維持したまま、1つまたは複数の最上位フレームをシーンとして同時にインポートできます。最上位フレームのシーンとしてのインポートは、Figmaのレイヤー階層に基づいています。

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

Figmaで同じレイヤー階層、配置、制約を持つオブジェクトは、個別または一括でインポートできます。最上位フレームではないものはすべて、シーン内のレイヤーまたはコンテナとして表示されます。

Figmaのコンポーネントおよびコンポーネントインスタンスは、コンテナとしてインポートされます。ProtoPieでもコンポーネントとして維持するには、これらをコンポーネントに変換してください。詳細は、コンポーネントについて参照してください。

コンポーネントモード

プラグインでコンポーネントモード（Component Mode）を有効にすると、Figmaのコンポーネントを、ProtoPieで再利用可能なリンクされたコンポーネントとしてインポートできます。

コンポーネントモード - ON

コンポーネントモードが有効な場合：

• メインコンポーネントは、ProtoPieのローカルライブラリに直接エクスポートされます

• インスタンスは、ライブラリコンポーネントへのリンクされた参照としてキャンバス上に残ります

• バリアントは、完全なバリアントサポートを備えた個別のコンポーネントとしてインポートされます

• 選択範囲内のすべてのネストされたコンポーネントが自動的にインポートされ、階層とリンク関係が保持されます

コンポーネントモード - OFF

コンポーネントモードが無効な場合：

• すべてのレイヤーはシーンまたはオブジェクトとしてインポートされます

• コンポーネントは保持されず、通常のコンテナとして扱われます

• ProtoPieでFigmaのコンポーネントを使用するには、インポート後に手動でコンテナをコンポーネントに変換する必要があります

注意：コンポーネントモードは、エクスポートタイプが「Scene」および「Object」の場合に動作します。「Flattened」エクスポートには適用されません。

SVGとしてのインポート

Figmaのベクターレイヤーを、ProtoPieにSVG（Scalable Vector Graphics）としてインポートします。インポート後にシェイプに変換（オブジェクト → 編集可能にする）して、プロパティを編集できるようにします。ProtoPieは、まだすべてのSVGプロパティをサポートしているわけではありません。詳細は、SVGレイヤーについて参照してください。

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

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

インタラクションのインポート

FigmaからProtoPieへ、フレーム間のプロトタイプのインタラクションを手間をかけずにインポートできます。

ProtoPieは、インポート時にFigmaのフレーム間のインタラクションを自動的にジャンプ（Jump）レスポンスに変換します。より複雑なインタラクションを追加する前に、ProtoPie側でシーン間のトランジションを再作成する必要はもうありません。

フレームにスマートアニメート（Smart Animate）トランジションが含まれている場合、ProtoPieはこれらをスマートトランジションを伴うジャンプ（Jump）レスポンスとしてインポートします。

ジャンプ（Jump）レスポンスについて詳細を確認する。

オートレイアウトのインポート

ProtoPieは、Figmaからの基本的なオートレイアウト（Auto Layout）プロパティのインポートをサポートしています。元のデザインに合わせるために、高度な設定もインポートされます。ただし、ProtoPie Studioでこれらの設定を編集すると、設定がリセットされ、レイアウトに影響を与える可能性があります。

回転値が0以外のオブジェクトの場合、インポート時に正確な配置を確保するために、ProtoPieは基準点を(50, 50)に設定します。

デザインの再インポート

Figmaからフレームやオブジェクトを再インポートすると、ほとんどのレイヤーは自動的に更新されます。ただし、ProtoPie内で行われた変更は保持され、上書きされることはありません。

再インポート時に更新されないもの：

• ProtoPieで変更を加えたオブジェクト（例：サイズ、位置、スタイル）。

• レイヤーパネル（Layer Panel）内で移動させたレイヤー（例：スクロールコンテナに追加したレイヤー）。

• 削除されたレイヤー（Figmaから再度選択してインポートしない限り更新されません）。

• ProtoPie内で行われたコンポーネントオーバーライド（コンポーネントモードを使用している場合）。

補足のヒント：

• シーンやオブジェクトの複製を作成するには、1度インポートした後にProtoPie内で複製してください。

• 再インポートは、常に直近のエクスポートタイプ（Scene、Object、またはFlattened）に従います。

• デザインが期待通りに表示されない場合は、Flattenedオプションを使用して再インポートしてみてください。

コンポーネントモード使用時の再エクスポート動作：

• Figmaから再エクスポートするとき、レイヤーがStudioで編集されていない場合に限り、ProtoPieはコンポーネントの視覚的プロパティ（サイズ、位置、塗りつぶし、境界線、テキスト、レイヤー順序）を更新します。ライブラリコンポーネントへのインスタンスリンクは、再インポート時にも保持されます。

ProtoPieがインポートされたレイヤーを管理する方法：

• Figmaからインポートされた各オブジェクトには、固有の内部IDが割り当てられます。

• 同じファイルおよび元のインポートに由来するオブジェクトのみが、再インポートおよび更新できます。

• エクスポートタイプを切り替える（例：「Scene」から「Flattened」へ）と、以前のインポートデータが新しいフォーマットに置き換わります。

Frame (フレーム)

インポートするFigmaのフレームを選択します

インポートサイズ

レイヤーの倍率を設定します。これはFigmaで選択されたフレームのサイズに基づいて変更できます

すべてのレイヤー構造

フレーム内のすべてのレイヤーがフォルダ構造でインポートされます

一括書き出しマーク付きレイヤーのみ

Figmaで「書き出し」マークが付けられたレイヤーのみがインポートされます

レイヤーの位置を上書き

Figmaからフレームを再インポートするときに、レイヤーの位置の値を上書きします

レイヤーのサイズを上書き

Figmaからフレームを再インポートするときに、レイヤーのサイズ の値を上書きします

レイヤーの順序とグループ化構造を更新

Figmaからフレームを再インポートするときに、レイヤーの順序とグループ化構造を更新します

Figmaで削除されたレイヤーを削除

Figmaからフレームを再インポートするときに、Figmaで削除されたレイヤーを削除します