Building a VR app in Figma

[@Thinker117]

Your videos are really helpful, as a beginner UI designer my designs look incomplete no matter what i do; but ever since i have discovered your channel i am understanding what I actually am missing in my designs. I am thankful for the effort you put to share your knowledge and working style! ⭐

[@AkashYadavUX]

Glad you like them! 🤩🤩

[@cattlebrandedmedia]

Can you supply a link to the assets used in this tutorial so I can try myself?

[@lilishisa6687]

תודה!

[@AkashYadavUX]

Thank you so much Lili 😄

[@lilishisa6687]

@@AkashYadavUX I loved your video thank you! keep up the good work👍

[@AkashYadavUX]

@@lilishisa6687 thanks for being a subscriber :) More videos on the way.

[@chaitalishah8686]

Hey I was making my case study I have chosen the same topic vr experience and I was confused where to start designing I have done the research but I was still confused where to start thank you for the video:))

[@zeyijiang7184]

this is awesome dude! very practice and easy for hands-on, appreciate your lesson!

[@AkashYadavUX]

Thank you Zeyi, Glad you liked it. Checkout the other interaction videos on the channel too😇😇

[@The_Bobber_Men]

Keep it up👍 Thank for sharing this with us. Looking forward to more videos on AR VR tutorial.

[@AkashYadavUX]

thank you so much 🤩

[@crystalrubydiamond]

How exactly did you make it so the 360 image is able to be dragged around while protoyping?

[@haifam8226]

This is awesome! Thank you. Can’t wait to try it out and.. of course for your upcoming videos!!

[@AkashYadavUX]

Thank you so much 🤗 do watch my previous tutorials and stay tuned for the next ones 🤗

[@josephdraper4485]

How did you make the image leave the bottom of the screen? I didn't see you provide any guidance on movement. I'm also wondering how you were able to scroll around when the image seemed cropped by the screen size. Please make a video about motion. I don't get that movement function.

[@AkashYadavUX]

Hey Joseph sure! I will make a separate video explaining these. meanwhile you can check the prototype source file here to get things clarified: www.figma.com/community/file/932223204866138211

[@marinabudarina]

Great tutorial! Really worth watching it! Looking forward to see more like this!

[@AkashYadavUX]

thank you Marina! Will be posting more soon 🤗

[@oluwasegunjasonoladun5051]

thanks Chief for all your video they are amazing . really helpful.

[@AntonioFigurella]

salve, a me non ruota l'immagine nella prototipazione ma esce direttamente il nuovo frame

[@inspiredbywintana5634]

Thank you Akash!

[@krithikaaramasubramanian]

Omg! That's amazing. Definitely gonna try!💯🙌

[@AkashYadavUX]

Thank do try it out and tag me wherever you pubish

[@joacodesignuxseo2994]

Hello, I am following the video tutorial that you make of the Virtual Reality prototype and I do not understand how you do to be able to navigate through the entire image, within the frame, without having to navigate to another frame, thank you very much

[@AkashYadavUX]

Hey Joaco To navigate the entire image i put the large image in crop format at the size of the ipad screen. Next i am moving the position of the image inside the crop to different areas to simulate the motion. Get the source file from this video description and see if it helps 😇 kzbin.info/www/bejne/qKDOqpR8gLxrhLc

[@zahraaliux]

Great tutorial, thanks, can I have the link to the panorama image?

[@jennalee7573]

Hello Akash! Thank you so much for this useful video: )I’m a UX student and working on my AR virtual try on project for mobile version. I was wondering how I can use this to my project… I’m having a hard time to adapt this idea to my wireframes. Can you please give me some advice? Really appreciate it😭

[@ezehelizabeth1382]

Hello. Please can this be recreated for smaller frames like an iPhone 11 Pro Max?

[@AkashYadavUX]

Yup this can be recreated in any frame, but for mobile frames you have to scale and tweak the UI a little bit. However the principle remains the same.✌️

[@aparvashistha9458]

Really Interesting Tutorial! Was trying to create a similar virtual tour experience but unable to figure out how to do 360' scrolling like most virtual tour sites have with figma's horizontal, vertical or h&v scrolling. If you/anyone can plz share how to achieve that. Thanks in advance.

[@AkashYadavUX]

Hey Apar! So 360 panorama shots usually are stitched in one axis (horizontal mostly). You usually don't get shot stitched in both horizontal and vertical axis. Hence doing both horizontal and vertical scroll would not be possible in my method. As of now we also don't have the option to insert 360-degree images/video in Figma directly, so not sure how can we do this. But will update this tutorial if I get to know it ✌️

[@aparvashistha9458]

@@AkashYadavUX Thanks Akash for the reply. I also got the 360 panorama image from google map via 'istreetview'. But I was ABLE to 3d scroll it when viewing on google-maps/istreetview but UNABLE to do so after downloading them. So do such images gets-changed/are different in format or property once we download them ( as you mentioned - is it something like they are stitched in both axis when we see them online but get reduced to one axis upon download or something). OR normal image viewer and figma lacks the capability to 3d scroll them because they seems to treat them like other 2D images.

[@saraamer6006]

great tutorial, thank you!

[@AkashYadavUX]

glad you liked it 😇😇

[@archerlin3972]

Awesome!

[@ezehelizabeth1382]

Hello Akash. I am a bit confused as to how to put those photos in the frame. Were you able to get different views of the museum or was it just a photo that you divided into different frames? I mean, did you divide one panoramic photo into smaller frames by cropping them from different angles and then prototyping?

[@AkashYadavUX]

Hi Elizabeth For this prototype to work, you will need a single panoramic 360 degree image. You can either get it from google or from a site called : istreetview.com/.

[@saranadaf5413]

Amazing🔥 , i am planning to try this out soon ( will surely mention you after the work published ) , but just an idea popped 🤔 how amazing it would have been if we had some sort of tool in figma , to add audio in design , when the widgets are opend and clicked on audio Button , we can hear the sound of Seri or David ( giving us the feeling of real exprience of an app ) ...😂

[@tibichi]

Pretty nice ideas :). On the slideshow, you can use only one image instead of two with 100% and 0% opacity. Just use the same name so smart animate will know to fade those one into the other.

[@AkashYadavUX]

Exactly Sebastian, but there was some issue with Figma, the day I recorded this. It was creating flickering issue. Similar sort of error when i created components for other parts So i changed them to separate parts. 😬

[@tibichi]

@@AkashYadavUX Yep, I understand.

[@uwanaedem7671]

W

[@puzelian4132]

how to get pictures

[@saiswarupmohanty9428]

This is super awesome 💯💯💯💯

[@AkashYadavUX]

thank you😇😇

[@korain2726]

Great video! May I kindly ask how you're able to directly use the figma prototype on the physical iPad? Were you using a specific app? Thanks a lot :)

[@AkashYadavUX]

Hey I am using Figma Mirror app for ipad. Once you login with same account on the app, it automatically mirrors the prototypes that you are working with 😇

[@fatihdemirkan4906]

Thank you a lot for this video, it's really helpful

[@AkashYadavUX]

Glad it was helpful!

[@adesinaoluwasanmi5793]

Wow this is awesome

[@mariyavesna2074]

awesome tutorial! thanks a lot! :)

[@AkashYadavUX]

thank you😇😇😇😇

[@aishwaryav.techYT]

Is this possible in Adobe XD?

[@AkashYadavUX]

Hey Aishwarya Whatever is possible in Figma, it's 100% doable in XD. XD has even more features. Just follow the same steps and you are 😊

[@aishwaryav.techYT]

@@AkashYadavUX Thank for your prompt reply. Appreciate it 😀👍

[@ikarthiksharma]

Hello.. can i get this file pls

[@AkashYadavUX]

You can find all the source file on my Figma page www.figma.com/community/file/932223204866138211

[@ikarthiksharma]

@@AkashYadavUX wow!! great.. thanks a lot

[@slokhaiyer159]

Much thanks!

[@AkashYadavUX]

You're welcome!

[@Letsdesign87]

Great tutorial

[@AkashYadavUX]

thank you

[@KalyaniTalks]

can you share the figma link with us?

[@AkashYadavUX]

Hey All the source files are present in this video kzbin.info/www/bejne/qKDOqpR8gLxrhLc

[@David66Peterson]

Magic!!

[@jannatunnayeem7258]

It's not clear, I can't properly understand step by step

[@AkashYadavUX]

Hey please find the source file here : kzbin.info/www/bejne/ioS7qoyqadRjkMk this should clear up things. Had a lot of hiccups while recording this video, hence a bit of confusion at some places. Thanks :)

[@jannatunnayeem7258]

@@AkashYadavUX Thank you so much for your kind reply 🙂

[@likithrs3998]

Awesome

[@AkashYadavUX]

thank you😇

[@namratharm6699]

Wow amazing 😍 gonna try this on figma.. Thank you for the creative tutorials 🙏

[@AkashYadavUX]

Thank you Namratha 🤗

[@BobbyCharlz]

Great tutorial, thank you!