デバイスのMockUpなどは、
様々な場面で役立ちます。
Design
【動画あり】Figmaのプラグイン『Mockup』『Vectary 3D』の使い方｜スマートフォンやPCのモックアップをデザインに挿入しよう。
Post：2024.03.18 / Rewrite : 2024.03.18
View
93 views
Figmaのデザイン上では、プラグインを使う事で簡単にMockUpを作ることができます。
各種デバイスはもちろんのこと、衣服や、看板のMockUpも簡単に作ることができます。
『Mockup』『Vectary 3D』の使い方を動画で見る
プラグイン「Mockup」の使い方
1.プラグイン「Mockup」を検索します。
2.パネルが開いたら、検索窓に目的のデバイスを入力します。
3.この時にFree onlyにチェックを入れると、無料で使えるのモノだけに絞る事ができます。
4.デバイスを選んだら、デバイス画面中央のプラスをクリック
5.ここでは1500のままにしますが、必要な画像サイズを選択し、フレームサイズが表記されているので、クリックすると、フレームが作成されます。
6.フレーム上に必要なデザインを配置し、フレームを選択した状態で画面中央のプラスをクリックします。
7.Cropを押し、Paseteを選択すると画像が作られます。
プラグイン「Vectary 3D」の使い方
1.プラグイン「Vectary 3D」を検索します。
2.パネルが開いたら、ElementsからMockupを選択します。
3.選択したデバイスに必要なサイズでフレームを用意します。ここでは、ノートPCの2496px 1664pxで作成しました。
4.フレームを選択し、Apply Frameを選択すると、モックにフレームが反映されます。
5.シャドウの有無を切り替えたり、デバイスの向きを自由に変更したり、環境設定、マテリアル設定、シーン設定を変更し、6.Finishを押すと画像が出力されます。
-
Design
【動画あり】Figmaのプラグイン『blobs』の使い方｜流体シェイプを作ろう。
Hanai Akhiro
date.2024.04.03
-
Design
【動画あり】Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方｜魅力的なGradationを作ろう。
Hanai Akhiro
date.2024.04.02
-
Design
【動画あり】Figmaのプラグイン『Wave & Curve』『get waves』の使い方｜波線を描こう。
Hanai Akhiro
date.2024.04.01
-
Design
【動画あり】Figmaのプラグイン『FigMap』の使い方｜地図を挿入しよう。
Hanai Akhiro
date.2024.03.31
-
Design
【動画あり】Figmaのプラグイン『Split Shape』の使い方｜段組み（グリッド）繰り返しレイアウトを作成しよう。
Hanai Akhiro
date.2024.03.29
-
Design
【動画あり】Figmaのプラグイン『Skew』の使い方｜図形や文字に斜体をかけよう。
Hanai Akhiro
date.2024.03.28
-
Design
【動画あり】Figmaのプラグイン『Icons8 Background Remover』の使い方｜人物、背景を切り抜こう。
Hanai Akhiro
date.2024.03.27
-
Design
【動画あり】Figmaのプラグイン『Clean Document』の使い方｜小数点が入った要素を整数化しよう。
No tags found for the current custom post.
Hanai Akhiro
date.2024.03.26
Popular
-
【動画あり】Figmaのプラグイン『FigMap』の使い方｜地図を挿入しよう。
2024.03.31
-
【動画あり】Figmaのプラグイン『Split Shape』の使い方｜段組み（グリッド）繰り返しレイアウトを作成しよう。
2024.03.29
-
【動画あり】Figmaのプラグイン『Instance Finder』の使い方｜インスタンスを、素早く検索しよう。
2024.03.18
-
【動画あり】Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方｜魅力的なGradationを作ろう。
2024.04.02
-
【動画あり】Figmaのプラグイン『Skew』の使い方｜図形や文字に斜体をかけよう。
2024.03.28
-
【動画あり】Figmaのプラグイン『Unsplush』『Content Reel』の使い方｜フリー画像を挿入しよう。
2024.03.21
-
【動画あり】Figmaのプラグイン『Google sheets sync』の使い方｜スプシにまとめた情報を一括でデザインに反映しよう。
2024.03.18
-
【動画あり】Figmaのプラグイン『Contrast』『A11y – Color Contrast Checker』の使い方
2024.03.19
