⚡️⚡️ AR Prototype in Figma and Bezel from scratch in just 16 minutes! (Out of Date)

[@WolF-oy8ho]

The fact that he actually mentioned out of date in the title of the video. Truly an honest and loyal person to his work

[@edgaribarra2624]

Your ability to explain and deliver on an idea is impressive. This is extremely high quality content. Thanks.

[@marqusee]

I appreciate that! Working on more videos!

[@vishalrathore1856]

Absolute Work! I don't thinks it's out of date, for beginners its up to date!

[@vinessahaddad]

Absolutely love this!!

[@marqusee]

Thank you!!😘

[@SabrinaHong-h6b]

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.

[@marqusee]

Great to hear!

[@ifeoluwaboboye6543]

This is so cool, definitely trying it out

[@marqusee]

Let me know how you like it! Also if there are any design features that you want, let me know!

[@angelicaswift215]

Can’t wait to practice ✨ Thanks for your valuable contents 💯

[@marqusee]

🙌

[@codesigner5988]

bro you nailed it

[@AsadAli-qk2db]

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.

[@marqusee]

There is a newer version

[@s19.arts_]

how to make interactions in the new version

[@TheCoffeeCreative]

i am about to do a full prototype for VR. going to look into Bezel now

[@marqusee]

Rad dude! Share your stuff when you’re done!

[@tonyK_72]

Phenomenal. Totally eye-opening - and very excited for the possibilities that this tool offers.

[@marqusee]

Thanks bud!

[@mahikakapoor5226]

love this, could you show how to do this now (up-to-date version)?

[@Marina-vb9by]

yeah, I just logged into Bezi and was disappointed to see the layout is different, and now I'm watching a different video in their tutorials. Fingers crossed it works! 🤞🏽

[@jfish032]

COOL! THANKS 😃😆🕺 Super Tutoriall 😍

[@marqusee]

You're welcome!

[@yohjiblack3463]

Thanks for the video. It's a game changer.

[@marqusee]

You bet!

[@seangalloway4179]

Way outside my realm of knowledge and experience, but I'm here because I'm interested in you doing cool stuff.

[@marqusee]

Awww miss ya bud!

[@louleon6301]

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

[@marqusee]

I believe we’re fixing it. Thanks for the catch.

[@RyanSmith-p9g]

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!

[@marqusee]

I think in the near future Bezel will for sure be adopted by studios. The ability to get concepts out fast is vital.

[@thierryflorit3863]

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

[@marqusee]

I would check out this video. 👉 kzbin.info/www/bejne/fXzWqaaQna9jicU We are constantly making updates to the product and how it works, so its changing quickly.

[@thierryflorit3863]

Cool thought it might be the case, ill check our the new one cheers! @@marqusee

[@charsipanda]

Nice video ❤❤

[@marqusee]

Thanks 🤗

[@yashhshrivastava01]

Can the AR interative prototype be viewed on Ipad since I don't have the head set?

[@marqusee]

Theoretically, yes. But it will be a major pain.

[@karimvenom6459]

And how do you import components? Like hover effect and carousel?

[@marqusee]

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.

[@LakshayJain-d3v]

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

[@marqusee]

Interactions are now in state machine. It’s on the top bar.

[@LakshayJain-d3v]

@@marqusee Hello and Namastey! Can you provide a link on how to manage states? Since, I'm a beginner, it is confusing for me.

[@SenthilKumar-v8q]

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.

[@marqusee]

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. kzbin.info/www/bejne/fXzWqaaQna9jicU or kzbin.info/www/bejne/e6GWg6CQeKx7has

[@SenthilKumar-v8q]

@@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.

[@SenthilKumar-v8q]

@@marqusee How can I test the prototype other than Apple Vision Pro? Can I test in Microsoft Holo Lense?

[@SenthilKumar-v8q]

@@marqusee Also, I don't see the camera settings in my UI such as environment etc. Is there any other version of bezi?

[@Yodi-yodi]

Hi Daniel thanks for amazing tutorial! I followed the tutorial and was wondering if I can prototype the virtual screen without the headset? Thanks!

[@marqusee]

On desktop? If so yes

[@Yodi-yodi]

I mean on mobile like Adobe Aero!

[@kanansharma3484]

@@Yodi-yodi Hello, have you tried prototyping this on mobile ?

[@akshayhirave9605]

Amazing stuff Daniel. Will create something by the reference🤩 Just wondering Can I apply this interaction to check over iPhone?

[@kaitlinchow1959]

Not sure why but I'm not able to change the opacity in a way that doesn't affect the base state.

[@marqusee]

Hrmm. Can you give me an example?

[@katebiel]

Says invalid token i tried several times( Also, can't use ctrl+C and ctrl+V in that section (((( 10:54

[@marqusee]

Bezel changed how it handles tokens recently. Here is a quick video to help you out! www.loom.com/share/cc0ecfed19454371b05431eb7cb0ae6d

[@Phanindra.m]

Loved this!! but not able to test my AR prototype on my phone

[@marqusee]

What phone are you on?

[@Phanindra.m]

@@marqusee iphone 13

[@peterhoran7873]

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?

[@marqusee]

So bass state will effect all other states. I suggest making a new state and making changes there

[@peterhoran7873]

Ok got it. Thanks for clarifying!

[@pranavpatil2339]

is there a way we could prototype this in a android or ios device?

[@marqusee]

Yes there is. At the moment it requires browsers that support WebXR

[@jegoto]

To be honest, to prototype with these tools was wayyyy easier than it is now with the State Machine (it is too complex).

[@marqusee]

How so?

[@jegoto]

@@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.

[@mahanoor8168]

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

[@marqusee]

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.

[@lucianarosa3201]

Figma prototypes are fully functional in Bezi?

[@marqusee]

No. You can copy frames to Bezi.

[@AshwiniKumar-v5p]

do you think Ar will be the future in the world of UIUX designer ? Also loved your work. I am an architect and urban planner and i recently switched to Ui Ux design (Past 8 month ).

[@19857nono]

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.

[@19857nono]

Never mind! Found it XD

[@shreyadeshmukh7984]

Any other alternative to Bezel?

[@marqusee]

You could use Unity. But nothing as easy as Bezi.

[@akinyemiolabode899]

Please how can i preview on mobile phone ?

[@marqusee]

you should be able to publish a link. But we are working on optimizing phone delivery.

[@narenuxuiconsultant6243]

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.

[@marqusee]

There are a lot of benefits of spatial computing. Do we simply build a faster horse or reimagine transportation?

[@HimanshuAbhyankar]

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?

[@marqusee]

Hrmm seems like a bug

[@marqusee]

Does it not allow you to animate any layer opacity?

[@Yuki_Blooming]

Could you please provide the latest updates or features in prototypes with this example

[@marqusee]

I suggest looking on the Bezi KZbin. I for the most part am not really doing tutorials anymore

[@kennyhongerino]

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?

[@marqusee]

I appreciate that! It should work with Quest 2 pass through, and maybe I’ll test that tomorrow

[@julianpark225]

The passthrough works on Quest 2 as well! :)

[@Darkcoder414]

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.

[@marqusee]

You may be switching a groups opacity instead of a single object.

[@Darkcoder414]

@@marqusee no am switching individual object's opacity

[@Darkcoder414]

try again on this version may be it is a bug@@marqusee

[@takirojapan]

Cool, I'm a fan of you. Which headset have you used, Meta Quest or Meta quest Pro?

[@marqusee]

I use both. But in this tutorial, I used a quest pro!

[@蔡洪振]

@@marqusee Pico 4 browser can open this link？

[@currydu3964]

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 :(

[@marqusee]

you on discord? I could jump in and help ya.

[@currydu3964]

@@marqusee Hey hey I changed my browser and got it sorted thank you Daniel!

[@siddhimahale2497]

where do I find the states and interaction panel in the new version?

[@marqusee]

Bottom of the screen

[@marqusee]

Bottom of the page

[@kanansharma3484]

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" :/

[@marqusee]

discord.gg/VjMaMrXUdM www.figma.com/community/file/1202434929290338500/bezi-community-v2

[@lonhuo8715]

When setting the transparency switching between planes 1 and 2, the transparency from base state to state1 changes together. What is going on?please

[@marqusee]

Let me see if this is a bug

[@bezi_3d]

🔥🔥🔥

[@arthurmougin]

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 ?

[@marqusee]

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

[@julianpark225]

One thing that might help with darker panels is to use the "Unlit" material instead of "Standard" in the object properties!

[@wrappedjunk217]

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

[@marqusee]

Umm you could, but positioning and tracking may be hard. Maybe use a rig and nest the panel in the head?

[@ramish.design]

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!!

[@marqusee]

Can you hit me up on the discord channel? I can help you there.

[@supervised]

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?

[@marqusee]

try duplicating the panels in Figma and sizing them up 3x. Then paste that frame link in the material of your panels in Bezel.

[@marqusee]

Also make sure you are placing your content for 1M away.

[@supervised]

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.

[@tiny_jain]

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?

[@marqusee]

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.

[@SenthilKumar-v8q]

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.

[@marqusee]

Can you please hit me up on the XRD discord? It could be many different things

[@SenthilKumar-v8q]

@@marqusee I just found that, Google Play Services for AR App is not installed and not working in my tablet.

[@lmnsf]

Hi, I dragged reference photo and control it but I couldn't see on the screen.

[@marqusee]

Can you not see it from any angle? your normals may be backwards.

[@lmnsf]

@@marqusee I fix it, thanks

[@freelancerzeesunfz2033]

Fantastic

[@marqusee]

Thanks bud!

[@jingyang8510]

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.😊🥰

[@LihuiQiu]

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!!

[@LihuiQiu]

ok I know, it's my chrome, something wrong with it. Safari is good

[@marqusee]

Should be working :/

[@mero0149]

i cant find the interactions, this is one year old, I assume they update the interface,

[@marqusee]

Yes. Look down at the bottom of the screen for the lightning bolt

[@javithdesigns7626]

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?

[@marqusee]

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.

[@huycuongphan1063]

don't know why but my Bezel lags so much

[@marqusee]

It lags in browser? Also are you lagging with this videos set up?

[@schoukah]

Why is this out of date ?

[@marqusee]

Bezel has completely changed their animation tools

[@hiteshgandhi21]

Can we cast into the real world without the headset?

[@marqusee]

You mean with a mobile phone?

[@hiteshgandhi21]

@@marqusee yes