From Figma to a 3D Web Page with Dora Plugin - No code Tutorial

Sign up for Dora: s.dora.run/mcdst8
Check out Dora's website: s.dora.run/34rrezj8
Check out the live demo: 7nqdg1dy.dora.run/ (desktop only)
----
Discord: / discord
KZread: @doratool
Twitter: / doratool
Instagram: / doraplatform
Tiktok: / dorahq
----
0:00 Intro
0:16 Copy from Figma with Dora Plugin
1:12 Paste to Dora Platform
2:27 Responsive setup with Constraints
6:23 Sticky top bar
7:23 Text fading
8:02 Import and animate 3D

Пікірлер: 260

  • @JeancarloBrocato
    @JeancarloBrocato11 ай бұрын

    Sick! Thanks for the video! I've really have been wanting to finally get my hands on Interactive web design and your tutorial video was very encouraging, I did not feel confused or intimidated by it!

  • @creatorsmafia
    @creatorsmafia Жыл бұрын

    I have been looking for a way to bring my Figma designs to life with 3D effects, and this tutorial is exactly what I needed!

  • @ChrisEj_The_Broly
    @ChrisEj_The_Broly Жыл бұрын

    Yooohh I am glad there a no-code tutor like you breaking the visuals and the steps down for us🎉🎉👏👏👏👏💯

  • @naceryous9227
    @naceryous9227 Жыл бұрын

    Thank you Minh this is such a great tutorial you nailed it. It was very simple to understand from end-to-end 🙏

  • @delmayo69
    @delmayo69 Жыл бұрын

    awesome video Minh! The future of web design looks awesome and youre help us stay ahead of the curve, thanks a lot!

  • @alexeytretina
    @alexeytretina Жыл бұрын

    Maaan. This is so awesome! Thanks for sharing. Definitely worth trying out!

  • @henrygreaves4962
    @henrygreaves496211 ай бұрын

    Really awesome and creative design. Thanks for the tutorial, and introducing me to Dora

  • @user-mg2wj1ln5g
    @user-mg2wj1ln5g Жыл бұрын

    your tutorials are great, learned alot about 3d from you..

  • @mcfly531
    @mcfly531 Жыл бұрын

    best design channel on KZread! :)

  • @deftermedia
    @deftermedia Жыл бұрын

    this is great man! thank you, just needed something like this!

  • @ilyesmokrani3307
    @ilyesmokrani33077 ай бұрын

    Dude, this is just amazing, thank you brother!

  • @yenespace406
    @yenespace406 Жыл бұрын

    I dont usually click like button if I didnt get any value, but man this is well crafted! I would give you multiple likes for this!

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

    You're a true master of your craft, and your latest video is a testament to that.

  • @RICB3AU
    @RICB3AU5 ай бұрын

    Hey @Minh thankyou for this! This was very insightful!

  • @ahumblerequest5222
    @ahumblerequest5222 Жыл бұрын

    Thanks for sharing, will go through it and try to implement it

  • @rsdesign-2024
    @rsdesign-2024 Жыл бұрын

    HELLO FROM NEW ZEALAND...WOW, THATS VERY COOL BRO!!! KEEP UP THE GREAT VIDEOS!!!

  • @lodavid89
    @lodavid89 Жыл бұрын

    Awesome video tutorial!

  • @matthijndijkstra25
    @matthijndijkstra2511 ай бұрын

    Dora seems awesome. Looks like for the static blog kind of pages, you truly don't need to write html anymore.

  • @thelatephilipj
    @thelatephilipj2 ай бұрын

    This goes so hard thank you!

  • @hellobont
    @hellobont Жыл бұрын

    Amazing my friend! I love that Dora has a timeline. I tried Framer recently but that's one thing it lacked and is really uncomfortable. Thanks for the tutorial!

  • @thevikingsock8527

    @thevikingsock8527

    10 ай бұрын

    framer is garbage, they sell it as "ai revolutionary", but its just containing boring premade templates. Its just awful in every way.

  • @TinyMaxfer

    @TinyMaxfer

    10 ай бұрын

    @@thevikingsock8527 yeah i realised this aswell, like you use the AI once and then have no use for it anymore when you start making the website more detailed. Maybe when they release something like adobe firefly in the sense of that you can select a certain area and prompt it to generate something the AI in framer isn't really useful at all.

  • @Meta-Gnome
    @Meta-Gnome Жыл бұрын

    Great! I gotta try this workflow...

  • @createvans
    @createvans Жыл бұрын

    Amazing tool man!

  • @winnersknowhow
    @winnersknowhow Жыл бұрын

    Great I really enjoyed it thanks!

  • @TheClrr
    @TheClrr Жыл бұрын

    i'm blown away 🤯

  • @nachorodrit
    @nachorodrit Жыл бұрын

    Nah, this is crazy. Thank you :)

  • @LinhLe-td6pk
    @LinhLe-td6pk Жыл бұрын

    This is such a promising tool! I can't wait for it to launch the Beta version!

  • @1Chitus
    @1Chitus9 ай бұрын

    Great work!

  • @Phirebase
    @Phirebase Жыл бұрын

    Nice tutorial, thanks a lot! Like. 👍🙏

  • @evgenia8326
    @evgenia8326 Жыл бұрын

    The God in design!!!!

  • @gnstester
    @gnstester Жыл бұрын

    Awesome. You have new subscriber!

  • @xenmods
    @xenmods6 ай бұрын

    🎯 Key Takeaways for quick navigation: 01:09 🚀 *Figma to Dora Platform: Use Dora plugin to seamlessly transfer Figma designs to Dora platform for no-code website creation.* 03:46 🎨 *Styling Elements: Adjust letter spacing, line height, and text alignment for responsive and visually appealing designs.* 05:18 🌐 *Text Width and Hierarchy: Optimize text width for better readability (50-75 characters) and maintain hierarchy using font weight and subtle color changes.* 06:01 🖼️ *Design Spacing: Utilize the relationship advice in UI design, considering the closeness of elements to determine their spacing and alignment.* 07:54 🎥 *Animation Techniques: Implement scrolling animations, fading effects, and 3D model rotations for a dynamic and engaging website design in Dora.*

  • @marcelmedia
    @marcelmedia7 ай бұрын

    Amazing video!

  • @ehnmusik
    @ehnmusik Жыл бұрын

    i love it thanks mate

  • @rogerio8710
    @rogerio8710 Жыл бұрын

    Belo trabalho, parabéns.

  • @Viralvlogvideos
    @Viralvlogvideos Жыл бұрын

    Nice. I want to learn this as web developer

  • @sebastienmartin8288
    @sebastienmartin828811 ай бұрын

    Mindblowing!

  • @sithusoe8797
    @sithusoe8797 Жыл бұрын

    Really nice mann!!

  • @omaryaa_
    @omaryaa_2 ай бұрын

    You're GOD of no-code design

  • @feltronnn
    @feltronnn Жыл бұрын

    Wow, this is awesome! I get inspired by watching your lessons. After such work sad return to default landings 😄( but this is a bit costly, buying models for 25$ 🤑)

  • @IdentifiantE.S

    @IdentifiantE.S

    Жыл бұрын

    His lessons are really interesting !!

  • @mr_fynd
    @mr_fynd8 ай бұрын

    cool work bro!!

  • @emmacares426
    @emmacares426 Жыл бұрын

    Wow this is great ❤

  • @vunam3288
    @vunam32889 ай бұрын

    Đỉnh quá ông ơi

  • @biniamteklay8694
    @biniamteklay86948 ай бұрын

    Beautiful website

  • @Way_Of_The_Light
    @Way_Of_The_Light Жыл бұрын

    The only problem is not being able to take source code and add it to an existing website.

  • @ximsFinance

    @ximsFinance

    Жыл бұрын

    You cant?

  • @faisal_noor

    @faisal_noor

    Жыл бұрын

    True..

  • @Way_Of_The_Light

    @Way_Of_The_Light

    Жыл бұрын

    @@ximsFinance unfortunately no 🤦‍♂️

  • @motomono

    @motomono

    Жыл бұрын

    Yeah. With no export option this Dora is totally useless

  • @krishcshah

    @krishcshah

    Жыл бұрын

    View page source, copy, create , paste.

  • @rickleao.pessoal
    @rickleao.pessoal6 ай бұрын

    thanks bro... congrats

  • @talhasaeed
    @talhasaeed Жыл бұрын

    this is great!

  • @DigitalDesigns1
    @DigitalDesigns1 Жыл бұрын

    Dora has sooo much potential but for client websites it needs to add alot of things

  • @cweb1988

    @cweb1988

    Жыл бұрын

    all these new no-code platforms all offer some incredible stuff....but they're all too young still.....if they keep developing quickly they'll definitely be hits in a year or two.

  • @victorv7364
    @victorv7364 Жыл бұрын

    This awesome

  • @saqlainraza9819
    @saqlainraza9819 Жыл бұрын

    Mind-blowing ❤️❤️ 😀

  • @naplesnola
    @naplesnola8 ай бұрын

    Awesome!

  • @miro-hristov
    @miro-hristov Жыл бұрын

    Great work! All it's missing is smooth scrolling for best 3D effect!

  • @karis7539

    @karis7539

    Жыл бұрын

    dont use smooth scrolling since its bad in terms of ux

  • @miro-hristov

    @miro-hristov

    Жыл бұрын

    @@karis7539 Can you elaborate? Choppy animation is already a pretty bad UX. What Pros/Cons do you have in mind?

  • @ladislavodstrcil6357

    @ladislavodstrcil6357

    10 ай бұрын

    same for me, i really want smooth scrolling

  • @thewebstylist
    @thewebstylist11 ай бұрын

    This looks insane!$!

  • @gpittonwav
    @gpittonwav10 ай бұрын

    thank you very much

  • @EimantasK
    @EimantasK4 ай бұрын

    Very nice

  • @MoreCreativeGFX
    @MoreCreativeGFX8 ай бұрын

    Amazing

  • @colbertntunyu8826
    @colbertntunyu8826 Жыл бұрын

    Why im i not subscribed ....quality stuff

  • @basbunder
    @basbunder Жыл бұрын

    Thank you for sharing this, I really like the program and concept. After checking it out further, I noticed it look more like a program with a mobile second approach. The live templates preview in Dora are distorted on mobile, where the text and spacing is off. Would you know if that is just bad design from Dora or if it's because it's difficult or simply not possible to make it mobile first?

  • @tecsuke

    @tecsuke

    Жыл бұрын

    hopefully he answers this because I'm wondering the same thing

  • @marekkazimierczak9210
    @marekkazimierczak92105 ай бұрын

    Isn't it a marvel how this youthful gentleman, barely out of his swaddling clothes, possesses such an astonishing reservoir of wisdom? It's as if he was born with a library card in one hand and a thesaurus in the other!

  • @elysiumcore
    @elysiumcore Жыл бұрын

    Tight !

  • @ytrpaz
    @ytrpaz8 ай бұрын

    amazing

  • @maria7813
    @maria7813 Жыл бұрын

    かつこいい!!!

  • @paulsalazar3389
    @paulsalazar33898 ай бұрын

    This is amazing!!!! Can I do this with the free version of figma?

  • @narutofromdbz
    @narutofromdbz4 ай бұрын

    Nice

  • @gameking4613
    @gameking461314 күн бұрын

    1 năm nhưng mà vẫn đỉnh

  • @andreabodino
    @andreabodino11 ай бұрын

    Really interesting! Is there a plugin for Figma to Wordpress/Elementor page?

  • @timfeasts
    @timfeasts Жыл бұрын

    I'm so glad to be alive for this kind of shit...

  • @rocklife1802
    @rocklife1802 Жыл бұрын

    Awesome

  • @sunilaryan
    @sunilaryan Жыл бұрын

    Great demonstration, I have applied for Dora beta a while back and looking for access to explore this..

  • @Teocis
    @Teocis2 ай бұрын

    Wow🤩

  • @JIRajin-xs8qx
    @JIRajin-xs8qx Жыл бұрын

    Please make some tutorials on Flutterflow 3D website building. :)

  • @oa7284
    @oa7284 Жыл бұрын

    awesome

  • @historycommander
    @historycommander Жыл бұрын

    I like it, thanks.

  • @ansaransu4761
    @ansaransu4761 Жыл бұрын

    Awzm 👌💯

  • @hassansyed6087
    @hassansyed6087 Жыл бұрын

    Hey Minh, Can you please do a step by step breakdown of how you did this website? This is an insane concept for a portfolio website. For Example -- how did you create the wasp? and how did you design the layout?

  • @dungeoner2356

    @dungeoner2356

    Жыл бұрын

    he shows him buying the wasp model in the video

  • @wgalloPT
    @wgalloPT Жыл бұрын

    Hey is there any tutorial on how to make the initial long landing page? can you give me a link?

  • @Aqquar
    @Aqquar Жыл бұрын

    I'm not too sure how some functionality work. When I try the "fill space" technique it doesn't change anything, I still have my frame sacale to 1440 p and not the size of the scree. Moreover it keeps replacing all my fonts by the default one thus messing with my design. Do you have any insight on that?

  • @yuliu8515
    @yuliu85155 ай бұрын

    Super! Is this also possible to be Built in Framer?

  • @yungface4572
    @yungface4572 Жыл бұрын

    looks cool but whenever i encounter a website thats set up this way its almost always nearly unusable and i cant help but exit out of it immediately

  • @DavidMulderOne
    @DavidMulderOne10 ай бұрын

    The thing that scares me away from Dora and that is worth highlighting is the loader on their *main* website. Loading speeds 'should' be near instantiations for non-applications, yet their loader takes like 10 seconds at least.

  • @yuvadarshanmurugan6013
    @yuvadarshanmurugan60135 ай бұрын

    Developer's curse will not let you ...😭😂

  • @SAL73VFX
    @SAL73VFX6 ай бұрын

    Amazing, now how to make this website responsive?

  • @Masters-of-Sound
    @Masters-of-Sound11 ай бұрын

    This is a great tool, but it's a total gimmick. If you are looking to make a website that can be seen by anyone in the modern age (i.e. - anyone using a cell phone) then this tool won't cut it. DORA mentions that it can do responsive sites, however, if you go check any of their examples on their website, then you'll see that none of them actually work properly on mobile. The layouts are all broken, and the sites are laggy, if they work at all. Cool tool, but don't waste your time if you are looking to build anything serious.

  • @JuniorOrfeu

    @JuniorOrfeu

    8 ай бұрын

    Thanks a lot

  • @SIDotaku
    @SIDotaku Жыл бұрын

    Does Dora run the site within it's own hosting? Because I'd imagine exporting all this to web files one can manipulate would be quite hefty?

  • @krishnanandanil4862
    @krishnanandanil4862 Жыл бұрын

    Can this do api calls or any backend stuff ? Or can it only be used as a showcase platform ? And is it responsive?

  • @bySterling
    @bySterling Жыл бұрын

    Wow!!!🎉🎉🎉

  • @DawoodDawood-px3xp
    @DawoodDawood-px3xp Жыл бұрын

    wow awsome 😀😀😀 can you plz provide figma file and 3d modal?

  • @jay.kaykay
    @jay.kaykay Жыл бұрын

    học từ video a rất nhiều

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

    Pretty cool to play with. Unfortunately not functional on mobile.

  • @PhotographyAdventure
    @PhotographyAdventure Жыл бұрын

    Amazing!

  • @shahkar7793
    @shahkar77939 ай бұрын

    I'm curious so this I only to design it, how would you actually make it functional? like make all the buttons and links work while keeping the design factors such as the wasp moving around?

  • @thinhnguyensb
    @thinhnguyensb8 ай бұрын

    Rất vui khi được biết kênh KZread của bạn. Bạn có cách hướng dẫn tương tự nào dành cho WordPress hay không?

  • @Danibul
    @Danibul Жыл бұрын

    Is there a way to create a menu with links within the same landing page without having to create multiple pages?

  • @muhammadwali
    @muhammadwali9 ай бұрын

    keren

  • @sunilpanda3492
    @sunilpanda34924 ай бұрын

    tentacles of the wasp model look weird probably because of the flipped normals. you probably know that too. but is there a feature in DORA that fixes that. thank you

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

    Hey when I move my figma into Dora, it completely changes the text and the orientation. Any idea how to fix it?

  • @hellotravelcan
    @hellotravelcan9 ай бұрын

    Once I've finished my project how can I export my website into hostinger or whatever hosting server to make it work as a proper website? Thank you

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

    Thanks for the video. I'm having an issue with copying to dora, the images doesn't copy with the rest. Please how can I fix it

  • @anupkaushik9370
    @anupkaushik9370 Жыл бұрын

    How to make this kind website in any cms like Wordpress , weblfow or wix ? Please make more tutorial for it . Make it interactive on mouse click

  • @arielspagnuolo2532
    @arielspagnuolo253210 ай бұрын

    How u can publish the website in all platforms? Not only Mac, I have issues with that. There is a plan or subscription that I can pay? Thank u!

  • @Lovefume
    @Lovefume10 ай бұрын

    hay w anh ơi