@@tomatosofficial1124 If you really want to get into code and maybe later into programming? You should keep learning by coding/typing. This way eventually will make you lazy to code. Am teaching myself html/css/javascprit so I understand your feelings. Cheers!!
THIS ROCKS! Very nicely done. Thank you, Punit! I teach students how to do similar in Photoshop, but I may try to switch the entire college to start doing it via xd. :)
@@PunitChawla and once we export and get that html file, how do we edit that html file until turn it into a website with javascript functionality to links, buttons, etc? do you have other tutorial showing how to go on from here? Thanks
Punit Chawla Punit Chawla, it's also really nice because that way when you pass it on to the developer they have code to work with and they're not starting from scratch!
Everything is pretty great about this plugin. Even most of the animations/transitions work as well. However, when I use the 'on tap- scroll down animation' in Adobe XD, the output created by the plugin in HTML, CSS, and Javascript doesn't entail this animation. Could anyone please state a remedy for this?
Thats cool dude, todays designtogether 2 was really fun, thanks for giving the nudge could experiment and complete one screen. Looking forward to next week.
HI! thank you so much for this tutorial! 2 questions - can I export all artboards at once? also, what happens if make changes in my XD - is there a quick way to update the file?
Sir have just subscribed your channel and loved your work. But I have a humble appeal to you, pls also tell to make all that drag and drop work , so that we all can also boost our productivity.
So you're telling me that I've been struggling with coding for the past 7 weeks in order for me to just now fid this video :*(. In other words: thank you, this was really helpful!!!
Hi. How is it my brother. I have exported the website I was design and the problem I have is that it doesn't show pictures when it is uploaded on a browser
Thanks for the video! So for making shadows and animation (which I have already done in XD) I have to learn coding to make it work in the HTML/CSS file?
That’s really great but there is no Web Export plugin in Windows version of Adobe XD let me know how to do it on Windows. I have mac I did it on that but I don’t use mac for any development or designing work please help me out.
Well, it depends what your company prefers it's employees to use. Photoshop is a great tool. But software like sketch, XD, figma etc. are better when designing UI since they are focused on that. Manual coding isn't going to come to an end, at least for the next 5 years, since the plugins that convert designs into code are not that powerful, yet.
Latest Adobe XD, updated web export plugins, but not able to get CSS file and folder when exporting in XD. Using window OS. Can you please tell me the solution. Thank you!
Thanks for sharing, definitely going to try. I was looking for a similar solution and cane across this plugin called Anima which paid. Could you share what do they offer differently?
Hi Punit really thanks mate for your videos those help me a lot and I have a request which I want to post hear I need a URL where I can find good fonts Thanks in advance
Everyone is creating some designs, but no one is showing how to export the Design created with XD to web. For it to be uploaded (i. e. with filezilla). ...
How to adjust the export to fit exactly in the viewport size of the browser? to give an accurate representation of how the website should look like on Web?
Very good, i think you should open it in a text editor to see html and te styles, but im gonna do it myself... let me do it !!!! Thanks for the tutorial !!!
Sirji I'm a CS Student...!! I want to join the android developing...!! I know some basics as of now... I used Adobe xd to design an app UI.. but couldn't do it good.. please give me some tips..
Start with the basics of design to know what is correct and what is not. Design will come with practice, so keep watching my videos and tutorials and you'll get better over time. Try some basic UX/UI courses on Udemy, LinkedIn learning, etc.
@@saumyasingh6894 Okay I got your point now. Actually you can't make page transitions over after effect(with code), you need to make animation just for proper reference to the developer.
Sir I want to ask something about poster designing and Facebook ad designing I want to use Adobe XD for these type of Designing is this usable or not for social media marketing poster designing
If suppose 5 or 10 artboards are there. Then how can i export, same process ?. If same process it will export in to each and individual file... How can I live prototype?
Can I make a hover interaction in Adobe XD? I am unsure whether I should move from XD to Sketch as it seems as though XD does not have hover available.
Pls sir if you could mannage pls make a full working website on "XD"and export it to "HTML" and "CSS". There make some javascripting and and use some dbms code.
So when you export it at the end is that publishing the website? And do I need to buy the domain name to have the site published I’m lost... any advice helps
Hi! Can you guide me. I have received this error at the time of export. Errors: 1. Run Error: TypeError: Cannot read property 'BLEND_MODE_PASSTHROUGH' of undefined
hey this option is not shown in windows any more, last time when I saw your video ...this option was available but now i can no longer able to do this .........what's happening? is there any update that did this ?
16:42 - How to export to HTML/CSS.
Wait what? We can simply export like this? Is this blackmagic?
@@SankarshanGhosh ye I'm confused also. I am learning html/css and then I come across this.. like so do we make a website in code or..
@@tomatosofficial1124 you need JavaScript if you want the website to be dynamic. But yes for static sites just html /css would suffice.
@@tomatosofficial1124 If you really want to get into code and maybe later into programming? You should keep learning by coding/typing. This way eventually will make you lazy to code. Am teaching myself html/css/javascprit so I understand your feelings. Cheers!!
@@kingcogles do u have discord?
Dude you had reduced a year of web designing for me .... HUGE THUMBS UP FOR THIS VIDEO!
THIS ROCKS! Very nicely done. Thank you, Punit! I teach students how to do similar in Photoshop, but I may try to switch the entire college to start doing it via xd. :)
Hi Asenath! Which college do you teach at? I'd love to give a guest session if you like
Yea xd is very good for this
@@PunitChawla and once we export and get that html file, how do we edit that html file until turn it into a website with javascript functionality to links, buttons, etc? do you have other tutorial showing how to go on from here? Thanks
@@holo406 Use an IDE like Microsoft Visual Studio Code, or just use Notepad to save time. But you must be familiar with HTML, CSS and Js
First Indian channel i watched for best web design tutorial thanks🙂
Thank you! I Appreciate it
Can I use this for wordpress plz guide how.
I'm new at wordpress plz guide
@@adnanabbas1646 man
This is like a dream come true as a person who sucks at coding this will allow me to be a website designer and do what I do best designing😊😊😊
Exactly what I made it for. I'm glad you like it!
Punit Chawla Punit Chawla, it's also really nice because that way when you pass it on to the developer they have code to work with and they're not starting from scratch!
i support u from Turkey! Dont qive up from this design job, u have a natural ability!
Thank you so much for this compliment! Never going to give up for sure
@@PunitChawla 🖤🖤🖤🖤🖤🖤🖤🖤🔥
@@PunitChawla U SAID NEVER BRO 🔥🔥🔥🔥 NEVER 🖤🖤🖤 U ARE SO TALENTED
Great Punit to show this EXPORT to HTML website NOT many do ... - IT seems to be TOP SECRET to show how. ;) BIG THX Punit... /// McRoman ...
Thank you for the appreciation! Keep watching
shout-out to you and the guy who made the plugin, made my life a whole lot easier
Nice tutorial! I've seen anybody creating design using Adobe XD for first time!
Thank you! Keep Watching
*Covid-19* : Making Programmers Since 2020 😷
"Programmers" yeah okay
youre making programmers? you mean programms
Drink when he says perfect! 🤪 🍺 🍻
Great video!!! 👍😁❤🙏
A quick suggestion, do tell what key shortcuts you are using, so that a beginner can learn
NICE; BUT HOW CAN I IMPLEMENT THE FUNCTIONALITY OF i.e. A BUTTON HOVER FX ETC? thx in advance
Everything is pretty great about this plugin. Even most of the animations/transitions work as well. However, when I use the 'on tap- scroll down animation' in Adobe XD, the output created by the plugin in HTML, CSS, and Javascript doesn't entail this animation. Could anyone please state a remedy for this?
Thank youu!!! I wanted to update my profile for a while and was looking for some frameworks, but this makes everything easier.
I'm glad I could help you out!
you legend - what a super useful hack/plugin - nice job!
Thank you very much! I'm glad you liked it
Thats cool dude, todays designtogether 2 was really fun, thanks for giving the nudge could experiment and complete one screen. Looking forward to next week.
I'm glad you joined man, and yes we'll have an even better one next time!
You are simply superb. Best video on topic i ever seen
Hatsoff for this video maker....it helped me a lot...thank you so much for this
Punit bhai Its lit
I am thinking to use it as a design for my own website.!
Its just 😍😍😍😍
Thank you man! For sure, go ahead and use it. Keep watching!
2:00 "100 pixels, perfect", "80, fine"
*..proceeds to keep 80*
HI! thank you so much for this tutorial! 2 questions - can I export all artboards at once? also, what happens if make changes in my XD - is there a quick way to update the file?
Wow, its way more easier than I expected :D
I'm glad you liked it!
Sir have just subscribed your channel and loved your work.
But I have a humble appeal to you, pls also tell to make all that drag and drop work , so that we all can also boost our productivity.
I really love this design. I'm a big fan of your work 🙌🏻
Keep inspiring.
Thank you so much! I’m a big fan of your work too!
@@PunitChawla Can you tell me how to move border to fit layer prntscr.com/nvzcfk
omg I needed to know this so bad but couldn't find it anywhere!! everyone kept saying the website designer will take care of it lol
Wow! I'm so excited that head about web export😍😍
I'm glad you found it useful! Keep watching
So you're telling me that I've been struggling with coding for the past 7 weeks in order for me to just now fid this video :*(. In other words: thank you, this was really helpful!!!
You're most welcome Marta! Hopefully this video will help your workflow
nice but please try to show your short key what your using
Punit you are just amazing ...👌
Thank you very much Wasim! Keep watching
Finally full explanation!!! Thank u!!!
I'm getting a 404 file not found when clicking the Adobe XD File link. Can you update the link? Thanks!
Hi. This is Ayush. Nice Video by the way
Hi Ayush, I'm glad you liked it. Keep on watching
Excellent plugin to know. Thank you very much for your sharing.
Front End Developers be like my almost more than half work is doing ui designer
Ehmmm no.
Thank you for sharing a very clear tutorial.
Hi. How is it my brother. I have exported the website I was design and the problem I have is that it doesn't show pictures when it is uploaded on a browser
Thanks for your videos very informative highly appreciated. But please i have a question how to create a click able prototype.
Hi, great tutorial but how i can export also the link (ex menu scroll to another object)? thanks
that's great, going to tryout,
and thanks for showing my previous comment on this vdo for HTML+CSS
👍🤓
Hey, You're welcome! Keep watching
EXCELLENT ,
do you think, you can make a video of how to upload that html to wordpress?
Thank you! Let's see, I might do something like that in the near future. Keep watching
@@PunitChawla
I would appreciate it very much thank you: D
Do all html, css work and then build a Wordpress theme with ACF plugin. Just search how to do it on the web.
Ruslan Anisimov cool! Let me try that out then.
this made me smile :)
Thanks for the video! So for making shadows and animation (which I have already done in XD) I have to learn coding to make it work in the HTML/CSS file?
That’s really great but there is no Web Export plugin in Windows version of Adobe XD let me know how to do it on Windows. I have mac I did it on that but I don’t use mac for any development or designing work please help me out.
Install plugin
Monster Shop there is no webexport plugin available for Windows version.
Hi plz make a video about projects and some online resources that could help
days of photoshop used to design websites are over? also is manual html/css/js/jquery coding coming to an end?
Well, it depends what your company prefers it's employees to use. Photoshop is a great tool. But software like sketch, XD, figma etc. are better when designing UI since they are focused on that. Manual coding isn't going to come to an end, at least for the next 5 years, since the plugins that convert designs into code are not that powerful, yet.
That's great for business
Amazingggggg. Thanks Bro ~ I love Indian
Thank you !
Please must reply.
Can I use this in my wordpress website..
Please reply thanks in advance
hey what about code readability, naming convention and code length of generated code??
great tutorial, thanks my friend
Hi punith sir...yr video tuts are really awesome...iam trying to Register myself with designwings..but couldn't get connected ..kindly help me sir
Would you please mention the plugins of mockups in adobe XD ?
Use either web export plugin or fireblade plugin
Thanks Sir 😊
Latest Adobe XD, updated web export plugins, but not able to get CSS file and folder when exporting in XD. Using window OS. Can you please tell me the solution. Thank you!
Unfortunately the plugin exports the file as an HTML file. You'll have to shift the css from the core file to the linked css file if you want.
Hello sir, actually I have a doubt that like do i have to make multiple designs like different for windows, mac, iphone, android...???
If you are trying to export the phone version of your file, do you have to have a plugin? If yes, What plug in do I need?
but what about CSS code file? How you got it exported?
its probably in the html file
Thank you man. perfect tutorial
updated adobe xd ? i dont have those too;s
no one, not a single soul:
Punit: *coral*
Hahaha!
Thanks for sharing, definitely going to try. I was looking for a similar solution and cane across this plugin called Anima which paid. Could you share what do they offer differently?
Amazing again thank you so much
You're most welcome Cheery!
Hi Punit really thanks mate for your videos those help me a lot and I have a request which I want to post hear I need a URL where I can find good fonts Thanks in advance
Obrigada! Me ajudou muito. Thanks you help me
Everyone is creating some designs, but no one is showing how to export the Design created with XD to web. For it to be uploaded (i. e. with filezilla). ...
Hi! I can't find the "Web export" in the plugin search bar....please help thank you!
Thanks so much! You really helped.
I'm glad you liked it Felicia!
How to adjust the export to fit exactly in the viewport size of the browser? to give an accurate representation of how the website should look like on Web?
manually change it afterwards
Can you please tell, how to set background image if the colour palette of the projects are different.
I exported d site but the web page is not responsive on right side I m getting whitespace
Nice, how do you get the shadows and stuff exported? They are kinda important for the looks.
If the shadows don't get exported, you'll have to code a little: www.w3schools.com/css/css3_shadows.asp
Very good, i think you should open it in a text editor to see html and te styles, but im gonna do it myself... let me do it !!!! Thanks for the tutorial !!!
You're always welcome! Best of luck
Sirji I'm a CS Student...!! I want to join the android developing...!! I know some basics as of now... I used Adobe xd to design an app UI.. but couldn't do it good.. please give me some tips..
Start with the basics of design to know what is correct and what is not. Design will come with practice, so keep watching my videos and tutorials and you'll get better over time. Try some basic UX/UI courses on Udemy, LinkedIn learning, etc.
nice work love Adobe XD
Thank you! And yes Adobe XD is awesome
@@PunitChawla really like your work .. keep it up brother
Still slightly skeptical here, why not so us the code you extracted, is there redundancy ?
Can I export animated transitions code from Adobe XD?
Watched this entire video waiting for this 😭
@@saumyasingh6894 well I found a solution with Lottie plugin on Adobe After effects
@@faizanmadakiya6104 Hey but can you use after effects to design interfaces?
@@saumyasingh6894 Okay I got your point now. Actually you can't make page transitions over after effect(with code), you need to make animation just for proper reference to the developer.
@@faizanmadakiya6104 Ahh, gotcha. Thanks
Life Saver. Thank you!
You’re welcome! Keep watching
Sir I want to ask something about poster designing and Facebook ad designing I want to use Adobe XD for these type of Designing is this usable or not for social media marketing poster designing
Awesome ! +1 subscriber
Thanks! Welcome to the commmunity!
Thanks for sharing.
You're most welcome!
Is this responsive? I mean, I can export to HTML/CSS and site will be responsive?
If suppose 5 or 10 artboards are there. Then how can i export, same process ?. If same process it will export in to each and individual file... How can I live prototype?
Can I make a hover interaction in Adobe XD? I am unsure whether I should move from XD to Sketch as it seems as though XD does not have hover available.
Adobe Xd as of now, doesn't support hover animations. I suggest using Figma for hover trigger.
Hover trigger is availabe now in XD
having difficulty to run animation i made in xd. I mean unable to correctly sync the css file with html i guess what do you suggest.
Hi sir..yrvideos tuts are awesome...iam unable to register withdesignwings ..due to some tech error kindly help.me.sir
for y'all who's wondering what video was that on TH-cam !!
Fat Joe, Chris Brown, Dre - Attention
and (bb ki Vines) in search bar
Pls sir if you could mannage pls make a full working website on "XD"and export it to "HTML" and "CSS". There make some javascripting and and use some dbms code.
i searched web export and it shows no plugin found
i am using win 10
Unfortunately I am also not able to find it. Most probably it's gone.
Maybe XD problem? I'm using web export right now.
Hi punit...the html exported are not working for buttons ...tags are missing. What is the solution for it...
So when you export it at the end is that publishing the website? And do I need to buy the domain name to have the site published I’m lost... any advice helps
Thanks for d video very useful
I'm glad I could help
Just wondering... does the "prototype" works in exported html/css? :)
I see most of the code displayed in SVG and absolute layer based. If I add more content then its overlapping to each other. Any suggestions!
Great design and helpful tutorial 💙👍
Thank you! Keep watching
Why is it zooming in how can I make it the correct size.....pls help 😭
The prototypes don't match with my browser. I have tried 3 sizes for it ( 1920 x 1280 ), (1366 * 768 ) , (1280 * 720). How can i fix this ?
this doesnt work with the latest version of xd
Hi!
Can you guide me. I have received this error at the time of export.
Errors:
1. Run Error: TypeError: Cannot read property 'BLEND_MODE_PASSTHROUGH' of undefined
How about figma, help
hey this option is not shown in windows any more, last time when I saw your video ...this option was available but now i can no longer able to do this .........what's happening? is there any update that did this ?
just amazing