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
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!
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!
Yooohh I am glad there a no-code tutor like you breaking the visuals and the steps down for us🎉🎉👏👏👏👏💯
Thank you Minh this is such a great tutorial you nailed it. It was very simple to understand from end-to-end 🙏
awesome video Minh! The future of web design looks awesome and youre help us stay ahead of the curve, thanks a lot!
Maaan. This is so awesome! Thanks for sharing. Definitely worth trying out!
Really awesome and creative design. Thanks for the tutorial, and introducing me to Dora
your tutorials are great, learned alot about 3d from you..
best design channel on KZread! :)
this is great man! thank you, just needed something like this!
Dude, this is just amazing, thank you brother!
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!
You're a true master of your craft, and your latest video is a testament to that.
Hey @Minh thankyou for this! This was very insightful!
Thanks for sharing, will go through it and try to implement it
HELLO FROM NEW ZEALAND...WOW, THATS VERY COOL BRO!!! KEEP UP THE GREAT VIDEOS!!!
Awesome video tutorial!
Dora seems awesome. Looks like for the static blog kind of pages, you truly don't need to write html anymore.
This goes so hard thank you!
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
10 ай бұрын
framer is garbage, they sell it as "ai revolutionary", but its just containing boring premade templates. Its just awful in every way.
@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.
Great! I gotta try this workflow...
Amazing tool man!
Great I really enjoyed it thanks!
i'm blown away 🤯
Nah, this is crazy. Thank you :)
This is such a promising tool! I can't wait for it to launch the Beta version!
Great work!
Nice tutorial, thanks a lot! Like. 👍🙏
The God in design!!!!
Awesome. You have new subscriber!
🎯 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.*
Amazing video!
i love it thanks mate
Belo trabalho, parabéns.
Nice. I want to learn this as web developer
Mindblowing!
Really nice mann!!
You're GOD of no-code design
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
Жыл бұрын
His lessons are really interesting !!
cool work bro!!
Wow this is great ❤
Đỉnh quá ông ơi
Beautiful website
The only problem is not being able to take source code and add it to an existing website.
@ximsFinance
Жыл бұрын
You cant?
@faisal_noor
Жыл бұрын
True..
@Way_Of_The_Light
Жыл бұрын
@@ximsFinance unfortunately no 🤦♂️
@motomono
Жыл бұрын
Yeah. With no export option this Dora is totally useless
@krishcshah
Жыл бұрын
View page source, copy, create , paste.
thanks bro... congrats
this is great!
Dora has sooo much potential but for client websites it needs to add alot of things
@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.
This awesome
Mind-blowing ❤️❤️ 😀
Awesome!
Great work! All it's missing is smooth scrolling for best 3D effect!
@karis7539
Жыл бұрын
dont use smooth scrolling since its bad in terms of ux
@miro-hristov
Жыл бұрын
@@karis7539 Can you elaborate? Choppy animation is already a pretty bad UX. What Pros/Cons do you have in mind?
@ladislavodstrcil6357
10 ай бұрын
same for me, i really want smooth scrolling
This looks insane!$!
thank you very much
Very nice
Amazing
Why im i not subscribed ....quality stuff
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
Жыл бұрын
hopefully he answers this because I'm wondering the same thing
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!
Tight !
amazing
かつこいい!!!
This is amazing!!!! Can I do this with the free version of figma?
Nice
1 năm nhưng mà vẫn đỉnh
Really interesting! Is there a plugin for Figma to Wordpress/Elementor page?
I'm so glad to be alive for this kind of shit...
Awesome
Great demonstration, I have applied for Dora beta a while back and looking for access to explore this..
Wow🤩
Please make some tutorials on Flutterflow 3D website building. :)
awesome
I like it, thanks.
Awzm 👌💯
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
Жыл бұрын
he shows him buying the wasp model in the video
Hey is there any tutorial on how to make the initial long landing page? can you give me a link?
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?
Super! Is this also possible to be Built in Framer?
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
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.
Developer's curse will not let you ...😭😂
Amazing, now how to make this website responsive?
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
8 ай бұрын
Thanks a lot
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?
Can this do api calls or any backend stuff ? Or can it only be used as a showcase platform ? And is it responsive?
Wow!!!🎉🎉🎉
wow awsome 😀😀😀 can you plz provide figma file and 3d modal?
học từ video a rất nhiều
Pretty cool to play with. Unfortunately not functional on mobile.
Amazing!
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?
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?
Is there a way to create a menu with links within the same landing page without having to create multiple pages?
keren
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
Hey when I move my figma into Dora, it completely changes the text and the orientation. Any idea how to fix it?
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
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
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
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!
hay w anh ơi