From Figma to a 3D Web Page with Dora Plugin

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

Рет қаралды 1,094,611

Күн бұрын

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
KZfaq: @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

Пікірлер: 258

@JeancarloBrocato 10 ай бұрын

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 11 ай бұрын

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 Жыл бұрын

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

@delmayo69 11 ай бұрын

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

@naceryous9227 Жыл бұрын

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

@henrygreaves4962 10 ай бұрын

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

@alexeytretina Жыл бұрын

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

@yenespace406 11 ай бұрын

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!

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

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

@mcfly531 Жыл бұрын

best design channel on KZfaq! :)

@matthijndijkstra25 11 ай бұрын

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

@deftermedia 11 ай бұрын

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

@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 10 ай бұрын

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

@TinyMaxfer 9 ай бұрын

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

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

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

@uifry 9 ай бұрын

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

@ilyesmokrani3307 6 ай бұрын

Dude, this is just amazing, thank you brother!

@RICB3AU 4 ай бұрын

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

@LuuVietHoang-uw8ll Жыл бұрын

Đỉnh quá anh uiiii!!! ❤❤❤ E cảm ơn anh rất nhiều ạ 😊😊😊

@ahumblerequest5222 Жыл бұрын

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

@lodavid89 Жыл бұрын

Awesome video tutorial!

@thelatephilipj Ай бұрын

This goes so hard thank you!

@winnersknowhow 11 ай бұрын

Great I really enjoyed it thanks!

@createvans Жыл бұрын

Amazing tool man!

@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 11 ай бұрын

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

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

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

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

@Phirebase Жыл бұрын

Nice tutorial, thanks a lot! Like. 👍🙏

@nachorodrit 11 ай бұрын

Nah, this is crazy. Thank you :)

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

Great! I gotta try this workflow...

@1Chitus 8 ай бұрын

Great work!

@gnstester Жыл бұрын

Awesome. You have new subscriber!

@TheClrr 11 ай бұрын

i'm blown away 🤯

@DigitalDesigns1 Жыл бұрын

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.

@rogerio8710 Жыл бұрын

Belo trabalho, parabéns.

@andreabodino 10 ай бұрын

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

@omaryaa_ Ай бұрын

You're GOD of no-code design

@miro-hristov 11 ай бұрын

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

@karis7539 11 ай бұрын

dont use smooth scrolling since its bad in terms of ux

@miro-hristov 11 ай бұрын

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

@ladislavodstrcil6357 9 ай бұрын

same for me, i really want smooth scrolling

@evgenia8326 Жыл бұрын

The God in design!!!!

@marcelmedia 6 ай бұрын

Amazing video!

@Viralvlogvideos Жыл бұрын

Nice. I want to learn this as web developer

@ehnmusik 11 ай бұрын

i love it thanks mate

@sithusoe8797 Жыл бұрын

Really nice mann!!

@mr_fynd 8 ай бұрын

cool work bro!!

@sebastienmartin8288 10 ай бұрын

Mindblowing!

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

@emmacares426 Жыл бұрын

Wow this is great ❤

@rickleao.pessoal 5 ай бұрын

thanks bro... congrats

@biniamteklay8694 7 ай бұрын

Beautiful website

@Aqquar 11 ай бұрын

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?

@colbertntunyu8826 Жыл бұрын

Why im i not subscribed ....quality stuff

@talhasaeed Жыл бұрын

this is great!

@wgalloPT Жыл бұрын

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

@saqlainraza9819 Жыл бұрын

Mind-blowing ❤️❤️ 😀

@vunam3288 8 ай бұрын

Đỉnh quá ông ơi

@marekkazimierczak9210 4 ай бұрын

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!

@xenmods 5 ай бұрын

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

@victorv7364 Жыл бұрын

This awesome

@EimantasK 3 ай бұрын

Very nice

@paulsalazar3389 7 ай бұрын

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

@naplesnola 7 ай бұрын

Awesome!

@gpittonwav 9 ай бұрын

thank you very much

@krishnanandanil4862 11 ай бұрын

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

@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 10 ай бұрын

This looks insane!$!

@timfeasts 11 ай бұрын

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

@yuliu8515 4 ай бұрын

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

@FelipeOliveira-bd2lx Жыл бұрын

Amazing

@arielspagnuolo2532 9 ай бұрын

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!

@shahkar7793 9 ай бұрын

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?

@Danibul Жыл бұрын

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

@sunilaryan Жыл бұрын

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

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

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

@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

@ytrpaz 7 ай бұрын

amazing

@hellotravelcan 8 ай бұрын

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

@elysiumcore Жыл бұрын

Tight !

@JakeHenry 10 күн бұрын

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

@Diego-yz3ku Ай бұрын

And it this only a prototype i mean i can put like website? or i need to code all the things? thanks :)

@rocklife1802 Жыл бұрын

Awesome

@hassansyed6087 11 ай бұрын

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 11 ай бұрын

he shows him buying the wasp model in the video

@sunilpanda3492 3 ай бұрын

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

@joshuaokoh656 5 ай бұрын

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

@oa7284 Жыл бұрын

awesome

@narutofromdbz 3 ай бұрын

Nice

@poisonbambee 24 күн бұрын

From Dora is it possible to get the code, or does it make you host the website with them?

@maria7813 11 ай бұрын

かつこいい！！！

@_kvsteja 10 ай бұрын

Can this sort of animation while scrolling be done in Webflow?

@motivatemind644 Жыл бұрын

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

@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 11 ай бұрын

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

@fabrez 11 ай бұрын

bro is it possible that the animation of the 3D will only play when it is in a specific scroll down location?

@andreyalencarquadros Жыл бұрын

Do you make landing pages for sell?

@yuvadarshanmurugan6013 5 ай бұрын

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

@ogunleyemark4069 6 ай бұрын

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

@Teocis Ай бұрын

Wow🤩

@thevikingsock8527 10 ай бұрын

what about a mobile version? Or any sort of functionality? How do I integrate php there?

@PhotographyAdventure Жыл бұрын

Amazing!

@pinkman420f4 10 ай бұрын

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?