Figmaについに3Dが登場：Vectary 3Dプラグイン

Vectaryはよく『3Dデザイン版のFigma』と呼ばれています。Figmaの中で、フォトリアルな3Dオブジェクトをお好みの角度やパースで自由に操作・配置できたら、どんなに素晴らしいでしょうか。その夢が、今日ついに現実になります！Vectaryは、カスタマイズ可能でインタラクティブな3D要素やモックアップを、デザインプロセスに直接提供します。

Vectaryを使ってFigma内でフォトリアルな3D要素をコントロール

Figma用のVectary 3Dプラグインは、2Dデザインに欠けていた3次元の広がりをプラスします。実際の3Dビューポートでお好みのパースを設定し、ワンクリックでシーンに配置できます。あらかじめ用意された3D要素をデザインに配置したり、カスタム3Dオブジェクトを読み込んだり、Figmaデザインをモバイルデバイスやデスクトップ、缶などの3Dモックアップに配置したりすることができます。

Figmaで3Dデザインシステムを作成

これにより、3Dデザインシステム全体をFigma内で構築できます。例えば、ブランドアイデンティティの一部として3D要素を使用している場合や、製品の3Dモデルがある場合、Vectaryでリンクを作成するだけで、デザイナーがクリエイティブなプロセスのなかで最適な角度を自由に選択できるようになります。

Figma用Vectary 3Dプラグインの使い方

Figmaデザインをモックアップに配置する方法：

1. FigmaでVectary 3D Elementsプラグインを開きます。
2. 3Dモックアップまたは要素を選択します。
3. Figmaフレームを選択します。
4. 「Load frame」ボタンをクリックして、既存のコンテンツをご自身のデザインに置き換えます（選択したモックアップに応じて、モバイルデバイスの画面などになります）。オブジェクトの各パーツは、マテリアル設定（Material Settings）で自由にカスタマイズ可能です。
5. モックアップのパースを調整：左クリックでドラッグして回転、またはスクロールでズームします。
6. 「Export image」をクリックして、背景が透明なレンダリング画像をプロジェクトに追加します。

任意のカスタム3Dオブジェクトや要素を読み込むには、まず

1. 開く www.vectary.comで、3Dオブジェクトを一から作成するか、3Dモデルをインポートするか、Vectaryライブラリにある何百万ものアセットを使用します。
2. 「Publish」タブに移動し、「Generate」をクリックします。
3. Figmaに戻り、Vectary 3Dプラグインを開きます。
4. 「Projects」タブをクリックし、Vectaryアカウントにログインします。
5. 3Dデザインのパースを調整：左クリックでドラッグして回転、またはスクロールでズームします。
6. 「Export image」をクリックして、背景が透明なスクリーンショットをプロジェクトに追加します。

プロのヒント：Figmaで使用する独自のVectaryモデルでテクスチャを差し替え可能にしたい場合は、VectaryでViewerを生成する前に、オブジェクトとそのマテリアルの名前を『_switchable』に設定してください。

3D要素とモックアップのギャラリーは今後さらに拡充され、すぐに使える多彩な3D素材をご提供していく予定です。

Vectary Figmaプラグインについて、気に入っている点や改善してほしい点がございましたら、お気軽に メッセージをお送りください。皆様からのフィードバックを心よりお待ちしております。