Building a VR app in Figma
ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2020
- Apologies for the audio, Mic stopped working mid recording 😓
Join our mentorship program here 👉 www.upglance.com/
Follow me on:
/ akashy
/ kash__91
dribbble.com/akashy
Get the 360 panorama image from here: istreetview.com/
Guys, 👋 I am also working on a full-fledged UX Design course on how design works in companies. Practical knowledge on design processes, hands-on design tools, product thinking, problem-solving, cracking design interviews and more.
You can now support me by buying me a coffee here: www.buymeacoffee.com/ZeWIlq6
Recommended books for UX:
1. Universal Principles of design (amzn.to/39XQ6s9)
2. Design of Everyday Things (amzn.to/31ifuoT)
3. Start with why (amzn.to/3i2QZCA)
4. Don’t Make Me Think (amzn.to/3ikiDeP)
5. Hooked: How to Build Habit-Forming Products (amzn.to/2PqUQxi)
6. The Lean Startup (amzn.to/31k0Nl1)
7. Made to Stick: Why Some Ideas Survive and Others Die (amzn.to/33rXzOY)
8. Creative Confidence: Unleashing the Creative Potential Within Us All (amzn.to/33rUFd6)
9. Thinking, Fast and Slow (amzn.to/2PocEcb)
My TH-cam setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc
![[ไฮไลต์] "บิว" ภูริพล บุญสอน วิ่ง 100m ชาย รอบคัดเลือก | โอลิมปิก 2024](http://i.ytimg.com/vi/3kUSMfgtQ5s/mqdefault.jpg)
thanks Chief for all your video they are amazing . really helpful.
Great tutorial, thank you!
This is awesome! Thank you. Can’t wait to try it out and.. of course for your upcoming videos!!
Thank you so much 🤗 do watch my previous tutorials and stay tuned for the next ones 🤗
this is awesome dude! very practice and easy for hands-on, appreciate your lesson!
Thank you Zeyi, Glad you liked it. Checkout the other interaction videos on the channel too😇😇
Great tutorial! Really worth watching it! Looking forward to see more like this!
thank you Marina! Will be posting more soon 🤗
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! ⭐
Glad you like them! 🤩🤩
Thank you Akash!
Awesome!
Omg! That's amazing. Definitely gonna try!💯🙌
Thank do try it out and tag me wherever you pubish
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 ) ...😂
Keep it up👍 Thank for sharing this with us.
Looking forward to more videos on AR VR tutorial.
thank you so much 🤩
Wow this is awesome
Wow amazing 😍 gonna try this on figma..
Thank you for the creative tutorials 🙏
Thank you Namratha 🤗
great tutorial, thank you!
glad you liked it 😇😇
Magic!!
Can you supply a link to the assets used in this tutorial so I can try myself?
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:))
Great tutorial, thanks, can I have the link to the panorama image?
awesome tutorial! thanks a lot! :)
thank you😇😇😇😇
Thank you a lot for this video, it's really helpful
Glad it was helpful!
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😭
Much thanks!
You're welcome!
How exactly did you make it so the 360 image is able to be dragged around while protoyping?
This is super awesome 💯💯💯💯
thank you😇😇
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 :)
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 😇
Great tutorial
thank you
how to get pictures
salve, a me non ruota l'immagine nella prototipazione ma esce direttamente il nuovo frame
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.
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. 😬
@@AkashYadavUX Yep, I understand.
W
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.
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
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.
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 ✌️
@@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.
Awesome
thank you😇
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?
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/.
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
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 😇
th-cam.com/video/rokyaFKW8NU/w-d-xo.html
Hello. Please can this be recreated for smaller frames like an iPhone 11 Pro Max?
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.✌️
תודה!
Thank you so much Lili 😄
@@AkashYadavUX I loved your video thank you! keep up the good work👍
@@lilishisa6687 thanks for being a subscriber :) More videos on the way.
can you share the figma link with us?
Hey
All the source files are present in this video th-cam.com/video/rokyaFKW8NU/w-d-xo.html
Is this possible in Adobe XD?
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 😊
@@AkashYadavUX Thank for your prompt reply. Appreciate it 😀👍
Hello.. can i get this file pls
You can find all the source file on my Figma page
www.figma.com/community/file/932223204866138211
@@AkashYadavUX wow!! great.. thanks a lot
It's not clear, I can't properly understand step by step
Hey please find the source file here : th-cam.com/video/TSXyYt4o0Zg/w-d-xo.html this should clear up things. Had a lot of hiccups while recording this video, hence a bit of confusion at some places.
Thanks :)
@@AkashYadavUX Thank you so much for your kind reply 🙂