⚡️⚡️ AR Prototype in Figma and Bezel from scratch in just 16 minutes! (Out of Date)
HTML-код
- Опубликовано: 2 июн 2024
- Updated video here 👉 • ⚡ DESIGN an Apple Visi...
Let's create an AR Prototype from scratch in just 16 minutes! Using just Bezel and Figma, a once weekly design endeavor can now be done at light speed! Better yet you don't need to know Unity, C#, or Blender.
From design and animation, to live prototyping, we as designers are now empowered to fail fast and iterate! ⚡️🏃🏻💨💨
👇 Looking for a killer XR Design feature we haven't covered? Let us know in our Discord!
🔗 Links and Social:
-------------------------------------------------------------------------------
Bezel - www.bezel.it/
Bezel Figma File - bit.ly/3ldtVYY
XR Design Discord - / discord
Bezel Discord - bit.ly/3wWbfiL
🥰 XR Design Resources:
-------------------------------------------------------------------------------
bit.ly/40o97xQ
🕮 Chapters:
-------------------------------------------------------------------------------
00:00 - Intro
00:18 - Setting up Bezel
00:37 - Bezel in Figma
00:47 - Grabbing Your Figma Design Token
01:25 - Understanding what we are designing.
03:13 - Movement and navigation in Bezel.
04:21 - Importing and using your AR reference image.
05:09 - Creating your room!
06:57 - Setting up our panels.
10:27 - Connecting Figma to Bezel.
11:18 - Adding panel design from Figma to Bezel.
12:40 - Animating your XR Design
15:55 - Connecting your prototype to a headset.
17:17 - Using the AR prototype in headset.
18:18 - Outro 
Наука
The fact that he actually mentioned out of date in the title of the video. Truly an honest and loyal person to his work
Absolutely love this!!
Thank you!!😘
Can’t wait to practice ✨
Thanks for your valuable contents 💯
🙌
Your ability to explain and deliver on an idea is impressive. This is extremely high quality content. Thanks.
I appreciate that! Working on more videos!
Phenomenal. Totally eye-opening - and very excited for the possibilities that this tool offers.
Thanks bud!
This is so cool, definitely trying it out
Let me know how you like it! Also if there are any design features that you want, let me know!
bro you nailed it
Love the work you do and super thankful for sharing your knowledge. You're such an underrated youtuber, you deserve so much more. BTW, does this only work on Quest Pro passthrough or will it work on Quest 2 as well?
I appreciate that! It should work with Quest 2 pass through, and maybe I’ll test that tomorrow
The passthrough works on Quest 2 as well! :)
Thanks for the video. It's a game changer.
You bet!
COOL! THANKS 😃😆🕺 Super Tutoriall 😍
You're welcome!
Hi Daniel,
Absolutely agree, XR tools are becoming easier for product designers! To answer your question, I've been trying Open Brush (powered by Tilt Brush) lately, and it's pretty powerful in terms of what you can achieve. I'm planning to explore ways to use Open Brush and Bazel together for my next project. Loved your video, very insightful.
Great to hear!
Thanks Daniel, as a digital/UI/UX designer this is awesome to see!
Currently I'm looking at how my skills can be transferred to XR but Unity hurts my head a bit. It seems a long way from being able to create interface design quickly, maybe I'm wrong though?
I love that Bezel looks like a easier bridge from Figma.
Do you think something like this could become adopted in design studios for prototyping before Unity?
Thanks for sharing this amazing content, have just subscribed!
I think in the near future Bezel will for sure be adopted by studios. The ability to get concepts out fast is vital.
Amazing stuff Daniel. Will create something by the reference🤩 Just wondering Can I apply this interaction to check over iPhone?
This is just awesome man! I was struggling to find someone who is not boring at all and yet I found you! I am gonna make some amazing stuff with this Bezel. Anyways I have no idea why did you write OUT OF DATE with the Video Title.
There is a newer version
how to make interactions in the new version
i am about to do a full prototype for VR. going to look into Bezel now
Rad dude! Share your stuff when you’re done!
Hi,
Amazing video !
I have a question : In the pass through moment, the panels seemed a bit darker… Is that a recording artifact, or did it indeed look darker ?
A lot of that was my record settings. Trying to get the quest to record clearly is tough. That said there is also some major artifacting
One thing that might help with darker panels is to use the "Unlit" material instead of "Standard" in the object properties!
Way outside my realm of knowledge and experience, but I'm here because I'm interested in you doing cool stuff.
Awww miss ya bud!
🔥🔥🔥
Nice video ❤❤
Thanks 🤗
Hi Daniel, Yes i am having same issue with opacity in transition animation between states. I have noticed it is affecting the message transition in the Bezel gallery as well - "The 3d UI Prototype". The base state is Transparent , the state 1 it is visible and larger, then returning to base state it is still visible but smaller. I guess it is a bug do you have workaround at moment while this is an issue. I tryed flipping plane to display back as it is set to false, but not ideally the animation I was looking for- Cheers
I believe we’re fixing it. Thanks for the catch.
Thanks for the tutorial Daniel! Bezel seems like really nice and simple toolkit. One question: When I change the opacity of a panel in one state, it seems to update in all states, so I can't achieve the transition you demonstrated. Any tips?
So bass state will effect all other states. I suggest making a new state and making changes there
Ok got it. Thanks for clarifying!
Fantastic
Thanks bud!
Cool, I'm a fan of you. Which headset have you used, Meta Quest or Meta quest Pro?
I use both. But in this tutorial, I used a quest pro!
@@marqusee Pico 4 browser can open this link？
Hi Daniel, thanks for the tutorial!
I have a small problem:
Not sure why but there's no add button next to material for floor. I only have a "material library" and dont know where to paste the token.
Never mind! Found it XD
Great video Daniel, thank you! Somehow when I'm trying to change the opacity within the material between state it doesn't work and record the change of opacity. Any idea how to fix it? Cheers
I would check out this video. 👉 ruclips.net/video/GKsxsZhJ0Sc/видео.html
We are constantly making updates to the product and how it works, so its changing quickly.
Cool thought it might be the case, ill check our the new one cheers!
@@marqusee
Hey Daniel,
I face two issues-
1. The prototype part was in the toolbar and didn't allow to connect with states of other groups/ layers
2. I tried viewing it on my phone but it was always very zoomed out, any suggestions on how I can improve that?
Hrmm. I can jump on a call with you to help ya!
1. The prototyping feature has been moved to the top bar. Look for the lightning bolt.
2. Bezel recently added anchoring to the product. So make sure your prototype is at the center of the world scene.
Hey Daniel! What's the recommendation for exporting image assets from figma and importing into bezel? I've noticed that the quality of 2x files appears to be quite low (pretty hard to read text) when previewed in the headset. Could you please provide some export settings recommendation?
try duplicating the panels in Figma and sizing them up 3x. Then paste that frame link in the material of your panels in Bezel.
Also make sure you are placing your content for 1M away.
I'm not using the Figma plugin. Just exporting images and uploading to Bezel. Will try the scale trick. The main issue at the moment is after 1 meter distance. It gets pretty pixelated. I'm guessing is just how threejs is rendering things.
Polite question:Could you make a video explaining the comparison between the two tools Bezel and ShapesXR?//I am a Chinese viewer, maybe because my comments are translated by Google, I hope you can understand them.😊🥰
1st time I used this - worked like a charm (thank you so much for such a great and easy tutorial!!)
2nd time - it asks me to tilt my head like last time and the frame appears but this time it's not working . Tried restarting but still nothing - please help!!
Can you hit me up on the discord channel? I can help you there.
Hi Daniel thanks for amazing tutorial! I followed the tutorial and was wondering if I can prototype the virtual screen without the headset? Thanks!
On desktop? If so yes
I mean on mobile like Adobe Aero!
@@Yodi-yodi Hello, have you tried prototyping this on mobile ?
Hi Daniel, In my case the back and forth button don't provide me an option to add interaction. Though I followed every single step but still the feature to add interaction isn't appearing. It only gives me fesibility to add states. Please help
Interactions are now in state machine. It’s on the top bar.
@@marqusee Hello and Namastey! Can you provide a link on how to manage states? Since, I'm a beginner, it is confusing for me.
Hello Daniel, I am seeing a different inspector panel in the browser. I couldn't able to add interactions. I find the interactions as floating box at the bottom of the browser. Upon clicking the flash icon, it opens up the panel where I can find a draggable thing such as Base state, state etc.
This is an older tut and we have made some major overhauls to the state machine. Linked bellow are some newer tuts with the updated system.
ruclips.net/video/GKsxsZhJ0Sc/видео.html
or
ruclips.net/video/Ep3RmZCGHOI/видео.html
@@marqusee let me try to follow the new tutorial and replicate the actions. Thank you for your prompt response brother.
Few comments to share with you,
1. The pace of teaching is quite fast to follow.
2. The cursor movements are really hard to notice where you are making changes.
@@marqusee How can I test the prototype other than Apple Vision Pro?
Can I test in Microsoft Holo Lense?
@@marqusee Also, I don't see the camera settings in my UI such as environment etc.
Is there any other version of bezi?
Hey Daniel, I am unable to customize the opacity transition. Earlier when I prototyped it a month ago, it worked fine, now I am unable to and have to look at all widgets at once. Bug?
Hrmm seems like a bug
Does it not allow you to animate any layer opacity?
And how do you import components? Like hover effect and carousel?
You could create components in a file, add it to a team then grab them in the asset library , but components at the moment are super janky. Working on fixing them soon.
Can the AR interative prototype be viewed on Ipad since I don't have the head
set?
Theoretically, yes. But it will be a major pain.
To be honest, to prototype with these tools was wayyyy easier than it is now with the State Machine (it is too complex).
How so?
@@marqusee I am a designer and using this approach was more intuitive (coming from Figma). I selected a trigger object and then from a dropdown a pick the affected object and its starting state and boom! (very simple). Now, I need to duplicate states and create connections between them and try to find the triggering object hahaha do not get me wrong, I am not telling it is bad, it was just like a punch in the face hahaha. You went from a very traditional solution to a no-code node-based approach... You should consider having both options and activate them with a toggle or something like tback in the day with the old 3DSmax or maya.
Hey! I have a doubt. I do not have a Headset to try it out on. Can I use the camera on my phone to agusment it? please let me know thanks
Umm you could, but positioning and tracking may be hard. Maybe use a rig and nest the panel in the head?
Could you please provide the latest updates or features in prototypes with this example
I suggest looking on the Bezi RUclips. I for the most part am not really doing tutorials anymore
Hey, could you teach us something like a VR app like virtual tour apps to museums? I am currently doing a project similar to this and barely found any content on youtube
Cool idea! You want to create a virtual museum? People have played around that concept. It’s basically just creating a room and placing a bunch of assets.
When setting the transparency switching between planes 1 and 2, the transparency from base state to state1 changes together. What is going on?please
Let me see if this is a bug
Loved this!! but not able to test my AR prototype on my phone
What phone are you on?
@@marqusee iphone 13
hey Daniel having difficulties with opacity during animation. when i change opacity of a panel in a state it also change in the other state and vice versa.
You may be switching a groups opacity instead of a single object.
@@marqusee no am switching individual object's opacity
try again on this version may be it is a bug@@marqusee
Hello Daniel, I can't find Bezel community on figma? Can you please help? Also, i am unable to join discord ...when i accept invite it says" Unable to accept invite" :/
discord.gg/VjMaMrXUdM
www.figma.com/community/file/1202434929290338500/bezi-community-v2
What is the use with this kind of work to the real world and users. Wearing a VR headset and looking about the interface ? We already have mobiles and laptops, touch pads. But what is the exact use case with this kind of projects I just want to understand better.
There are a lot of benefits of spatial computing. Do we simply build a faster horse or reimagine transportation?
Hi for some reason I can't paste the token to Bezel and even though I type, it says invalid token. I also tried the new intergration setting and it didn't work :(
you on discord? I could jump in and help ya.
@@marqusee Hey hey I changed my browser and got it sorted thank you Daniel!
Hello Daniel,
The Bezi prototype is not working on Android Tablet. Can you suggest a way, please? This is quite urgent to test my dissertation project.
It is working as expected in Android mobile -> Google Chrome Browser -> Tab on AR view. It opens up the camera and I can see the prototype overlaying in the real world.
Can you please hit me up on the XRD discord? It could be many different things
@@marqusee I just found that, Google Play Services for AR App is not installed and not working in my tablet.
Great work Daniel 🔥🔥🔥🔥
I found this when I was looking for something like Figma for AR and I hope I got it.
Few questions on using this,
1. Can we run this prototype in Nreal Air glasses?
2. May I know what other XR devices will it support?
3. Should we install any applications or plugins or configure the AR device to experience the prototype?
1. It should be able to run on any browser based WebXR device.
2. Same as above.
3. Depending on your device you will need to have a browser that supports WebXR. Oculus has one by default, so does Nreal. So if you have one of those browsers, it should work.
where do I find the states and interaction panel in the new version?
Bottom of the screen
Bottom of the page
Hii i have been trying to do the prototype it but the interface is been changed and though i am new i have spent my entire day but not able to come to a sol can you plezz help me
Sure what has you tripped up? I can jump on a call on my discord sometime and help you out!
discord.gg/V5wPDEUs
is there a way we could prototype this in a android or ios device?
Yes there is. At the moment it requires browsers that support WebXR
Hi,
I dragged reference photo and control it but I couldn't see on the screen.
Can you not see it from any angle? your normals may be backwards.
@@marqusee I fix it, thanks
Hi Daniel, for some reason I can't open bezel new file. It keeps loading for a long time, is there some solution? THX a lot!!
ok I know, it's my chrome, something wrong with it. Safari is good
Should be working :/
Any other alternative to Bezel?
You could use Unity. But nothing as easy as Bezi.
Says invalid token i tried several times(
Also, can't use ctrl+C and ctrl+V in that section (((( 10:54
Bezel changed how it handles tokens recently. Here is a quick video to help you out!
www.loom.com/share/cc0ecfed19454371b05431eb7cb0ae6d
Please how can i preview on mobile phone ?
you should be able to publish a link. But we are working on optimizing phone delivery.
i cant find the interactions, this is one year old, I assume they update the interface,
Yes. Look down at the bottom of the screen for the lightning bolt
Why is this out of date ?
Bezel has completely changed their animation tools
Can we cast into the real world without the headset?
You mean with a mobile phone?
@@marqusee yes
don't know why but my Bezel lags so much
It lags in browser? Also are you lagging with this videos set up?