Vectary is often called “Figma for 3D design”. Imagine how awesome would it be if you could manipulate and place photorealistic 3D objects in Figma with any view and perspective you like. The dream is becoming a reality today! Vectary is bringing customizable and interactive 3D elements and mockups right into your design process.
Control photorealistic 3D elements in Figma with Vectary
Vectary 3D plugin for Figma is here to add the missing third dimension to your 2D designs. Set your desired perspective in the actual 3D viewport and place it into the scene with one click. The plugin lets you place pre-defined 3D elements into your design, load a custom 3D object, or place your Figma design into predefined 3D mockups such as mobile devices, desktops, or soda cans.
Create 3D design systems in Figma
This way, a whole 3D design system can be made in Figma. Say you are using a 3D element as a part of your brand identity, or you have a product in 3D - just create a link in Vectary and let your designers decide which perspective works best for them during the creative process.
How to use Vectary 3D plugin for Figma
To place your Figma design into mockups:
- Open Vectary 3D plugin in Figma.
- Choose a 3D mockup.
- Select your Figma frame.
- Click the “Use selected frame” button to replace the existing content with your design - it could be a screen of a mobile device, depending on the mockup you selected.
- Customize the mockup perspective: using left click, drag to rotate the mockup or scroll to zoom in.
- Click on “Save view as image” to add a render with a transparent background to your project.
To load any custom 3D object or element
- Open , create your 3D object from scratch, import a 3D model, or use millions of assets in the Vectary library.
- Go to the Viewer tab and click on “Generate”.
- In the Viewer’s format setting, choose a link from the dropdown. Copy the link.
- Go back to Figma and open the Vectary 3D plugin.
- Click on the Load tab and paste the link - your custom 3D design will load.
- Customize the 3D design perspective: using left click, drag to rotate the mockup or scroll to zoom in.
- Click on “Save view as image” to add a screenshot with a transparent background to your project.
Pro tip: If you want to have a replaceable texture in your own Vectary model in Figma, name the object and its material as “_switchable” before generating the Viewer in Vectary.
How to create a custom 3D elements in Vectary
Have an idea for a 3D object, and you’d like to place it to your Figma design? Creating objects from scratch is easy. When you have your 3D design ready, follow the instructions above. Watch the tutorial:
Our 3D elements and mockup gallery will grow with time to give you plenty of ready-to-use 3D elements and mockups.
UPDATE, 22 June 2021: Our Vectary Figma plugin has been updated, read what's new.
Introducing the first 3D UI maker for 2D designers
Discover the easiest way to create UI for 3D and AR. Meet Vectary’s new advanced SVG import feature.
The Vectary WebAR Viewer now supports AR on both iPhones and Androids
Vectary has started supporting augmented reality on Androids too! Augmented reality is provided thanks to ARcore technology - which is currently supported on more than 400 million Android devices.
Introducing Vectary 3.0: The future of the web is 3D and AR
Vectary is making the move to become the first 3D and Augmented reality CMS for the web. Vectary is closing the gap between web design and mixed reality.