Create a 3D Animated Website with Figma & Dora - No Code Required

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 มิ.ย. 2024
  • Ever wanted to create a 3D animated website but thought it was too complicated? In this tutorial, we'll show you how to use Figma and Dora to design a jaw-dropping 3D website-and the best part? No coding skills are needed.
    #3dwebsite #uixudesign #animation
    Grab our FREE UX/UI Design Playbook 👇
    uxpeak.gumroad.com/l/UIUXPlay...
    Figma Source File 👇
    uxpeak.gumroad.com/l/gtsus
    Learn UX/UI Design 👇
    www.uxpeak.com/
    3D Models👇
    Fish: sketchfab.com/3d-models/emper...
    Turtle: sketchfab.com/3d-models/sea-g...
    Free Turtle Alternative: sketchfab.com/3d-models/model...
    Timestamps:
    00:00 - Intro
    00:21 - Getting Design to Dora
    01:48 - Finding 3D Models
    02:24 - Manipulating 3D Models
    06:36 - Outro
    If you enjoy our content, feel free to subscribe and hit that bell notification. We promise to bring you a ton of free value!
    Join our design community
    Instagram - / uxpeak_
    Twitter - / uxpeak_
    Linkedin - / uxpeak

ความคิดเห็น • 83

  • @salmantaseer9340
    @salmantaseer9340 8 หลายเดือนก่อน +2

    The only video that's worth someone's time, thank you for all this🤩

  • @LenIk2598
    @LenIk2598 9 หลายเดือนก่อน +18

    Wow, this tutorial is a game-changer! I've always wanted to dive into 3D web design but was intimidated by the coding part.

    • @uxpeak
      @uxpeak  8 หลายเดือนก่อน +1

      Breaking down those barriers in web design, especially the intimidating coding part, is exactly why we made this video. Thanks for the awesome feedback! 😊👍

  • @bhushanpawar2506
    @bhushanpawar2506 7 หลายเดือนก่อน +2

    Mind blowing content🤯.....waiting for more such tutorials👌👌👌👌

  • @thebestreveal
    @thebestreveal 9 หลายเดือนก่อน +12

    I can't believe how simple you made this look! Subscribed and can't wait to see what you teach next! 🌟

    • @uxpeak
      @uxpeak  8 หลายเดือนก่อน

      Thrilled to hear you found the tutorial easy to follow! Thanks for the support! 🙌🌟

  • @lunapro8003
    @lunapro8003 9 หลายเดือนก่อน +2

    Amazing tutorial. Thank you so much ❤

  • @user-it4pr4jy6s
    @user-it4pr4jy6s 6 หลายเดือนก่อน +2

    Wow, This is Amazing....You earned a subscriber🙌

  • @quanten
    @quanten 9 หลายเดือนก่อน +5

    Hello, I’m the first. Loved your ui/ux video you posted before..

  • @krisejan8782
    @krisejan8782 4 หลายเดือนก่อน +1

    super tutorial!!!
    🤩

  • @jurgenvantomme
    @jurgenvantomme 8 หลายเดือนก่อน +1

    Well made tutorial thank you

  • @dorje1964
    @dorje1964 6 หลายเดือนก่อน +1

    Yooo this is so cool!!!

  • @fokspoks
    @fokspoks 8 หลายเดือนก่อน +1

    awesome work, thanks

  • @ebukafavour2591
    @ebukafavour2591 8 หลายเดือนก่อน +1

    wonderful tutorial

  • @andrealiptakova9168
    @andrealiptakova9168 9 หลายเดือนก่อน +1

    I have to try this. Thank you for posting. As always love your video ❤

    • @uxpeak
      @uxpeak  8 หลายเดือนก่อน

      We're so glad to hear you're excited to give this a try!

  • @mostafaazzouz591
    @mostafaazzouz591 4 หลายเดือนก่อน +2

    هذ البرنامج رائع وتحدي كبير امام فيجما لتمتلك تلك الميزه الرهيبه التي تجعل التصميم اكثر احترافيه ❤

  • @miroslavak.3666
    @miroslavak.3666 9 หลายเดือนก่อน +1

    Very helpful and interesting video.. great job 👍

  • @dominikd9436
    @dominikd9436 9 หลายเดือนก่อน +1

    Wow, I am third. Love this video uxpeak. I am student in your course and love it.

  • @domdan45
    @domdan45 9 หลายเดือนก่อน +1

    Great video 🎉

  • @sinthujamartin5078
    @sinthujamartin5078 5 หลายเดือนก่อน +1

    Awesome!

  • @uifry
    @uifry 8 หลายเดือนก่อน +1

    wow incredible.

  • @dominikd6772
    @dominikd6772 9 หลายเดือนก่อน +1

    Fantastic 🎉❤❤❤

  • @aziel3096
    @aziel3096 8 หลายเดือนก่อน +2

    Do you have a tutorial dedicated to just Responsiveness? Please make one or share a link.

  • @ashfinamundambra5634
    @ashfinamundambra5634 6 หลายเดือนก่อน

    waiting for more videos thank you........

  • @shibinmathew9498
    @shibinmathew9498 8 หลายเดือนก่อน

    Expectingmore videos

  • @aditipaul4535
    @aditipaul4535 8 หลายเดือนก่อน

    It's amazing

  • @JohnDrach
    @JohnDrach 8 หลายเดือนก่อน

    Can you not adjust to a custom width? I'm looking to use this for a presentation on a 16:9 TV. Not possible?

  • @__Ayushi_korat
    @__Ayushi_korat หลายเดือนก่อน +1

    thankyou so much💗

    • @uxpeak
      @uxpeak  หลายเดือนก่อน

      You are welcome :) Thank you for watching.

  • @asadfatima9823
    @asadfatima9823 7 หลายเดือนก่อน

    Woahha thanks

  • @MACH_SDQ
    @MACH_SDQ 8 หลายเดือนก่อน

    Goooooood

  • @maurolima4274
    @maurolima4274 3 หลายเดือนก่อน

    After analyzing DORA very carefully, I can't find how to apply targeting LINKS to: images, texts and icons, how to do this? Or, is there a video tutorial teaching it? Thank you very much!

  • @terrellp133
    @terrellp133 4 หลายเดือนก่อน

    This is Unreal, it's so amazing how far we've come technology wise. I'm so thankful I've stumbled upon this tutorial. I've wanted to get into web development but didn't know where to start, perfect example of how I can create work for my portfolio.

  • @user-gq4ut7el9b
    @user-gq4ut7el9b 3 หลายเดือนก่อน

    hey, how do i look for moving models like those . when i search all i get it stationary 3d models

  • @somethingfishy4168
    @somethingfishy4168 3 หลายเดือนก่อน

    Hi, is there any way to make this webpage compatible to both phone and Desktop at the same time?

  • @permafrost93
    @permafrost93 8 หลายเดือนก่อน

    Thanks a bunch for making this video. I wonder would the turtle go back if you scroll the page backwards (from bottom to top)?

    • @uxpeak
      @uxpeak  8 หลายเดือนก่อน

      Great question and thanks for watching our tutorial! Absolutely, if you scroll the page backwards, the turtle will indeed go back to its starting position.

    • @permafrost93
      @permafrost93 8 หลายเดือนก่อน

      tyvm for answering back. I've got to try this at work. @@uxpeak :)

  • @3DVad
    @3DVad 4 หลายเดือนก่อน

    Thank you very much. I am from Ukraine, I write through a translator. Please tell me, but such a site with animation in DORA, will I be able to transfer it to tilda, for example? Or does it only work in DORA?

  • @sofiamunir1553
    @sofiamunir1553 8 หลายเดือนก่อน

    Ur ui ux play book are not downloading..... what is the reason?

  • @shravaniuagle_12
    @shravaniuagle_12 6 หลายเดือนก่อน

    What if I want to design a gym website and I don't have money to buy premium sketchfab animated 3d models... Then I can use free models without animation... And then by importing in Dora as you animated that turtle like that can we animate 3d model moving from one page to another?????

  • @praveenlk808
    @praveenlk808 8 หลายเดือนก่อน +1

    How can we deploy this as website?

  • @batoulash3476
    @batoulash3476 4 หลายเดือนก่อน +1

    hello , thanks for this information. I started trying the website, and imported a 3d model but the 3d animation toggel is not showing and only el position of the model is working in the animation other adjustments are not. how can i fix this issue.

    • @dranelb7690
      @dranelb7690 3 หลายเดือนก่อน

      did u find how to do it?

  • @user-kq9gx2wm7x
    @user-kq9gx2wm7x 4 หลายเดือนก่อน

    hello sir i will need ur help my dora dont copy either images o=nor color when i copy from figma

  • @Diego-yz3ku
    @Diego-yz3ku หลายเดือนก่อน

    Excuse me, but if i want to put the website on internet, i need to code it or how can i do it? i mean is this only a prototype?

  • @orlandogarduno1
    @orlandogarduno1 6 หลายเดือนก่อน

    can i use my design into a html file?

  • @user-vk4jv6vx9h
    @user-vk4jv6vx9h 5 หลายเดือนก่อน

    sir if i import this to wordpress will it move same sir

  • @joshuaokoh656
    @joshuaokoh656 5 หลายเดือนก่อน +2

    Great tutorial. I copied my design from figma but the images didn't copy with it. Please how can I fix that

    • @gouravbhatewara4430
      @gouravbhatewara4430 4 หลายเดือนก่อน

      Copy the parts of the design select a section copy and paste it

  • @cloudgaming7125
    @cloudgaming7125 หลายเดือนก่อน

    Can we upload this on behance, if yes!! how?

  • @acupoftea12
    @acupoftea12 หลายเดือนก่อน

    How this design gone add in website I didn't understand

  • @samilkarabork4138
    @samilkarabork4138 23 วันที่ผ่านมา

    hostinger?

  • @codedevelopment784
    @codedevelopment784 6 หลายเดือนก่อน +1

    Pass to developer, note developer as he reactsc 😂😂😂😂😂

  • @KUPPI-ps5pv
    @KUPPI-ps5pv 29 วันที่ผ่านมา +1

    Amazing tutorial... please provide any free courses 🙏🙏🙏

    • @uxpeak
      @uxpeak  27 วันที่ผ่านมา

      Glad that you enjoyed it :)

  • @nischithaustin
    @nischithaustin 3 หลายเดือนก่อน

    Why my turtle is jittering I mean when I play it is not smoother like you. Why??

  • @user-gw8nr7oz9r
    @user-gw8nr7oz9r 7 หลายเดือนก่อน +1

    i import your designin dora but all pics n blue background is vanished just text left in dora why?? even what i created in figma n tried to importin dora nothin gonna happen in dora? solve my issue

  • @rashikhandelwal3724
    @rashikhandelwal3724 3 หลายเดือนก่อน

    Hi I am not be able to download this

  • @JohnDrach
    @JohnDrach 8 หลายเดือนก่อน

    How do you know if the contetn you're pasting is in the process of pasting. There's no indicator that tells you its in progress? Or is it not working? I'm copying from Figma, Pasting in a new tab in Dora and nothing...

    • @JohnDrach
      @JohnDrach 8 หลายเดือนก่อน

      There's a plugin in Figma that will copy the layers from Figma to Dora if anybody runs into this problem... Is that the only way to copy paste?

    • @user-gw8nr7oz9r
      @user-gw8nr7oz9r 7 หลายเดือนก่อน +1

      im facing the same issue wheni try to import from fogma to dora all vanished just text , have ou found any solution ???

  • @Ami7ami
    @Ami7ami 8 หลายเดือนก่อน +2

    I have a problem when im pasting in dora, like on 1:20 I have grey pictures without content in it. Same situation after 1 hour waiting...( By the way I have window that all layers imported so ..

    • @henoked1101
      @henoked1101 8 หลายเดือนก่อน +1

      Mine is also grey, did you find any way to fix it

    • @user-gw8nr7oz9r
      @user-gw8nr7oz9r 7 หลายเดือนก่อน

      same issue have you find any solution

    • @henoked1101
      @henoked1101 7 หลายเดือนก่อน

      @@user-gw8nr7oz9r nope

    • @mansisrivastav2975
      @mansisrivastav2975 2 หลายเดือนก่อน

      Same, did you solved it?

  • @chadgtr34
    @chadgtr34 8 หลายเดือนก่อน +22

    how many people actually need a sea turtle web site design ?

    • @_AlexBrittoA
      @_AlexBrittoA 7 หลายเดือนก่อน

      Me😅

    • @gok2759
      @gok2759 หลายเดือนก่อน

      it's up to your imagination g, he didn't mentioned that u should use a turtle lol

    • @dexcruz-cu6zo
      @dexcruz-cu6zo 24 วันที่ผ่านมา

      the turtle was the reason why I started using Dora.

  • @user-gw8nr7oz9r
    @user-gw8nr7oz9r 7 หลายเดือนก่อน +3

    how you import from figma properly when i tried all the image vanished which displayed in figma and just grey type image left in dora? will you guide us what we gonna do for this?

    • @ALXS.H
      @ALXS.H 5 หลายเดือนก่อน +1

      same!

    • @sakshimudgal8809
      @sakshimudgal8809 4 หลายเดือนก่อน

      same, nothing is coming

  • @Milanfashion91
    @Milanfashion91 4 หลายเดือนก่อน

    Please 3D design make with elementor in words press.

  • @TheBlackmanIsGod
    @TheBlackmanIsGod 7 หลายเดือนก่อน +3

    ok first off I wasnt able to transfer the highlights if the blue background into Dora, so my background is a more flat blue, second problem is when I added the turtle 3d model, and tried to select it in the timeline to move it up and down the page, I couldnt select the turtle and get the turtle to slide up and down the page, or it grabed the entire background and the text and starfish were sliding with the turtle..
    I disagree with all the fake accounts leaving positive comments this is a terrible video, becuase you cant follow it exactly unless you purchase a $24 3d model, otherwise your left trying to figure out what Alzimuthal, and what Elavation to use to get it right and smooth.....
    Terrible video.....even worse instruction,,,,,

  • @rize8400
    @rize8400 8 หลายเดือนก่อน

    Эй дора, готова? В моих глазах доллар!

  • @Asif05288
    @Asif05288 17 วันที่ผ่านมา

    Sir I have no money for buy this book plzz give me free 😢😢

  • @blinkzh
    @blinkzh 27 วันที่ผ่านมา +1

    These animations are just useless. At the end you want a fast loading site...

  • @laif9857
    @laif9857 8 หลายเดือนก่อน

    you people are so funn y with the time that you need to wait , try to render something in cinema 4d or make an AI trainning in khoya XD