My name is Maria Grishina, I am a UX/UI designer in Archy. My team and I are working with different technologies, one of which is augmented reality. The main program that I work with is Figma. I recently found an application called Torch AR, which you can link to Figma and make a prototype which will include the elements of augmented reality.
Figma is a next-generation program for the development of website interfaces and mobile applications.
What attracted me to this program was how powerful and intuitive it turned out to be both for me as a designer and for our development team. One can write a lot more about the advantages of this program, but in this article, we will look at how you can design a mobile application using Figma and augmented reality. This can be done in just four steps: interface development, creating the project and its assets in Torch, joining Figma and Torch in a single prototype and testing the result. All these steps will be useful for designers who start working with augmented reality without any programming skills.
A bit of terminology.
The main theme when using augmented reality (hereinafter AR) is the imposition of virtual objects on reality and their combination. It fills the world with virtual objects (2D or 3D), sounds, images and can also be interactive, for example:
- virtual objects can be manipulated (you can zoom in, zoom out, rotate the objects, etc);
- apply effects on the face (masks, makeup and even try on dentures);
- with their help, you can interact with links and go to different websites, and much more.
To begin with, download Torch AR application, which you can find on the official website or in the App Store. (Note: at the moment only iOS version is available, Android version is being developed).
Step one: Starting with the interface
We put our ideas into practice in Figma. I have in mind a travel application, which is still under development and which is going to have an AR route and cards with information about places that you can visit. I decided to do something similar, but with a narrower functionality.
Add the elements that we need. The idea of the project is to find places that you can visit, for example, sights, hotels, shops, and cafés. Create buttons in the tab bar to navigate between walks using a standard map and augmented reality.
Step two: Uploading assets in Torch AR
Torch supports pictures, videos, GIF, audio files and 3D models. Now we create the assets we need. For my project, I made cards with information about the café and the shop. Upload these assets to the phone’s gallery. Next, we register in Torch and create a new project. Drag the items into your project by opening the assets menu.
Objects can be moved, resized, rotated, etc. We also add interaction — link the URL to the card, so that when you click on it, the website of the café or shop will open, and a potential user can have a look at it. This can be done using the menu item called “Interactions”
Step three: Join Figma and Torch in a single prototype
In the edit mode of the project, Torch gives you an option to share (standard icon “sharing”), click on it and enter the email to which the link to the project will be sent. In the email, there will be the “Open Project “ button. Right-click on it and select “Copy Link Address”. Now the link is in the clipboard, and it will have to be inserted into the Figma prototype. (Note: Torch developers promise that in the near future this function will be more convenient. Now this function is not very obvious, and when exactly it will be improved is unclear).
In Figma, select the button that should run the Torch project in prototype mode. On the right panel, hit “Action” and change this parameter to “Open URL”. Then insert the link into the text box below the drop-down list.
Copy the link to the prototype and open it on the device where Torch AR and our project are located. You can open it in a browser or in Figma mobile application.
Step four: Run and test the prototype
On our device, open Figma and in the prototype click on the object to which our link is tied. Torch will open, and now we can interact with the world of augmented reality! Let’s take a little walk to see the result.
After reading this article you learned how to make an interactive prototype with augmented reality using Torch and Figma. We did not have such opportunity not that long ago, but technology is developing rapidly, powerful innovative programs appear, and these programs will help us open up new horizons.
