From Figma to a 3D Web Page with Dora Plugin - No code Tutorial
HTML-код
- Опубликовано: 12 июн 2024
- 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
RUclips: @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
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!
Thank you Minh this is such a great tutorial you nailed it. It was very simple to understand from end-to-end 🙏
Yooohh I am glad there a no-code tutor like you breaking the visuals and the steps down for us🎉🎉👏👏👏👏💯
awesome video Minh! The future of web design looks awesome and youre help us stay ahead of the curve, thanks a lot!
Really awesome and creative design. Thanks for the tutorial, and introducing me to Dora
your tutorials are great, learned alot about 3d from you..
Maaan. This is so awesome! Thanks for sharing. Definitely worth trying out!
🎯 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.*
this is great man! thank you, just needed something like this!
best design channel on RUclips! :)
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!
framer is garbage, they sell it as "ai revolutionary", but its just containing boring premade templates. Its just awful in every way.
@@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.
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!
Dora seems awesome. Looks like for the static blog kind of pages, you truly don't need to write html anymore.
The only problem is not being able to take source code and add it to an existing website.
You cant?
True..
@@ximsFinance unfortunately no 🤦♂️
Yeah. With no export option this Dora is totally useless
View page source, copy, create , paste.
Dude, this is just amazing, thank you brother!
Thanks for sharing, will go through it and try to implement it
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!
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?
hopefully he answers this because I'm wondering the same thing
HELLO FROM NEW ZEALAND...WOW, THATS VERY COOL BRO!!! KEEP UP THE GREAT VIDEOS!!!
Đỉnh quá anh uiiii!!! ❤❤❤ E cảm ơn anh rất nhiều ạ 😊😊😊
Awesome video tutorial!
This goes so hard thank you!
Amazing tool man!
Dora has sooo much potential but for client websites it needs to add alot of things
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.
Great I really enjoyed it thanks!
Great! I gotta try this workflow...
This is such a promising tool! I can't wait for it to launch the Beta version!
Nice tutorial, thanks a lot! Like. 👍🙏
Great work!
Nah, this is crazy. Thank you :)
i'm blown away 🤯
Hey when I move my figma into Dora, it completely changes the text and the orientation. Any idea how to fix it?
You're GOD of no-code design
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?
Belo trabalho, parabéns.
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$ 🤑)
His lessons are really interesting !!
Awesome. You have new subscriber!
The God in design!!!!
Really nice mann!!
Amazing video!
Great work! All it's missing is smooth scrolling for best 3D effect!
dont use smooth scrolling since its bad in terms of ux
@@karis7539 Can you elaborate? Choppy animation is already a pretty bad UX. What Pros/Cons do you have in mind?
same for me, i really want smooth scrolling
Really interesting! Is there a plugin for Figma to Wordpress/Elementor page?
Mindblowing!
Nice. I want to learn this as web developer
Hey is there any tutorial on how to make the initial long landing page? can you give me a link?
Wow this is great ❤
cool work bro!!
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.
Thanks a lot
i love it thanks mate
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!
this is great!
Mind-blowing ❤️❤️ 😀
Is there a way to create a menu with links within the same landing page without having to create multiple pages?
This looks insane!$!
Can this do api calls or any backend stuff ? Or can it only be used as a showcase platform ? And is it responsive?
Very nice
This awesome
thanks bro... congrats
Awesome!
Beautiful website
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?
Đỉnh quá ông ơi
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!
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
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?
thank you very much
I'm so glad to be alive for this kind of shit...
Why im i not subscribed ....quality stuff
By using this plug-in, at end can we upload in behance or dribble will it be the same when we upload it? Pls clr my doubt
Super! Is this also possible to be Built in Framer?
Why when I publish my work, in the website the animations don't work?
Amazing
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
This is amazing!!!! Can I do this with the free version of figma?
And it this only a prototype i mean i can put like website? or i need to code all the things? thanks :)
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
for downlaod the project?
Tight !
amazing
which system is that is macbook pro good for Figma and blender pls answer thank you
mine docent work like this I do the steps but my images just go through as blanks in dora ?
かつこいい！！！
bro is it possible that the animation of the 3D will only play when it is in a specific scroll down location?
From Dora is it possible to get the code, or does it make you host the website with them?
Hey kindly answer this question...
I was learning web development ok and then my plan is to goo deeper in this only like learning 3 d web and after that blockchain stuff but yesterday I saw wwdc and saw vision pro and I am confused what to do??
1. Should I switch? Or start focus on ar vr thing? Or should I focus on what I was doing...
2. Also tell like these days there are soo many tools through which a non coder or a normal person can create a website like legit cool and very functional website even with 3d designs sooo what you think is the future of web developers?? Is it still worth to learn or master this skill?
3. Kindly tell should I learn how to make websites that can be viewed or explore through VR headset...
???? If yes how???
try to look into building apps for AR/VR
@@kavindbalasundaram7742 ok thnx
You sound very young. Just focus on web dev and get a job if you don't have one already. 3d animations, blockchain, ar, vr, those are all different fields that require a degree and high level math
Hey, can't we use installed fonts ? My fonts get replaced when I import my figma file :(
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
what about a mobile version? Or any sort of functionality? How do I integrate php there?
Is it possible to convert image to html website ?
I'm trying to add a sidebar when u click on Hamburger Menu, how can I do this?
Can we export it to make it work for wp?
Nice
Please make some tutorials on Flutterflow 3D website building. :)
Awesome
Can this sort of animation while scrolling be done in Webflow?
Wow🤩
Great demonstration, I have applied for Dora beta a while back and looking for access to explore this..
I have problems with Dora bro, I copy all my layers with the plug-in, but when I want to paste them in dora it doesn´t work. I checked the size of the canvas and all it's okay, any ideas? Are you need the premium version to do this?