Wow! I almost gave up any website design and you just bring it back to me. Though I am a slow learner, I may grow my enthusiasm as watching your instruction! Many thanks..
This is another great tutorial but I am always impressed with all the tutorials you provide. I am currently a student in graphic design and we had some course work with Webflow. This tutorial goes above the basic ones we reviewed in our class. I would be interested to see an after effects example with Webflow integration as well as other Webflow tutorials. Once you grasp the basics with Webflow, it does offer some amazing results.
it's a nice tutorial, BUT just no need for the click bait title, because you didn't turn an XD prototype into live website, you just used webflow that's it.
I’m 16:20 minutes in and I’m loving the way you plain out the key words and necessary things out, thank you so much ❤️❤️😭😭😭❤️❤️❤️❤️ straight and exactly what you want
I assumed it was a video demonstrating the design in XD and then transferring it to Webflow to generate a live website of the prototype created on XD. Anyways nice tutorial.
Thanks for your comment. I tried to squeeze in as much as I could in this video without being too long and boring. I also tried to focus on the more complex part which is turning the prototype into a working site in Webflow. I'm planning to do more tutorials specifically on Xd in the future where I will go more in depth on that part of the workflow.
Check out Quest AI - it exports your XD design into a live website automatically. Here's a short video: ua-cam.com/video/Mb1IXVoiFsU/v-deo.html Here's the XD plugin: quest.ai/xd
@@YesImaDesigner You did not even address his concern. He said that you did not do what your video title claimed to do. What do you have to say about that ?
Vinayak Mukherjee I don't think I have to defend myself or the contents of the video. In my answer I stated that I covered as much as I could in this free video. I used Adobe Xd to put the design together - as stated in the tile - but I only showed some interesting techniques of that part of the workflow as showing the whole process would have resulted in a much longer video. My aim was to focus on the Webflow part of the process as the initial Xd part is fairly straightforward and simple and there are loads of tutorials teaching the basics of using Xd and building sites with it.
@@YesImaDesigner Yes but your title makes it look like you have a way of directly turning XD prototypes into live websites through Webflow. Which is just not the case. The title " Adobe XD to Webflow " means nothing, if you just design it in XD and then again in Webflow.
MAN!!! YOU DON'T GONNA BELIEVE ME! I was looking for this for a while... THANKS FOR THIS VIDEO! I'll watch now... Please, do more like this, could you? I want to be a Web Designer, and i need to learn more about Adobe Xd and Webflow... But it's hard to find people doing both things... Thanks a lot.
You just made my week man!!! Love this! I have been very curious about webflow for awhile now and I love that it interacts so well with Adobe products. More please!!🔥🔥🔥 So much freedom with design capabilities and the sites load extremely quickly. This is my new favorite workflow!
Hello Martin ! Thanks for this video ! I am just learning webdesign & Adobe Xd alone during the quarantine and i just discover webflow thanks to you ! I would love to see an Ae to webflow tutorial !! :) 🇫🇷🙏
Thank you soooo much, I was actually looking for something like this. Actually, I can't download any plugins fo XD, always show "Something went wrong" and I was actually able to download some assets from their home screen. Now that your tutorial helped me out very much. once again, thanks very much.
Thank you for this effort Honestly, you have to change the title of your tutorial from " ...Adobe XD to Webflow ..." To " ....Adobe XD vs. Webflow..." because there is no connection between the two tools.
this tool would not replace the work of FE, but it could be helpful for the UI/UX role to build a prototype with actual animation contents other than lottie. for the responsive contents or animation contents setting needs to be configured with more detail to fit into the whole page, there were a lot need to be customized.
tobby chen thanks for your input. This was just a brief look into an actual workflow and of course it would need a lot of refinement for it to work properly on all screen sizes.
It will be helpful to know more when to use: the div, container, sections. in which case to use one instead of the others...etc. What do you say, Martin? Thanks for the video. I enjoy it very much!
Amazing Video!. I do have one question tho. What about when you click a link to access multiple pages? how do you make other webpages for your website?
Interesting. A few days ago I purchased a Mac application called Blocs 3 ($99 one time payment) which is almost identically to this SaaS you're introducing here. I am wondering who copied whom. Change the title of your video. *but video is nicely done!
II also thought that there would be sine kind of transfer from XD to Webflow. I was a little disappointed that you just created the same website twice. That said, thia is a good Webflow tutorial.
So basically, you could simply use WebFlow to design your layout - there is no need to even use Adobe XD? I thought it was a matter of exporting out of XD and Importing layout and content into WebFlow.
Me too! Thats what the video title implies. Clever click bait I guess.... It looks like you prototype/design in XD and then recreate in WebFlow once you have a design that you are happy with or is client approved.
I use duda and all I need is a designer to create animations and custom sections. I'm having trouble wrapping my head around making this work as easy as it sounds. I just need the designer to use xb-figma-sketch whatever even webflow just to create the pretty stuff and layout. duda lets me/the team do the rest like plug n play. by itself its limited to templates and the design builder it has similar to webflow but it stops there. you still need someone to create the designs, elements and animations.
Hi thanks for the great tutorial..i have some questions. How do you export your adobe xd layout, is it done by batch exported each individual item? How do you export for all sizes?
You could have titled this video “Using webflow to design a Prototype and website”. This would cut the need to use XD as WebFlow is fundamentally a Prototyping and HTML app in one. It’s reductive to suggest XD as part of the prototyping component.
XD/Sketech/Figma are MUCH quicker to design first before starting the development in Webflow. Especially if clients want to make changes. Doing the design stage in Webflow is extremely time consuming.
@@obsidianstang6296 no you're not doing the work twice. You're designing it in a design orogram and then developing it in a development program. By using a design program to design, you are drastically speeding up concepting and revision rounds with clients. Then once it's approved, you develop. It will take much honger to make revisions in webflow because it isn't an open canvas. Also, idk where you're getting your quotes from. Whoever is only charging $30-$80 to turn a design to code is not only destroying our industry, they are also likely not giving quality work.
@@obsidianstang6296 ya...I disagree with you on almost all levels, but to each their own. I would never use Webflow as a starting point. It makes zero sense.
@@obsidianstang6296 a design round is still crucial. Going from wireframe to webflow or straight to dev is lazy. It limits your ability for testing and prototyping. You don't seem to care about design, and that's fine. But design is just as important as any other state of the process.
Hi am I confused after creating a website with adobe xd how do I transfer that to a domain and make the website live? Is there plug in or somewhere I upload the file to shopify/word press to? Thanks so much!
Thx bro Hope u do tut about complex json to webflow including transition in elements ,it seems to be easy to do it as a morphing move but any other effects i add to shapes make json file not appear in browsers ,hope u have an idea how to fix it, nice tut as always ❤
This may be a stupid question, but: There is no way to just "convert" from Figma or XD to webflow? Seems like i would have to redo most the whole design in webflow
Hi Martin, why not just do it all on webflow , instead of using Xd? I just skimmed through your video, if it is explained in there, please direct me to the time stamp.
TNice tutorials is literally the hardest tNice tutorialng my brain can't comprehend. AnytNice tutorialng else I do takes a few minutes and tNice tutorials is just.. it's just so confusing
Shooot .. .just looked through your videos. I would have loved to have seen the After Effects -> Webflow video, couldn't find it. Think you could still create one?
is it possible to make each one of the images that float in under the slider ,into dynamic pop up windows? I'm trying to create a graphic design portfolio like this. Thank you!!
Can someone please explain to me why we need adobe xd or figma instead of just creating this layout on adobe illustrator or in affinity designer? Whats the purpose of XD? To just create your webpage layout and idea, right? Then you essentially still have to manually upload your images etc to the webflow. Am I missing something here? What makes XD so special? Lol
Hello Thank you very much for this helfull video. I have a question: if you redo all the work that you did on Adobe XD then whats the purpse of creating it on XD, i mean why not directly on Webflow?
You CAN build on Webflow as you go -- particularly if it's a pretty simple design -- but XD allows you to easily move things around, test layouts, change colours and fonts etc until you're happy with the design -- you then just copy the design onto Webflow. Additionally, clients might want to see a mock-up of the design and make changes before you start to build it. It's far easier to do mock-ups and make changes in XD.
@@idrischemali5991 Yes. You design it first in XD then use Webflow to create the code in the background. Remember, that XD has the *additional* advantage of being able to create a quick prototype to show your clients how it will look and work when finished. Prior XD (and similar tools), most designers used to design in Photoshop and then send their designs to a Web developer to copy. You could only design in Photoshop; there was no way to build a prototype with workable links and dynamic effects. In XD you can do all that. In the long run, a bit of time spent planning and getting everything correct BEFORE you start to code will save you lots of time. Good luck.
Hi, this was really helpful, tho I have a question. I use webflow often, here is my question. In a case where you want to tweak the entire view in CSS, it's written as max-width 1140px. So I want to increase or decrease it in webflow. Is it possible if so how do I do that
So can someone clarify this for me please. Are you able to create an entire website in Adobe XD and then use webflow to make it live without doing any actual code yourself? Or what am I missing?
Todd Gun great question. I don't think you can. For apps I would build the complete prototype with interactions in Xd and send the assets to a developer. It would be great to have a tool like Webflow for creating apps and there might be one out there. If anyone has a suggestion please let us know! 🙌
Wow! I almost gave up any website design and you just bring it back to me. Though I am a slow learner, I may grow my enthusiasm as watching your instruction! Many thanks..
I didn't know this video is gonna give a spark in my ass to be a front-end developer. Huge love for your sharing.
This is another great tutorial but I am always impressed with all the tutorials you provide. I am currently a student in graphic design and we had some course work with Webflow. This tutorial goes above the basic ones we reviewed in our class. I would be interested to see an after effects example with Webflow integration as well as other Webflow tutorials. Once you grasp the basics with Webflow, it does offer some amazing results.
it's a nice tutorial, BUT just no need for the click bait title, because you didn't turn an XD prototype into live website, you just used webflow that's it.
I was also waiting for the xd to webflow
Yes, there was nothing interesting in it. Why design something in XD when you can do it already in webflow?
@@tiborsallai4449 that wasn’t the argument, it was about using clickbait title
did you find a good tutorial where it shows that wich he didn't?
Exactly wtf
I’m 16:20 minutes in and I’m loving the way you plain out the key words and necessary things out, thank you so much ❤️❤️😭😭😭❤️❤️❤️❤️ straight and exactly what you want
I assumed it was a video demonstrating the design in XD and then transferring it to Webflow to generate a live website of the prototype created on XD. Anyways nice tutorial.
Thanks for your comment. I tried to squeeze in as much as I could in this video without being too long and boring. I also tried to focus on the more complex part which is turning the prototype into a working site in Webflow. I'm planning to do more tutorials specifically on Xd in the future where I will go more in depth on that part of the workflow.
Check out Quest AI - it exports your XD design into a live website automatically. Here's a short video: ua-cam.com/video/Mb1IXVoiFsU/v-deo.html
Here's the XD plugin: quest.ai/xd
@@YesImaDesigner You did not even address his concern. He said that you did not do what your video title claimed to do. What do you have to say about that ?
Vinayak Mukherjee I don't think I have to defend myself or the contents of the video. In my answer I stated that I covered as much as I could in this free video. I used Adobe Xd to put the design together - as stated in the tile - but I only showed some interesting techniques of that part of the workflow as showing the whole process would have resulted in a much longer video. My aim was to focus on the Webflow part of the process as the initial Xd part is fairly straightforward and simple and there are loads of tutorials teaching the basics of using Xd and building sites with it.
@@YesImaDesigner Yes but your title makes it look like you have a way of directly turning XD prototypes into live websites through Webflow. Which is just not the case. The title " Adobe XD to Webflow " means nothing, if you just design it in XD and then again in Webflow.
MAN!!! YOU DON'T GONNA BELIEVE ME! I was looking for this for a while... THANKS FOR THIS VIDEO! I'll watch now... Please, do more like this, could you? I want to be a Web Designer, and i need to learn more about Adobe Xd and Webflow... But it's hard to find people doing both things... Thanks a lot.
Many people us Webflow and Design too
I've heard a lot of great things about webflow thinking about using it for few clients in the future thanks for this video great tips!
yes love to see an after effects to webflow example!
You just made my week man!!! Love this! I have been very curious about webflow for awhile now and I love that it interacts so well with Adobe products. More please!!🔥🔥🔥 So much freedom with design capabilities and the sites load extremely quickly. This is my new favorite workflow!
Hello Martin ! Thanks for this video ! I am just learning webdesign & Adobe Xd alone during the quarantine and i just discover webflow thanks to you ! I would love to see an Ae to webflow tutorial !! :) 🇫🇷🙏
Stay safe and have fun learning Julie! 🙌
Hands down the best tutorial I've found on Webflow....
Great Job! I would love to see more of the possibilities of the After Effects and Webflow intergration
Wow this is exactly the video I needed to persuade me to Webflow. Thank you!
Would love to see a video about creating animations in After Effects and importing them into Webflow as JSON. Many thanks.
Very, very simple site build.
Seriously, you are a brilliant instructor!! Thank you! 🙏🏻
Martin, I'm interested to know more about the hosting part also. Can you make a video about that too? Thanks
That is a great idea of making a video regarding the connection between after effects and webflow.
Thank you soooo much, I was actually looking for something like this. Actually, I can't download any plugins fo XD, always show "Something went wrong" and I was actually able to download some assets from their home screen. Now that your tutorial helped me out very much. once again, thanks very much.
Thank you for this effort
Honestly, you have to change the title of your tutorial from " ...Adobe XD to Webflow ..." To " ....Adobe XD vs. Webflow..." because there is no connection between the two tools.
I want to say thank you. Your explanations are great and your skills as well. All the best mate.
Amazing video. Beginner friendly as well.❤️
As a developer this is time consuming , i taught is you would port your design on XD to generate a code and host immediately
this tool would not replace the work of FE, but it could be helpful for the UI/UX role to build a prototype with actual animation contents other than lottie. for the responsive contents or animation contents setting needs to be configured with more detail to fit into the whole page, there were a lot need to be customized.
tobby chen thanks for your input. This was just a brief look into an actual workflow and of course it would need a lot of refinement for it to work properly on all screen sizes.
Thanks for sharing this is really helpful, Knowledge based and detailed tutorial. BIG THANKS for making such video.
I like this video. Very detailed with shorcut key. I hope you can do many more videos like this.
It will be helpful to know more when to use: the div, container, sections. in which case to use one instead of the others...etc. What do you say, Martin? Thanks for the video. I enjoy it very much!
This is awesome man , the interaction is amazing and your explanations are top notch .
Amazing Video!. I do have one question tho. What about when you click a link to access multiple pages? how do you make other webpages for your website?
Pls make tutorial on how to integrate XD and Webflow, thanks!
I tNice tutorialnk you speak for a good portion of us.
I am just wondering why you are being so generous with your knowledge?
The best teacher in the world
Awesome video ! Thank you so much. It would indeed be nice to see you create things in After Effects !
Amazing tutorial..just made my life so much easier
After Effects to Webflow would be awesome!
Interesting. A few days ago I purchased a Mac application called Blocs 3 ($99 one time payment) which is almost identically to this SaaS you're introducing here. I am wondering who copied whom. Change the title of your video. *but video is nicely done!
I was looking at the BlocTemplate which comes with 7 templates and lifetime support for that price. Which do you think is better?
Thanks for you this man. Love all your content
Thanks man. Exactly what I needed.
how comes you are so creative and you still around 300k subscribers i thought you around 3m or so but any way slow but sure guy i sallute again
Amazing! Thanks a lot for wonderful lecture and your way to give knowlage
Thank you, your videos Are so helpful
II also thought that there would be sine kind of transfer from XD to Webflow. I was a little disappointed that you just created the same website twice. That said, thia is a good Webflow tutorial.
Did you ever do a video showing how to use After Effects creations in Webflow, including file type and importing?
Saved my simple brain bro. Thank you!
Thank you, I want to see the video on convert AE animation to lotties or json file.
So basically, you could simply use WebFlow to design your layout - there is no need to even use Adobe XD? I thought it was a matter of exporting out of XD and Importing layout and content into WebFlow.
Me too! Thats what the video title implies. Clever click bait I guess.... It looks like you prototype/design in XD and then recreate in WebFlow once you have a design that you are happy with or is client approved.
I felt the same, at the end of the video I was like really?
agreed. I've search all over the internet on how to do such a thing, my conclusion... not possible
@@sengv1987 Well, you have Wix. Super fun to play with but they say its not the best in terms of SEO
I use duda and all I need is a designer to create animations and custom sections. I'm having trouble wrapping my head around making this work as easy as it sounds. I just need the designer to use xb-figma-sketch whatever even webflow just to create the pretty stuff and layout. duda lets me/the team do the rest like plug n play. by itself its limited to templates and the design builder it has similar to webflow but it stops there. you still need someone to create the designs, elements and animations.
I`m a big fan. really, thanks for sharing and teaching
The after effects tutorial. Eagerly waiting
Whats your thoughts for doing this with illustrator?
And is there a similar video..
Thanks
Szia! Köszi a feltötèst, rendkìvűl hasznos volt. :)
en realidad este webflow es netamente para quien no tiene idea de codigo CSS y puede hacer toda la web cambiando los valores que les dan a la derecha
Hi thanks for the great tutorial..i have some questions.
How do you export your adobe xd layout, is it done by batch exported each individual item?
How do you export for all sizes?
Great one. But isnt it double work once you start in XD and than in webflow. Im a XD user.
Nice tutorial, thank you!
You could have titled this video “Using webflow to design a Prototype and website”. This would cut the need to use XD as WebFlow is fundamentally a Prototyping and HTML app in one. It’s reductive to suggest XD as part of the prototyping component.
XD/Sketech/Figma are MUCH quicker to design first before starting the development in Webflow. Especially if clients want to make changes. Doing the design stage in Webflow is extremely time consuming.
@@obsidianstang6296 no you're not doing the work twice. You're designing it in a design orogram and then developing it in a development program. By using a design program to design, you are drastically speeding up concepting and revision rounds with clients. Then once it's approved, you develop. It will take much honger to make revisions in webflow because it isn't an open canvas.
Also, idk where you're getting your quotes from. Whoever is only charging $30-$80 to turn a design to code is not only destroying our industry, they are also likely not giving quality work.
@@obsidianstang6296 ya...I disagree with you on almost all levels, but to each their own. I would never use Webflow as a starting point. It makes zero sense.
@@obsidianstang6296 a design round is still crucial. Going from wireframe to webflow or straight to dev is lazy. It limits your ability for testing and prototyping. You don't seem to care about design, and that's fine. But design is just as important as any other state of the process.
How is your learning progression? I'm tNice tutorialnking about getting the Signature version soon, people like you are really persuading to give
Keeps you creating ;)
Can you tell how to change softal instrunt in Serum, please ?!
what are the advantages of using Webflow over Muse?
Thank you, great tutorial.
Great content and awesome explaination
Hi am I confused after creating a website with adobe xd how do I transfer that to a domain and make the website live? Is there plug in or somewhere I upload the file to shopify/word press to? Thanks so much!
Thx bro Hope u do tut about complex json to webflow including transition in elements ,it seems to be easy to do it as a morphing move but any other effects i add to shapes make json file not appear in browsers ,hope u have an idea how to fix it, nice tut as always ❤
Do you have a full course on this
That's so cool!
This may be a stupid question, but: There is no way to just "convert" from Figma or XD to webflow? Seems like i would have to redo most the whole design in webflow
It'll be nice if you can show us how to create a JSON file fro AF as you said in 17:42
the top, when I installed soft soft (restart didn't help). I have a creative softblaster z softcard. I'm assuming it has sotNice tutorialng to do
Yes, I want to know after effects, JSON and webflow connection.
why dont people just use webflow instead of adobe xd to protoype ? seems better than painstakingly trying to animate things in xd
yes please create something in after effect for webflow
very helpful
*_sir is tutorial very good and help full videos thanks_*
great job
thanks for the tutorial! why use column instead of grid?
Why am I spend time learning coding? All I just have to do is Drag and drop
man. Thank you!
Keep up the good work 😍
please do some designs that are (( free )) and keep adding video . you do great!
Hi Martin, why not just do it all on webflow , instead of using Xd? I just skimmed through your video, if it is explained in there, please direct me to the time stamp.
TNice tutorials is literally the hardest tNice tutorialng my brain can't comprehend. AnytNice tutorialng else I do takes a few minutes and tNice tutorials is just.. it's just so confusing
Shooot .. .just looked through your videos. I would have loved to have seen the After Effects -> Webflow video, couldn't find it. Think you could still create one?
yes please create a video tutorial for after effects to webflow
I love the way he pronounced J-S-O-N. HAHHA 17:15
is it possible to make each one of the images that float in under the slider ,into dynamic pop up windows? I'm trying to create a graphic design portfolio like this. Thank you!!
Can someone please explain to me why we need adobe xd or figma instead of just creating this layout on adobe illustrator or in affinity designer? Whats the purpose of XD? To just create your webpage layout and idea, right? Then you essentially still have to manually upload your images etc to the webflow. Am I missing something here? What makes XD so special? Lol
Thumbs Up !!!
Hello
Thank you very much for this helfull video.
I have a question: if you redo all the work that you did on Adobe XD then whats the purpse of creating it on XD, i mean why not directly on Webflow?
You CAN build on Webflow as you go -- particularly if it's a pretty simple design -- but XD allows you to easily move things around, test layouts, change colours and fonts etc until you're happy with the design -- you then just copy the design onto Webflow. Additionally, clients might want to see a mock-up of the design and make changes before you start to build it. It's far easier to do mock-ups and make changes in XD.
@@cytuber Thank you very much for ur Answer so basiclly its like planing how ur interface yould be after that u aply it on webflow
@@idrischemali5991 Yes. You design it first in XD then use Webflow to create the code in the background. Remember, that XD has the *additional* advantage of being able to create a quick prototype to show your clients how it will look and work when finished.
Prior XD (and similar tools), most designers used to design in Photoshop and then send their designs to a Web developer to copy. You could only design in Photoshop; there was no way to build a prototype with workable links and dynamic effects. In XD you can do all that.
In the long run, a bit of time spent planning and getting everything correct BEFORE you start to code will save you lots of time. Good luck.
@@cytuber Got ya thank you for this very helpfull information, Wish u best of luck
looks like the UI was made for them to be bought out by Adobe
Sa here!
This is great!
Awsome
Hi, this was really helpful, tho I have a question. I use webflow often, here is my question. In a case where you want to tweak the entire view in CSS, it's written as max-width 1140px. So I want to increase or decrease it in webflow. Is it possible if so how do I do that
So can someone clarify this for me please. Are you able to create an entire website in Adobe XD and then use webflow to make it live without doing any actual code yourself? Or what am I missing?
@7:07 what is that! "Prebuilt Layouts" I don't have this.
Brand new feature announced in the past couple days.
THANK YOU!!!
Can you use webflow to build progressive web app? Thanks. Particularly social network app.
Todd Gun great question. I don't think you can. For apps I would build the complete prototype with interactions in Xd and send the assets to a developer. It would be great to have a tool like Webflow for creating apps and there might be one out there. If anyone has a suggestion please let us know! 🙌