3DモデルをFigmaにインポート

Convertifyで、glTF、GLB、OBJ、ZIPにまとめたモデルをFigmaにインポートして表示角度を調整したり、平面の画像を3Dのアイソメトリック視点に変換したりできます。

Convertifyを使うと、3Dアセットの位置を調整し、そのレンダリング結果をFigmaのキャンバスに直接追加できます。作成されるFigmaレイヤーは、長辺が2,048ピクセルの透過PNGのスナップショットです。Convertifyは画像塗りを作成する前に、外側の完全に透明なピクセルを取り除くため、レイヤーの範囲は表示されているレンダリング結果にぴったり合います。Convertifyを開いている間は、レイヤーを選択して表示角度を再調整できます。

対応している3D形式 ​

  • glTF（.gltf）
  • バイナリglTF（.glb）
  • Wavefront OBJ（.obj）
  • 対応するモデル1つとそのリンクファイルを含むZIPパッケージ（.zip）

glTFやOBJファイルが別の.bin、.mtl、テクスチャファイルを使っている場合は、モデルとすべてのリンクファイルをまとめて選択するか、ドロップしてください。1つのモデルとそのリンクファイルを、相対的なフォルダパスを保ったままZIPにまとめ、そのZIPをConvertifyに直接ドロップすることもできます。

3Dのソースファイルを直接読み込む場合は、合計200 MBまで対応しています。ZIPパッケージは、圧縮時で50 MBまで、展開後で200 MBまでです。

モデルをお探しですか？Sketchfabの3Dモデルを探してみてください。使う前に、各モデルに表示されているライセンスを確認してください。

3Dモデルをインポートする ​

  1. Convertifyを開き、Import into Figmaタブをクリックして、Import 3D to Figmaを選びます。
  2. Import 3D Modelタブを選択したままにします。
  3. インポートエリアをクリックするか、モデルファイルをドラッグします。モデルがリンクファイルを使っている場合はそれも含めるか、1つのモデルとそのすべての依存ファイルを含むZIPをドロップします。プレビューが読み込まれた後は、Load anotherをクリックして差し替えるファイルを選ぶか、差し替えるファイルをLoad anotherボタンに直接ドロップします。
  4. プレビューをドラッグするとモデルが回転します。macOSではCommand、WindowsとLinuxではCtrlを押しながらドラッグするとパン、スクロールするとズームできます。
  5. 思いどおりの表示になるまで、プレビューでモデルを調整します。
  6. Add to canvasをクリックすると、その表示がレンダリングされた画像レイヤーとしてFigmaに挿入されます。挿入した後に表示を変更しても、Update canvasをクリックするまではプレビューにのみ反映されます。

画像を3Dのアイソメトリック視点に変換する ​

動画を見ながら進めたい場合は、3Dアイソメトリック視点の動画チュートリアルをご覧ください。

  1. Import into Figmaタブをクリックし、Import 3D to Figmaを選んでから、Image to 3D Perspectiveを選びます。
  2. PNG、JPG/JPEG、JPE、JFIF、WebP、GIF、AVIF、BMP、SVGの画像を追加するか、Figmaでレイヤーを1つだけ選択してUse selected Figma layerをクリックします。プレビューが読み込まれた後は、Load anotherをクリックして差し替える画像を選ぶか、画像をLoad anotherボタンに直接ドロップします。
  3. プレビューを回転、パン、ズームしてから、Add to canvasをクリックします。挿入した後に表示を変更しても、Update canvasをクリックするまではプレビューにのみ反映されます。

別の画像をアップロードしたり、Figmaで別のレイヤーを選択して使ったりしても、Convertifyは現在のプレビューの角度、パンの位置、ズームを保持します。次の画像をデフォルトの表示から始めたい場合は、読み込む前にReset viewをクリックしてください。

画像は50 MBまで対応しています。選択したFigmaレイヤーは、現在の1xサイズの透過PNGとしてローカルでキャプチャされ、その後、最終的な3Dアイソメトリック視点が2Kでレンダリングされます。元のレイヤーは変更されず、一時的な画像データはConvertifyを閉じるか再起動したときに破棄されます。

WebMは画像形式ではなく動画形式のため、Image to 3D Perspectiveでは使えません。

インポートした3Dレイヤーを再編集する ​

Convertifyを開いている間に、インポートした3Dレイヤーを選択すると、そのモデルとカメラ位置が復元されます。プレビューを調整し、選択したFigmaレイヤーのレンダリング画像を置き換える準備ができたら、Update canvasをクリックします。

Convertifyを閉じたり再起動したりした場合は、3Dレイヤーを選択して、元のソースファイルまたはZIPをもう一度ドロップします。Convertifyが保存された表示のメタデータを復元するので、必要に応じてプレビューを調整してからUpdate canvasをクリックすると、同じFigmaレイヤーが更新されます。

ドロップした元のモデルファイルと画像ファイルは、プラグインの一時メモリにのみ保持され、Convertifyを閉じるか再起動すると破棄されます。Figmaドキュメントに保存されるのは、レンダリングされた画像レイヤーと軽量な表示のメタデータだけです。

3Dのレンダリングとファイルの処理は、Convertifyプラグイン内のローカル環境で行われます。生成されるFigmaレイヤーはレンダリングされた画像であり、編集可能なメッシュではありません。