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.

blog-cover-3D-UI-vectary.jpg

UI design in a way that has never been done before

With the creative industry constantly evolving, pushing boundaries and taking leaps, it is necessary to stay on top of the new trends. Designers who focus on 2D usually use vector based formats and tools when creating prototypes for new UIs. Vectary's new feature provides an intersection between 3D and 2D creative tools with the aim to simplify the design process. Vectary is the only 3D design platform that helps to bring 3D and AR design closer to 2D designers.

The main idea behind the feature is that the present-day 2D designers will most certainly become the 3D UI designers of tomorrow. Most interfaces are now slowly transitioning into AR and 3D space.

Benefits of the new Vectary's SVG import

The SVG import introduces a number of benefits into the field:

  • Vectary now stores SVG files as vector objects, so you have all the control over path quality, meshing and rasterization.  
  • All SVG file settings can be easily adjusted in one panel and reversed at any time during the creative process.
  • It is up to you to choose whether you want to work with the SVG file as a 2D image or a 3D geometry.
SVG-Article-3D-AR-UI

How to start prototyping a 3D and AR UI mock-up:

  1. Download your SVG file.
  2. Drag and drop the file into Vectary. At first, it will appear as a rasterized 2D image. In the right panel, an SVG object menu will appear.
  3. In the Geometry section, you will find 3 properties you can edit: “Segments”, “Offset” and “Extrude”. By increasing “Extrude” value, your object takes on a 3D look - the higher the value, the thicker the object. “Segments” define the quality of 2D shapes converted to 3D geometry - the higher the value, the more precise the object becomes. Please note that this will increase the size of the exported file. When it comes to the “Offset” function, it basically disassembles the object into different layers based on the SVG structure. The layers are then spaced out into the third dimension which provides you with an exploded view. 
  4. By clicking on “Convert To Geometry” in “Geometry” SVG settings, the SVG file gets converted into 3D. Now by entering the Edit Mode, the
    mesh of the 3D model can be adjusted. 
  5. The basic 3D model is ready. Now you can start adding various backgrounds and lighting options.
  6. When you’re finished, you can export the project as a PNG file, 3D file or embed it into your website for anyone to see as an interactive 3D element with AR preview.

Open this blog on iPhone with Safari or Android with Chrome to see the design augmented reality. Learn more about Vectary 3D/AR Viewer.

Tip: How to export an SVG file in Figma to achieve the layered 3D UI effect in Vectary

1. Your SVG file structure determines the spacing between objects in 3D. The deeper a layer or group in the file’s root structure is, the higher it will appear in Vectary’s “Geometry” SVG settings when using the “Offset by structure”.

Figma-UI-vectary

2. When exporting the SVG file in Figma always tick “Include the “id” Attribute”.

Figma-export-for-vectary

Get inspired 

Create 3D/AR UI

There is a number of UI centric and prototyping design tools that use vector formats - like Figma, InVision Studio, Adobe XD, Framer, and Sketch. Now you can import your UI prototypes in an SVG format into Vectary and create a 3D mock-up.

Create 3D and AR logos

Use Vectary to create 3D logos that can be viewed as an interactive 3D element on your website or as an object in augmented reality. Just drag and drop the SVG file of your 2D logo into the scene and extrude it in the Geometry settings in the right panel. 

Wrap and deform UIs and 3D logos

Another example of use would be wrapping the UI or logo around the object. This could be a UI that can be presented in augmented reality or a label wrapped around a bottle. You can experiment with “Deform” tools such as “Bend” to achieve that. The new Vectary SVG file import opens up new possibilities for 2D designers, especially when it comes to creating mock-ups and testing out different scenarios. 

FAQ

Is this a paid feature?

SVG import and it’s editing is part of the free plan. Export of the 2D and 3D file is part of the paid plan.

How do I import an SVG file?

You can simply drag and drop the file into the scene, or you can import it by clicking on the menu button and using the import function.

Can I embed my creation into a website?

Sure you can! Just use the Vectary Viewer to embed a file into your website or generate and send the link to anyone. They can then view it both in 3D and AR if their device supports the feature.