【動画あり】Figmaのプラグイン『Mockup』『Vectary 3D』の使い方｜スマートフォンやPCのモックアップをデザインに挿入しよう。

Post：2024.10.29 / Rewrite : 2024.10.29

View

824 views

Figmaのデザイン上では、プラグインを使う事で簡単にMockUpを作ることができます。
各種デバイスはもちろんのこと、衣服や、看板のMockUpも簡単に作ることができます。

『Mockup』『Vectary 3D』の使い方を動画で見る
プラグイン「Mockup」の使い方
プラグイン「Vectary 3D」の使い方

『Mockup』『Vectary 3D』の使い方を動画で見る

プラグイン「Mockup」の使い方

figma-plugin-mockup

1.プラグイン「Mockup」を検索します。
2.パネルが開いたら、検索窓に目的のデバイスを入力します。
3.この時にFree onlyにチェックを入れると、無料で使えるのモノだけに絞る事ができます。
4.デバイスを選んだら、デバイス画面中央のプラスをクリック
5.ここでは1500のままにしますが、必要な画像サイズを選択し、フレームサイズが表記されているので、クリックすると、フレームが作成されます。
6.フレーム上に必要なデザインを配置し、フレームを選択した状態で画面中央のプラスをクリックします。
7.Cropを押し、Paseteを選択すると画像が作られます。

プラグイン「Vectary 3D」の使い方

figma-plugin-vectray-3d

1.プラグイン「Vectary 3D」を検索します。
2.パネルが開いたら、ElementsからMockupを選択します。
3.選択したデバイスに必要なサイズでフレームを用意します。ここでは、ノートPCの2496px 1664pxで作成しました。
4.フレームを選択し、Apply Frameを選択すると、モックにフレームが反映されます。
5.シャドウの有無を切り替えたり、デバイスの向きを自由に変更したり、環境設定、マテリアル設定、シーン設定を変更し、6.Finishを押すと画像が出力されます。