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

Поділитися
Вставка
  • Опубліковано 25 сер 2024

КОМЕНТАРІ • 142

  • @WolF-oy8ho
    @WolF-oy8ho 2 місяці тому +1

    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
    @edgaribarra2624 Рік тому +9

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

    • @marqusee
      @marqusee  Рік тому +1

      I appreciate that! Working on more videos!

  • @vinessahaddad
    @vinessahaddad Рік тому +11

    Absolutely love this!!

  • @angelicaswift215
    @angelicaswift215 Рік тому +7

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

  • @user-nf9zr4zq9f
    @user-nf9zr4zq9f 9 місяців тому +2

    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
      @marqusee  9 місяців тому

      Great to hear!

  • @ifeoluwaboboye6543
    @ifeoluwaboboye6543 Рік тому +3

    This is so cool, definitely trying it out

    • @marqusee
      @marqusee  Рік тому +1

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

  • @christopherray6388
    @christopherray6388 Рік тому +2

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

    • @marqusee
      @marqusee  Рік тому

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

  • @AsadAli-qk2db
    @AsadAli-qk2db 3 місяці тому +1

    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
      @marqusee  3 місяці тому

      There is a newer version

    • @s19.arts_
      @s19.arts_ 2 місяці тому

      how to make interactions in the new version

  • @codesigner5988
    @codesigner5988 4 місяці тому +1

    bro you nailed it

  • @tonyK_72
    @tonyK_72 7 місяців тому

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

  • @bezi_3d
    @bezi_3d Рік тому +5

    🔥🔥🔥

  • @jfish032
    @jfish032 Рік тому +1

    COOL! THANKS 😃😆🕺 Super Tutoriall 😍

  • @yohjiblack3463
    @yohjiblack3463 Рік тому +1

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

  • @user-mb3ru7oq7b
    @user-mb3ru7oq7b Рік тому +5

    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
      @marqusee  Рік тому +2

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

  • @seangalloway4179
    @seangalloway4179 Рік тому +1

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

  • @mahikakapoor5226
    @mahikakapoor5226 2 місяці тому +1

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

    • @Marina-vb9by
      @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! 🤞🏽

  • @kennyhongerino
    @kennyhongerino Рік тому +2

    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
      @marqusee  Рік тому

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

    • @julianpark225
      @julianpark225 Рік тому

      The passthrough works on Quest 2 as well! :)

  • @jegoto
    @jegoto Рік тому +2

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

    • @marqusee
      @marqusee  Рік тому

      How so?

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

  • @akshayhirave9605
    @akshayhirave9605 10 місяців тому +1

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

  • @charsipanda
    @charsipanda Рік тому +1

    Nice video ❤❤

  • @louleon6301
    @louleon6301 Рік тому +2

    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
      @marqusee  Рік тому +1

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

  • @Phanindra.m
    @Phanindra.m Рік тому +1

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

  • @freelancerzeesunfz2033
    @freelancerzeesunfz2033 Рік тому

    Fantastic

  • @user-ke1jb5fz6g
    @user-ke1jb5fz6g 5 місяців тому

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

    • @marqusee
      @marqusee  5 місяців тому

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

  • @jingyang8510
    @jingyang8510 6 місяців тому

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

  • @peterhoran7873
    @peterhoran7873 Рік тому +1

    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
      @marqusee  Рік тому +1

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

    • @peterhoran7873
      @peterhoran7873 Рік тому

      Ok got it. Thanks for clarifying!

  • @javithdesigns7626
    @javithdesigns7626 Рік тому +2

    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
      @marqusee  Рік тому +2

      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.

  • @yashhshrivastava01
    @yashhshrivastava01 4 місяці тому +1

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

    • @marqusee
      @marqusee  4 місяці тому

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

  • @Yodi-yodi
    @Yodi-yodi 10 місяців тому +1

    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
      @marqusee  10 місяців тому

      On desktop? If so yes

    • @Yodi-yodi
      @Yodi-yodi 10 місяців тому

      I mean on mobile like Adobe Aero!

    • @kanansharma3484
      @kanansharma3484 3 місяці тому

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

  • @thierryflorit3863
    @thierryflorit3863 11 місяців тому +1

    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
      @marqusee  11 місяців тому +1

      I would check out this video. 👉 ua-cam.com/video/GKsxsZhJ0Sc/v-deo.html
      We are constantly making updates to the product and how it works, so its changing quickly.

    • @thierryflorit3863
      @thierryflorit3863 11 місяців тому

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

  • @user-ui3yw2gh8q
    @user-ui3yw2gh8q 9 місяців тому +1

    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
      @marqusee  9 місяців тому

      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.
      ua-cam.com/video/GKsxsZhJ0Sc/v-deo.html
      or
      ua-cam.com/video/Ep3RmZCGHOI/v-deo.html

    • @user-ui3yw2gh8q
      @user-ui3yw2gh8q 9 місяців тому

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

    • @user-ui3yw2gh8q
      @user-ui3yw2gh8q 9 місяців тому

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

    • @user-ui3yw2gh8q
      @user-ui3yw2gh8q 9 місяців тому

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

  • @kanansharma3484
    @kanansharma3484 3 місяці тому +1

    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
      @marqusee  3 місяці тому

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

  • @arthurmougin
    @arthurmougin Рік тому +1

    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
      @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
      @julianpark225 Рік тому +1

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

  • @lucianarosa3201
    @lucianarosa3201 Місяць тому +1

    Figma prototypes are fully functional in Bezi?

    • @marqusee
      @marqusee  Місяць тому

      No. You can copy frames to Bezi.

  • @19857nono
    @19857nono Рік тому +1

    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
      @19857nono Рік тому +1

      Never mind! Found it XD

  • @takirojapan
    @takirojapan Рік тому +1

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

    • @marqusee
      @marqusee  Рік тому +2

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

    • @user-ij2rr7vm9u
      @user-ij2rr7vm9u Рік тому

      @@marqusee Pico 4 browser can open this link?

  • @karimvenom6459
    @karimvenom6459 Рік тому +1

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

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

  • @user-os1oq8ow9q
    @user-os1oq8ow9q Рік тому +1

    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
      @marqusee  Рік тому

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

    • @user-os1oq8ow9q
      @user-os1oq8ow9q Рік тому

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

  • @tiny_jain
    @tiny_jain Рік тому +1

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

  • @narenuxuiconsultant6243
    @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
      @marqusee  Рік тому

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

  • @shreyadeshmukh7984
    @shreyadeshmukh7984 9 місяців тому +1

    Any other alternative to Bezel?

    • @marqusee
      @marqusee  9 місяців тому

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

  • @pranavpatil2339
    @pranavpatil2339 Рік тому +1

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

    • @marqusee
      @marqusee  Рік тому

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

  • @user-vy4gt5dr7z
    @user-vy4gt5dr7z Рік тому

    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
      @marqusee  Рік тому

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

  • @lonhuo8715
    @lonhuo8715 11 місяців тому

    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
      @marqusee  11 місяців тому

      Let me see if this is a bug

  • @user-uo6lz7oc3r
    @user-uo6lz7oc3r Рік тому +1

    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
      @marqusee  Рік тому +1

      Hrmm seems like a bug

    • @marqusee
      @marqusee  Рік тому

      Does it not allow you to animate any layer opacity?

  • @currydu3964
    @currydu3964 Рік тому +1

    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
      @marqusee  Рік тому

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

    • @currydu3964
      @currydu3964 Рік тому

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

  • @mahanoor8168
    @mahanoor8168 11 місяців тому

    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
      @marqusee  11 місяців тому

      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.

  • @wrappedjunk217
    @wrappedjunk217 4 місяці тому

    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
      @marqusee  4 місяці тому

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

  • @Darkcoder414
    @Darkcoder414 10 місяців тому

    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
      @marqusee  10 місяців тому

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

    • @Darkcoder414
      @Darkcoder414 10 місяців тому

      @@marqusee no am switching individual object's opacity

    • @Darkcoder414
      @Darkcoder414 10 місяців тому

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

  • @mero0149
    @mero0149 5 місяців тому +1

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

    • @marqusee
      @marqusee  5 місяців тому

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

  • @supervised
    @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
      @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
      @marqusee  Рік тому

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

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

  • @katebiel
    @katebiel Рік тому +1

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

    • @marqusee
      @marqusee  Рік тому

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

  • @siddhimahale2497
    @siddhimahale2497 4 місяці тому

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

    • @marqusee
      @marqusee  4 місяці тому

      Bottom of the screen

    • @marqusee
      @marqusee  4 місяці тому

      Bottom of the page

  • @user-ui3yw2gh8q
    @user-ui3yw2gh8q 8 місяців тому

    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
      @marqusee  8 місяців тому +1

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

    • @user-ui3yw2gh8q
      @user-ui3yw2gh8q 8 місяців тому

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

  • @akinyemiolabode899
    @akinyemiolabode899 Рік тому +1

    Please how can i preview on mobile phone ?

    • @marqusee
      @marqusee  Рік тому

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

  • @lmnsf
    @lmnsf Рік тому

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

    • @marqusee
      @marqusee  Рік тому +1

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

    • @lmnsf
      @lmnsf Рік тому

      @@marqusee I fix it, thanks

  • @LihuiQiu
    @LihuiQiu 11 місяців тому

    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
      @LihuiQiu 11 місяців тому +1

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

    • @marqusee
      @marqusee  11 місяців тому

      Should be working :/

  • @schoukah
    @schoukah 11 місяців тому +1

    Why is this out of date ?

    • @marqusee
      @marqusee  11 місяців тому +1

      Bezel has completely changed their animation tools

  • @huycuongphan1063
    @huycuongphan1063 Рік тому +1

    don't know why but my Bezel lags so much

    • @marqusee
      @marqusee  Рік тому

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

  • @hiteshgandhi21
    @hiteshgandhi21 Рік тому +1

    Can we cast into the real world without the headset?

  • @araara1619
    @araara1619 Рік тому

    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

    • @marqusee
      @marqusee  Рік тому

      Sure what has you tripped up? I can jump on a call on my discord sometime and help you out!
      discord.gg/V5wPDEUs