（With Movie）How to use Figma’s plug-ins “Mockup” and “Vectary 3D”｜Insert smartphone or PC mockups into your design.

Post：2024.03.18 / Rewrite : 2024.03.18

View

51 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.

Watch a video on how to use "Mockup" and "Vectary 3D
How to use the "Mockup" plug-in
How to use the "Vectary 3D" plug-in

Watch a video on how to use “Mockup” and “Vectary 3D

How to use the “Mockup” plug-in

figma-plugin-mockup

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

figma-plugin-vectray-3d

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.