Designing UI/UX for VR | How to Quickly Prototype with Figma and Unity 3D (tutorial)

I’ve been interested in AR/VR for a while. One of the obstacles I chased when I started learning AR / VR design was a lack of good resources. I wanted to prototype experiences quickly but I haven’t found any good tutorials, so I decided to make my own. In the video, I am sharing my workflow to quick 3D Prototyping. Enjoy 🤗.
Also, if there's anything you cannot figure out or if you have any further questions or notes, don't hesitate to reach out. Leave a comment, I'll be answering.
📎 CHAPTERS
0:00 Intro
1:04 Tools used in the workflow
1:44 Tutorial - Units & Scale
2:99 Tutorial - Design
3:55 Tutorial - Importing the design to Unity
4:40 Tutorial - Work in Unity
6:19 Tutorial - Rendering
7:25 Wrap-up & Final tips
📚 RESOURCES
Unity - unity.com
Figma - www.figma.com
Oculus Integration - assetstore.unity.com/packages...
Oculus Setup - developer.oculus.com/document...
🔥 SOCIALS
Instagram - / evakuttichova
Twitter - / evakuttichova
Reddit - / evakuttichova
Website - www.evakuttichova.com
Linkedin - / evakuttichova
💎 PROMOTIONS
Music in my Videos is from Artlist - artlist.io/Jiri-72713
My Website Runs on Webflow- webflow.com/?rfsn=3738854.14778b
🖤 ACKNOWLEDGMENTS
The video was filmed and edited by Jakub Veinlich.
I use affiliate links whenever possible. Thank you for supporting me.

[@niraj807]

Hi Eva , I am product designer by profession and having experience of more then 10 years and I have been learning AR/VR/XR technology like you but with the different game engine and technology which is unreal and C++. Thanks you video inspired me and also gives me that satisfaction that some one else also think the way I am thinking about the tech future and product future...

[@evakuttichova]

Hi there! Great to hear from you, thank you for sharing. I am happy you found inspiration here and I wish you the best luck with learning. Keep going :).

[@Snow-tm9ic]

@@evakuttichova cpp is such a strange language so old still being used by most game engines.

[@topemeister3000]

Wicked vid, Eva. I’ve just started a UX Design bootcamp and I’m keen to follow in your footsteps and transition into AR/VR design in the future. Looking forward to more of your vids.

[@evakuttichova]

I'm really happy to hear that ✨ Good luck

[@CreativeSteve69]

Hey Eva Just found your channel. Mainly been getting into GameDev recently and have been thinking on making my own games in VR. You were on the top list of my search. Can't wait to dive in someday soon. :)

[@evakuttichova]

Welcome aboard! Glad to have you here and I wish you the best luck with the Game Dev journey!

[@herbstelaut2994]

Thank you for this tutorial! I would like to know if one can use it for the UI in Quest 2?

[@AndresTheDesigner]

This is amazing. Thank you for sharing

[@evakuttichova]

You are so welcome! Glad you enjoyed it.

[@alyssan8586]

Any tips on a way to export the VR design and send it to collaborators (who have other headsets) so they can also view it in VR?

[@evakuttichova]

It seems like Unity droped Steam VR support 😌 I think you would have to import different VR integration and setup the project based on it... So there is not one magic button I guess

[@denimatthewvr]

Awesome!!! Thanks so much for sharing! New subscriber for sure!

[@evakuttichova]

Thanks for the support and welcome! :) Happy you like the content!

[@kvrtman_]

Thanks for the video. Can I test my designs on Oculus Quest 2 which is standalone? It's still rocket science to me and I'm trying to figure out if I could process images from Unity to Quest 2 just by a cable instead of having Oculus which is fully integrated with a PC. I'm a Mac user so only Quest 2 suits my requirements.

[@evakuttichova]

Yes I'm using this method on Mac + Oculus Quest2. The cable you get together with Quest 2 is not sufficient for this, you need a data cable :)

[@kvrtman_]

@@evakuttichova thanks for the reply. I guess you're referring to Oculus Link cable www.oculus.com/accessories/oculus-link/ ? Am I correct? Cheers

[@konstantinvaluiskii1085]

Do you guys do Build to see the result in Quest? Because the building process takes enormous time VS just pressing the "Play" button. But this kind of magic requires a PC with an Oculus App (it's Windows-only app). With the new AirLink feature, you don't even need a cable to press "Play" and see the result. I like to tune little things and see the result fast. That's why consider using PC instead of Mac for this kind of stuff. UPDATE OpenXR is there. It has a built-in simulator to hit "Play" and see the scene w/o HMD even, but it doesn't let to feel the spatial and requires agile keyoboard/mouse control skills.

[@theshirtlessgamer8628]

Thank you so much for making such a great video in English for us🙌🙌

[@evakuttichova]

My pleasure 😊, thanks for watching!

[@sea-lotus]

This is so awesome! Thank you!!! What books would you recommend to be a better ux / UI designer for vr?

[@evakuttichova]

Thank you! 🖤 Honestly, AR/VR for UI/UX is still quite a new discipline. It's still forming and it takes quite some time for some good quality books to come out for such new progressive topics. I'd recommend focusing on online resources for now. There are plenty of open-source resources for learning, such as different articles, YT videos, tutorials, workshops, and more... 🙂

The VR Book: Human‑Centered Design for Virtual from Jason Jerald is the bible.

[@laule8788]

Thank you Eva ! I'm new to develop in VR, i need to learn more about UX/UI. Your video is very useful. Do you have a UX/UI VR course?

[@evakuttichova]

I am happy you found it helpful! I don't have a course, but who knows what the future holds 😁...

[@laule8788]

@@evakuttichova It's good if you will have some courses about this for everyone in the future.

[@owlsponge3159]

Would be cool to visually show every step you are talking about.

[@evakuttichova]

Thanks for the feedback :). Noted for the future videos!

[@jairusnouvel4780]

Great presentation

[@evakuttichova]

Thanks a lot!

[@saikiranmaguluri]

I am a product designer myself with a keen interest in AR VR, I am planning to do a master's in the same. Which programming language and 3D rendering software can I learn to get a headstart before starting my course ?

[@sherrywang2274]

not a pro here but when I was in school, we mainly used C# for programming in unity. In terms of 3D modelling tool, Maya or Blender were introduced!

[@evakuttichova]

Hi there! First of all congratulations and good luck with your studies! I am not sure if it's super necessary to learn ahead, but if you want to get a headstart, I would recommend learning some game engine, Blender for 3D, and Unity for rendering :).

[@simplyaizhan]

I agree with comments below: would be nice to actually see the process while you're explaining, as it is hard to follow you. Maybe because I am a complete noob in VR design, but still wanted to share this feedback with you so you can improve :)

[@evakuttichova]

Yesss, a couple of people have given me the same feedback, so I included a recording of the process in some newer videos :). Thanks for the feedback!

[@Fil-qp2xc]

Hi! Can you link Google guidelines for scaling and something else Please?

[@TechwithDestiny]

Hi Eva, I have been looking to get into AR/VR design and can seem to get good materials or a proper road map. Would love if you can assist me

[@evakuttichova]

Hi there :). I am not sure what exactly you need, resources?

[@TechwithDestiny]

@@evakuttichova ​ Yes Eva, resources would be amazing. Also like a learning curve guide

[@DestinedProductions]

how did you go from Figma to unity?

[@evakuttichova]

Well basicaly you create a new project in Unity 3D, Export assets from Figma, and manualy import into Unity

[@DestinedProductions]

@@evakuttichova can you get all the individual elements out of figma? (I haven't actually used, but I thinking I might try if I get all the components as seperate graphics)

[@evakuttichova]

You export them ad pngs (Right side bar)

[@kvrtman_]

@@evakuttichova can you explain/make a video how you set up Unity 3D scene and connect/preview it on Oculus?

[@IslamPeacePK]

Hi, How i can learn fast AR/VR Designing..??

[@evakuttichova]

The first thing I would focus on is quality, not on being fast :)... There are definitely ways t speed learning up, but don't forget that practice makes perfect. I have an AR/VR playlist on my account where you can find 2 videos about starting with AR/VR design, you can check that for resources :).

[@alidbouk4132]

Should I know how to code if I want to learn Unity 3D ?

[@evakuttichova]

I'd say you don't necessarily need to, but I find it helpful 🙂.

[@niraj807]

As you I also love to be generalist not specialist. I feel specialisation comes through generalisation.

[@evakuttichova]

Interesting point of view. I think it differs. For some people, being generalist is a step towards becoming specialist in a particular area, but I also believe you can stay generalist.

[@boi76311]

Does an AR designer need to code in Unity?

[@evakuttichova]

I wouldn't say you necessarily need it. There are various options and tools you can use, and you don't need knowledge of any coding, but it is always an advantage :).

[@ahmedtawfeqq]

U don't need figma to unity cuz u can do ui and ux on unity and vs .... But nice tips by the way 😍

[@evakuttichova]

Well, this is my favorite way so far :). Thank you ♥.

[@girlcoolkay]

can we design the apps without a occulus quest?

[@evakuttichova]

I mean, I guess you could, but it would be hard without being able to preview the work...

[@girlcoolkay]

@@evakuttichova Oh! Thanks for the reply.The thing is I'm a UX designer and i only need to use AR for prototyping,can you tell me if there's a way to achieve this without occulus quest but previewing the work

[@user-bs8is7hm6g]

Привет, Ева! Для улучшения контента надо больше показывать из процесса и освещение впереди поставить, а то в интро и в конце очень темной получаешься (возможно дело в одежде).

[@Monsieurbungle]

Um, this not a tutorial

[@evakuttichova]

Emmm it's a description of process 🙂

[@Monsieurbungle]

@@evakuttichova do you think you could actually do a tutorial on it? Like share screen. I love your content!

[@kotonog]

yeah, it is more like a bunch of tips. Not a tutorial

[@Thepurplepotatocat]

Honestly, this is one of her most helpful videos imo. Lots of good info, and definitely enough to get you testing and learning UI for XR. But yeah, you can't copy and paste this video into your project... Feelsbadman.jpg

[@user-ln4wu8my3r]

русская сразу видно)

[@AleksLopatiuk]

Why do you only describe what to do? Why don’t you show how to do all that things? It would be much better to see, because I get nothing from just words :(

[@evakuttichova]

I was under the impression the description with illustrative shots from the process is enough to follow. I had few people reacting positively and sending me their process from my tutorial, so I think for some it is sufficient :). I understand if you are more of a visual learner though, I will think about creating step by step on screen tutorial :).

[@Carlottapiubel]

U lookin cutie girl 😍

[@evakuttichova]

Hahaha thanks!

[@SenEmChannel]

She is too pertty for game design. I think

[@evakuttichova]

Awww haha, that's sweet. Not a thing though :D.