Creating an AR-enabled prototype with Figma.
Tools Used: Figma, Vectary, AR compatible smartphone
Step 1: Creating the interface
Create your mobile app interface on the Figma. For this example, I used a plant shop template from figmacrush and tweaked it out a little bit.
Add a call to action to trigger the AR workflow, here I added a view in the 3D button so the user will be able to see the plant in the real world.
Step 2: Creating the 3D model on the Vectary
You can import the 3D model or create one yourself in vectary. For this example, I am using a free 3d model.
Once your done importing, click on the viewer tab in the top bar.
In the viewer, window click on the generate button and then copy the generated URL.
Step 3: Bringing the 3D as a 2D image into your prototype.
To do this you need the Vectary 3D plugin installed on your Figma account.
Open the plugin, paste the copied URL and load the model into your Figma prototype. You can use the best view that fits your prototype by rotating the model before you save it as an image.
Step 4: Adding the AR viewer to the prototype.
Open the copied link in a new tab and click on the AR button on the top right.
Right-click on the displayed QR Code and copy the image address to copy the URL with a decoder or use a QR code scanner to get the address.
Now add this to link to the View in 3D button on the Figma prototype.
Step 5: Testing
Now open this prototype on any AR-supported phone and click on the link to see it opening the AR viewer and you will be able to see the 3D object in the real world.
Tada, your first AR-enabled prototype is ready.
Figma File for reference: https://www.figma.com/community/file/947832835915257827/View-in-3D---Reference-File
