デバイスのMockUpなどは、
様々な場面で役立ちます。

Hanai Akihiro

Design

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

Post:2024.03.18 / Rewrite : 2024.03.18

View

90 views

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

figma-plugin-mockup

『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を押すと画像が出力されます。

Contact

お問い合わせ

こんなことを伝えたい!こんな表現がしたい!
これくらいの期間・予算で考えてるんだけど...
まずは、あなたのご要望をお聞かせください。
誠心誠意、お応えいたします。

contact
tel tel