From Figma to a 3D Web Page with Dora Plugin - No code Tutorial
Вставка
- Опубліковано 6 лип 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
UA-cam: @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
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!
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!
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
Maaan. This is so awesome! Thanks for sharing. Definitely worth trying out!
your tutorials are great, learned alot about 3d from you..
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!
🎯 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.*
best design channel on UA-cam! :)
Dora seems awesome. Looks like for the static blog kind of pages, you truly don't need to write html anymore.
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.
this is great man! thank you, just needed something like 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!
HELLO FROM NEW ZEALAND...WOW, THATS VERY COOL BRO!!! KEEP UP THE GREAT VIDEOS!!!
Dude, this is just amazing, thank you brother!
Thanks for sharing, will go through it and try to implement it
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
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.
Awesome video tutorial!
This is such a promising tool! I can't wait for it to launch the Beta version!
This goes so hard thank you!
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.
Great I really enjoyed it thanks!
Nice tutorial, thanks a lot! Like. 👍🙏
Great! I gotta try this workflow...
Amazing tool man!
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 !!
Great work!
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.
Nah, this is crazy. Thank you :)
Hey is there any tutorial on how to make the initial long landing page? can you give me a link?
Really interesting! Is there a plugin for Figma to Wordpress/Elementor page?
i'm blown away 🤯
Nice. I want to learn this as web developer
Awesome. You have new subscriber!
Can this do api calls or any backend stuff ? Or can it only be used as a showcase platform ? And is it responsive?
The God in design!!!!
You're GOD of no-code design
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
Mindblowing!
Is there a way to create a menu with links within the same landing page without having to create multiple pages?
Really nice mann!!
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!
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?
Amazing video!
Wow this is great ❤
i love it thanks mate
cool work bro!!
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?
Super! Is this also possible to be Built in Framer?
This is amazing!!!! Can I do this with the free version of figma?
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
this is great!
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!
Đỉnh quá ông ơi
Mind-blowing ❤️❤️ 😀
I'm so glad to be alive for this kind of shit...
This awesome
thanks bro... congrats
This looks insane!$!
Awesome!
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
Beautiful website
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
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
And it this only a prototype i mean i can put like website? or i need to code all the things? thanks :)
Do you make landing pages for sell?
Great demonstration, I have applied for Dora beta a while back and looking for access to explore this..
thank you very much
Why im i not subscribed ....quality stuff
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
Can this sort of animation while scrolling be done in Webflow?
Please make some tutorials on Flutterflow 3D website building. :)
Very nice
Amazing
Can we export it to make it work for wp?
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
Chào anh, làm sao để ở giao diện PC thì hiện menu khác mà mobile thì hiện menu hamburger vậy anh?
From Dora is it possible to get the code, or does it make you host the website with them?
which system is that is macbook pro good for Figma and blender pls answer thank you
bro is it possible that the animation of the 3D will only play when it is in a specific scroll down location?
can we do this for wix websites?
Which hosting plan is best with Dora??
Tight !
1 năm nhưng mà vẫn đỉnh
Is it possible to convert image to html website ?
Why when I publish my work, in the website the animations don't work?
how did you make the 1st part? (before dora use)
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?
he shows him buying the wasp model in the video
what page did you find this flower and leaf on?
Where do you find the animated bee?
amazing
Hey when I move my figma into Dora, it completely changes the text and the orientation. Any idea how to fix it?
sorry for the silly question, Figma outputs HTML/CSS? or it is only a design tool?
Only a design tool but you can get some css code for a certain parts of the design but still won’t give you a full html and css code
what about a mobile version? Or any sort of functionality? How do I integrate php there?
Is it possible make that, and them, to send at the wordpress?