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

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/UIUXPlaybook
Figma Source File 👇
uxpeak.gumroad.com/l/gtsus
Learn UX/UI Design 👇
www.uxpeak.com/
3D Models👇
Fish: sketchfab.com/3d-models/emperor-angelfish-3dc2d360d98c485496899121792ebcce
Turtle: sketchfab.com/3d-models/sea-green-turtle-0530386d3fef4157b10dbbdb4688e758
Free Turtle Alternative: sketchfab.com/3d-models/model-72b-juvenile-green-sea-turtle-c90a930f8b2a4cc8bc516742a0df01d9
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 - www.linkedin.com/company/uxpeak/

Пікірлер: 102

  • @LenIk2598
    @LenIk25989 ай бұрын

    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

    9 ай бұрын

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

  • @salmantaseer9340
    @salmantaseer93409 ай бұрын

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

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Thank you friend :)

  • @thebestreveal
    @thebestreveal9 ай бұрын

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

  • @uxpeak

    @uxpeak

    9 ай бұрын

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

  • @aziel3096
    @aziel30969 ай бұрын

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

  • @mostafaazzouz591
    @mostafaazzouz5915 ай бұрын

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

  • @lunapro8003
    @lunapro80039 ай бұрын

    Amazing tutorial. Thank you so much ❤

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Glad you found it helpful!

  • @andrealiptakova9168
    @andrealiptakova91689 ай бұрын

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

  • @uxpeak

    @uxpeak

    9 ай бұрын

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

  • @bhushanpawar2506
    @bhushanpawar25068 ай бұрын

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

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Really appreciate your feedback!

  • @JohnDrach
    @JohnDrach9 ай бұрын

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

  • @uifry
    @uifry9 ай бұрын

    wow incredible.

  • @domdan45
    @domdan459 ай бұрын

    Great video 🎉

  • @dominikd9436
    @dominikd94369 ай бұрын

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

  • @dominikd6772
    @dominikd67729 ай бұрын

    Fantastic 🎉❤❤❤

  • @user-gq4ut7el9b
    @user-gq4ut7el9b4 ай бұрын

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

  • @DharaGuptaa
    @DharaGuptaa23 күн бұрын

    this was so straightforward!

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Glad to hear that you enjoyed it :)

  • @maurolima4274
    @maurolima42744 ай бұрын

    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!

  • @user-it4pr4jy6s
    @user-it4pr4jy6s7 ай бұрын

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

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Your support means a lot. Thank you!

  • @jurgenvantomme
    @jurgenvantomme9 ай бұрын

    Well made tutorial thank you

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Thanks for the kind words!

  • @somethingfishy4168
    @somethingfishy41684 ай бұрын

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

  • @praveenlk808
    @praveenlk8089 ай бұрын

    How can we deploy this as website?

  • @krisejan8782
    @krisejan87825 ай бұрын

    super tutorial!!! 🤩

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Your feedback is amazing. Thanks!

  • @quanten
    @quanten9 ай бұрын

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

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Appreciate it! Happy you enjoyed it!

  • @fokspoks
    @fokspoks9 ай бұрын

    awesome work, thanks

  • @uxpeak

    @uxpeak

    23 күн бұрын

    We’re thrilled you enjoyed it!

  • @miroslavak.3666
    @miroslavak.36669 ай бұрын

    Very helpful and interesting video.. great job 👍

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Thanks for watching and enjoying!

  • @3DVad
    @3DVad5 ай бұрын

    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?

  • @dorje1964
    @dorje19647 ай бұрын

    Yooo this is so cool!!!

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Thanks for the love! Keep up the great work!

  • @ebukafavour2591
    @ebukafavour25919 ай бұрын

    wonderful tutorial

  • @uxpeak

    @uxpeak

    23 күн бұрын

    So glad you liked it! 😊

  • @sofiamunir1553
    @sofiamunir15539 ай бұрын

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

  • @sinthujamartin5078
    @sinthujamartin50786 ай бұрын

    Awesome!

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Really appreciate your feedback!

  • @__Ayushi_korat
    @__Ayushi_korat2 ай бұрын

    thankyou so much💗

  • @uxpeak

    @uxpeak

    2 ай бұрын

    You are welcome :) Thank you for watching.

  • @permafrost93
    @permafrost939 ай бұрын

    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

    9 ай бұрын

    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

    9 ай бұрын

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

  • @asadfatima9823
    @asadfatima98238 ай бұрын

    Woahha thanks

  • @orlandogarduno1
    @orlandogarduno17 ай бұрын

    can i use my design into a html file?

  • @shravaniuagle_12
    @shravaniuagle_127 ай бұрын

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

  • @user-kq9gx2wm7x
    @user-kq9gx2wm7x5 ай бұрын

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

  • @batoulash3476
    @batoulash34765 ай бұрын

    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

    4 ай бұрын

    did u find how to do it?

  • @MACH_SDQ
    @MACH_SDQ9 ай бұрын

    Goooooood

  • @user-vk4jv6vx9h
    @user-vk4jv6vx9h6 ай бұрын

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

  • @terrellp133
    @terrellp1335 ай бұрын

    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.

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Awesome to hear! Thanks for watching!

  • @cloudgaming7125
    @cloudgaming71252 ай бұрын

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

  • @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?

  • @samilkarabork4138
    @samilkarabork4138Ай бұрын

    hostinger?

  • @shibinmathew9498
    @shibinmathew94989 ай бұрын

    Expectingmore videos

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Thanks for the kind words!

  • @joshuaokoh656
    @joshuaokoh6566 ай бұрын

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

  • @gouravbhatewara4430

    @gouravbhatewara4430

    5 ай бұрын

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

  • @ashfinamundambra5634
    @ashfinamundambra56347 ай бұрын

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

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Your support means a lot. Thank you!

  • @acupoftea12
    @acupoftea122 ай бұрын

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

  • @codedevelopment784
    @codedevelopment7847 ай бұрын

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

  • @rashikhandelwal3724
    @rashikhandelwal37244 ай бұрын

    Hi I am not be able to download this

  • @Ami7ami
    @Ami7ami9 ай бұрын

    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

    9 ай бұрын

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

  • @user-gw8nr7oz9r

    @user-gw8nr7oz9r

    8 ай бұрын

    same issue have you find any solution

  • @henoked1101

    @henoked1101

    8 ай бұрын

    @@user-gw8nr7oz9r nope

  • @mansisrivastav2975

    @mansisrivastav2975

    3 ай бұрын

    Same, did you solved it?

  • @JohnDrach
    @JohnDrach9 ай бұрын

    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

    9 ай бұрын

    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

    8 ай бұрын

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

  • @nischithaustin
    @nischithaustin4 ай бұрын

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

  • @user-gw8nr7oz9r
    @user-gw8nr7oz9r8 ай бұрын

    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

  • @gouravbhatewara4430

    @gouravbhatewara4430

    5 ай бұрын

    Copy paste small sections

  • @aditipaul4535
    @aditipaul45359 ай бұрын

    It's amazing

  • @uxpeak

    @uxpeak

    23 күн бұрын

    Thanks! Keep up the great work!

  • @user-gw8nr7oz9r
    @user-gw8nr7oz9r8 ай бұрын

    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 ай бұрын

    same!

  • @sakshimudgal8809

    @sakshimudgal8809

    5 ай бұрын

    same, nothing is coming

  • @KUPPI-ps5pv
    @KUPPI-ps5pvАй бұрын

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

  • @uxpeak

    @uxpeak

    Ай бұрын

    Glad that you enjoyed it :)

  • @Milanfashion91
    @Milanfashion915 ай бұрын

    Please 3D design make with elementor in words press.

  • @chadgtr34
    @chadgtr349 ай бұрын

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

  • @_AlexBrittoA

    @_AlexBrittoA

    8 ай бұрын

    Me😅

  • @gok2759

    @gok2759

    2 ай бұрын

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

  • @dexcruz-cu6zo

    @dexcruz-cu6zo

    Ай бұрын

    the turtle was the reason why I started using Dora.

  • @TheBlackmanIsGod
    @TheBlackmanIsGod8 ай бұрын

    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
    @rize84009 ай бұрын

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

  • @Asif05288
    @Asif05288Ай бұрын

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

  • @blinkzh
    @blinkzhАй бұрын

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

  • @k_fc_

    @k_fc_

    14 күн бұрын

    Not always

  • @laif9857
    @laif98578 ай бұрын

    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