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

[@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!

[@JeancarloBrocato]

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!

[@naceryous9227]

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

[@ChrisEj_The_Broly]

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

[@DDesigner123]

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.

[@xenmods]

🎯 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.*

[@miro-hristov]

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]

same for me, i really want smooth scrolling

[@delmayo69]

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

[@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]

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

[@TinyMaxfer]

@@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.

[@matthijndijkstra25]

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

[@henrygreaves4962]

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

[@Way_Of_The_Light]

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.

[@yenespace]

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!

[@theroyalbengalroamers]

you took figma to an insane level

[@Akshaykanojiya-m2d]

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

[@uifry]

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

[@marekkazimierczak9210]

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!

[@mcfly531]

best design channel on KZbin! :)

[@RanjanaMajumdar-p8w]

This video changed my life ❤ Thank you kind soul !! 🙏

[@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]

His lessons are really interesting !!

[@omaryaa_]

You're GOD of no-code design

[@alexeytretina]

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

[@RICB3AU]

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

[@nelsonndukwe7274]

This is truly beautful, i would love to recreate this using reactjs. I would really love it if you can make public the figma files

[@ilyesmokrani3307]

Dude, this is just amazing, thank you brother!

[@deftermedia]

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

[@LinhLe-td6pk]

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

[@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]

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

[@ahumblerequest5222]

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

[@timfeasts]

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

[@HorusAcosta]

Bro, this is amazing. thank you

[@LiveYourBestLife-Ever]

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]

Thanks a lot

[@TheClrr]

i'm blown away 🤯

[@thelatephilipj]

This goes so hard thank you!

[@andreabodino]

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

[@Meta-Gnome]

Great! I gotta try this workflow...

[@nachorodrit]

Nah, this is crazy. Thank you :)

[@CLF-007]

Thank you! Great video!

[@lodavid89]

Awesome video tutorial!

[@gustaleza]

Awesome video, Minh! Thanks for sharing it! Do you know how to properly hand off a project like this?

[@colbertntunyu8826]

Why im i not subscribed ....quality stuff

[@yuvadarshanmurugan6013]

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

[@Viralvlogvideos]

Nice. I want to learn this as web developer

[@createvans]

Amazing tool man!

[@1Chitus]

Great work!

[@Supramonk]

great work here

[@evgenia8326]

The God in design!!!!

[@winnersknowhow]

Great I really enjoyed it thanks!

[@biniamteklay8694]

Beautiful website

[@paulsalazar3389]

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

[@AmericanDragon134]

Designers after watching this : Ohhh WOW so cool amazing !))))) , Web developers: Damn You 🗿

[@subarubrz331]

most developers do not even make static websites

[@xenicmark]

😂😂 nuh, no code platforms have existed for a while. Developers know the issues with them and wait patiently for when clients eventually outgrow them! This looks neat though.

[@arielspagnuolo2532]

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!

[@gnstester]

Awesome. You have new subscriber!

[@sebastienmartin8288]

Mindblowing!

[@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]

he shows him buying the wasp model in the video

[@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

[@marcelmedia]

Amazing video!

[@yuliu8515]

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

[@Phirebase]

Nice tutorial, thanks a lot! Like. 👍🙏

[@rickleao.pessoal]

thanks bro... congrats

[@shahkar7793]

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?

[@TheBlackmanIsGod]

First off I couldn’t even get it to look the same in fug a, second, not everything came over to the code, I’m missing elements……. Terrible

[@sunilpanda3492]

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]

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

[@ehnmusik]

i love it thanks mate

[@wgalloPT]

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

[@mr_fynd]

cool work bro!!

[@shreybgoel1568]

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

[@kavindbalasundaram7742]

try to look into building apps for AR/VR

[@shreybgoel1568]

@@kavindbalasundaram7742 ok thnx

[@u3k1m6]

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

[@joshuaokoh656]

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

[@DavidMulderOne]

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.

[@oViTaLZzHD]

FYI your WASP website example is broken in the description link

[@victorv7364]

This awesome

[@diegomarinangeli]

Why when I publish my work, in the website the animations don't work?

[@vunam3288]

Đỉnh quá ông ơi

[@sithusoe8797]

Really nice mann!!

[@SAL73VFX]

Amazing, now how to make this website responsive?

[@hellotravelcan]

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

[@JIRajin-xs8qx]

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

[@progfix]

Why is the wasp model not rendered correctly? Looks like the depth testing is broken.

[@thinhnguyensb]

Rất vui khi được biết kênh KZbin 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?

[@sunilaryan]

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

[@newdiviontheblockblocksfor4030]

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

[@emmacares426]

Wow this is great ❤

[@rogerio8710]

Belo trabalho, parabéns.

[@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

[@Oday_tone]

Can this technique be implemented with Spline and Webflow?

[@naveox]

Hey, can't we use installed fonts ? My fonts get replaced when I import my figma file :(

[@BiNDiViSUAL]

It's definitely cool and eye-catching, but I tried your live wasp demo site and it doesn't work on mobile.

[@krishnanandanil4862]

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

[@naplesnola]

Awesome!

[@jasonstephenson2234]

How do you actually add this to your domain and make it work. the design is cool but how do I use these 3d design on my website?

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

[@thewebstylist]

This looks insane!$!

[@MackLeye]

which system is that is macbook pro good for Figma and blender pls answer thank you

[@saqlainraza9819]

Mind-blowing ❤️❤️ 😀

[@stewtech]

Which hosting plan is best with Dora??

[@gpittonwav]

thank you very much

[@talhasaeed]

this is great!

[@tejaswinis3815]

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

[@alletograciel4855]

I want to follow along. Could you please share the figma file?