MockUp of devices, for example, is,
useful in a variety of situations.
![Hanai Akihiro](https://hanai.xyz/wp-content/themes/hanai.xyz/assets/dist/img/no-back.png)
Design
(With Movie)How to use Figma’s plug-ins “Mockup” and “Vectary 3D”|Insert smartphone or PC mockups into your design.
Post:2024.09.03 / Rewrite : 2024.09.03
View
74 views
MockUp can be easily created on Figma's design by using plug-ins.
MockUp can be easily created not only for various devices, but also for clothing and billboards.
![figma-plugin-mockup](https://hanai.xyz/wp-content/uploads/2024/03/figma-mock.jpg)
目次
Watch a video on how to use “Mockup” and “Vectary 3D
How to use the “Mockup” plug-in
1. Search for the plugin “Mockup”.
2. When the panel opens, enter the desired device in the search window.
3. If you check “Free only” at this time, you can limit your search to only those devices that can be used for free.
After selecting a device, click the “Plus” button in the center of the device screen.
5. Select the image size you need, and click on the frame size indicated on the screen to create a frame.
6. Place the desired design on the frame, and with the frame selected, click the plus in the center of the screen.
7. Press Crop and select Pasete to create the image.
How to use the “Vectary 3D” plug-in
1. Search for the plugin “Vectary 3D”.
2. When the panel opens, select Mockup from Elements.
3. Prepare a frame in the size required for the selected device. Here, we have created a 2496px by 1664px frame for a laptop.
4. Select a frame and choose Apply Frame to reflect the frame in the mockup.
5. Toggle with or without shadow, change the orientation of the device freely, change the preferences, material settings, and scene settings, and press
6.”Finish” to output the image.
-
Design
(With Movie)How to use Figma’s plug-ins “Mockup” and “Vectary 3D”|Insert smartphone or PC mockups into your design.
Hanai Akhiro
date.2024.09.03
-
Design
How to use Figma’s “blobs” plug-in|Let’s create fluid shapes.
Hanai Akhiro
date.2024.04.03
-
Design
How to use Figma plug-ins “uigradients”, “Noisy Gradients”, “Grainy Gradients”, and “Mesh Gradients”|Let’s create attractive gradations.
Hanai Akhiro
date.2024.04.02
-
Design
How to use Figma’s “Wave & Curve” and “get waves” plug-ins.
Hanai Akhiro
date.2024.04.01
-
Design
How to use FigMap, a plugin for Figma|Insert a map.
Hanai Akhiro
date.2024.03.31
-
Design
How to use Figma’s “Split Shape” plug-in|Let’s create a columnar (grid) repetitive layout.
Hanai Akhiro
date.2024.03.29
-
Design
How to use Figma’s “Skew” plug-in|Apply italics to figures and text.
Hanai Akhiro
date.2024.03.28
-
Design
How to use Figma’s “Icons8 Background Remover” plug-in|Crop out the person and background.
Hanai Akhiro
date.2024.03.27
Popular
-
How to use FigMap, a plugin for Figma|Insert a map.
2024.03.31
-
How to use Figma’s “Iconify” plug-in|Insert free icons into your design.
2024.03.18
-
How to use Figma’s “Instance Finder” plug-in.
2024.03.18
-
How to use Figma’s “DownSize” plug-in|Compress your images.
2024.03.22
-
How to use Figma’s “Split Shape” plug-in|Let’s create a columnar (grid) repetitive layout.
2024.03.29
-
How to use Figma plug-ins “uigradients”, “Noisy Gradients”, “Grainy Gradients”, and “Mesh Gradients”|Let’s create attractive gradations.
2024.04.02
-
How to use Figma’s “Clean Document” plugin|Let’s convert elements with decimal points to integers.
2024.03.26
-
How to use Figma’s “auto flow” plug-in|Let’s draw a screen transition diagram.
2024.03.25