Website UI Design in Adobe XD + Exporting as HTML/CSS | Design Weekly

[@videostothepoint5505]

16:42 - How to export to HTML/CSS.

[@SankarshanGhosh]

Wait what? We can simply export like this? Is this blackmagic?

[@tomatosofficial1124]

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

[@darksnow1111]

@@tomatosofficial1124 you need JavaScript if you want the website to be dynamic. But yes for static sites just html /css would suffice.

[@kingcogles]

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

[@tomatosofficial1124]

@@kingcogles do u have discord?

[@lolafunchow]

Dude you had reduced a year of web designing for me .... HUGE THUMBS UP FOR THIS VIDEO!

[@asenathhorton9953]

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]

Hi Asenath! Which college do you teach at? I'd love to give a guest session if you like

[@officialraygan]

Yea xd is very good for this

[@holo406]

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

[@sameerhussain2579]

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

[@anuj7286]

First Indian channel i watched for best web design tutorial thanks🙂

[@PunitChawla]

Thank you! I Appreciate it

[@adnanabbas1646]

Can I use this for wordpress plz guide how. I'm new at wordpress plz guide

[@iliyarh]

@@adnanabbas1646 man

[@mcroman-superfeat]

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

[@PunitChawla]

Thank you for the appreciation! Keep watching

[@blazingphoenix1000]

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

[@PunitChawla]

Exactly what I made it for. I'm glad you like it!

[@blazingphoenix1000]

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!

[@rishabh964]

Nice tutorial! I've seen anybody creating design using Adobe XD for first time!

[@PunitChawla]

Thank you! Keep Watching

[@rishi6389]

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.

[@PunitChawla]

I'm glad you joined man, and yes we'll have an even better one next time!

[@VantaSiyah]

i support u from Turkey! Dont qive up from this design job, u have a natural ability!

[@PunitChawla]

Thank you so much for this compliment! Never going to give up for sure

[@VantaSiyah]

@@PunitChawla 🖤🖤🖤🖤🖤🖤🖤🖤🔥

[@VantaSiyah]

@@PunitChawla U SAID NEVER BRO 🔥🔥🔥🔥 NEVER 🖤🖤🖤 U ARE SO TALENTED

[@ulhasrane3656]

You are simply superb. Best video on topic i ever seen

[@sistahyma5815]

Hatsoff for this video maker....it helped me a lot...thank you so much for this

[@neilbhutada9666]

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?

[@theScienceLabLive]

Drink when he says perfect! 🤪 🍺 🍻 Great video!!! 👍😁❤🙏

[@Construction-agencyCoUk]

you legend - what a super useful hack/plugin - nice job!

[@PunitChawla]

Thank you very much! I'm glad you liked it

[@RobytheFlorentine]

great tutorial, thanks my friend

[@ruthmatos5259]

Thank youu!!! I wanted to update my profile for a while and was looking for some frameworks, but this makes everything easier.

[@PunitChawla]

I'm glad I could help you out!

[@ravindrabanchhod1579]

2:00 "100 pixels, perfect", "80, fine" *..proceeds to keep 80*

[@maankhurana5814]

I exported d site but the web page is not responsive on right side I m getting whitespace

[@MrEmpey]

updated adobe xd ? i dont have those too;s

[@cleohuggins8026]

I'm getting a 404 file not found when clicking the Adobe XD File link. Can you update the link? Thanks!

[@ayushaggarwal2010]

Hi. This is Ayush. Nice Video by the way

[@PunitChawla]

Hi Ayush, I'm glad you liked it. Keep on watching

[@bumboklaatry5828]

shout-out to you and the guy who made the plugin, made my life a whole lot easier

[@erdbeerbus]

NICE; BUT HOW CAN I IMPLEMENT THE FUNCTIONALITY OF i.e. A BUTTON HOVER FX ETC? thx in advance

[@sempakgragas]

Finally full explanation!!! Thank u!!!

[@imvaibhav2418]

this made me smile :)

[@Shikarte]

I really love this design. I'm a big fan of your work 🙌🏻 Keep inspiring.

[@PunitChawla]

Thank you so much! I’m a big fan of your work too!

[@vovet777]

@@PunitChawla Can you tell me how to move border to fit layer prntscr.com/nvzcfk

[@EndroGAV]

this doesnt work with the latest version of xd

[@mwaseemaziz]

Punit you are just amazing ...👌

[@PunitChawla]

Thank you very much Wasim! Keep watching

[@sabhyasaini3757]

Thank you for sharing a very clear tutorial.

[@tsheponthetheramaele8613]

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

[@mujtabam265]

Punit bhai Its lit I am thinking to use it as a design for my own website.! Its just 😍😍😍😍

[@PunitChawla]

Thank you man! For sure, go ahead and use it. Keep watching!

[@rachelir1]

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?

[@FRONTRUS]

*Covid-19* : Making Programmers Since 2020 😷

[@BluecoreG]

"Programmers" yeah okay

[@nightshift835]

youre making programmers? you mean programms

[@SanjeetCoder]

hey what about code readability, naming convention and code length of generated code??

[@BlazeLove]

Hello sir, actually I have a doubt that like do i have to make multiple designs like different for windows, mac, iphone, android...???

[@MsAtifMehmood]

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.

[@sayanjitb]

Can anyone please tell me that why the shadows and other little styles did not show up after exporting the protocol?

[@muhamadabdulsamad2815]

Wow! I'm so excited that head about web export😍😍

[@PunitChawla]

I'm glad you found it useful! Keep watching

[@spsh4321]

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!

[@PunitChawla]

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.

[@quangle9049]

Excellent plugin to know. Thank you very much for your sharing.

[@discoinferno2654]

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

[@alutis8536]

Wow, its way more easier than I expected :D

[@PunitChawla]

I'm glad you liked it!

[@SheikhHassanMajeed]

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.

[@monstershop2449]

Install plugin

[@SheikhHassanMajeed]

Monster Shop there is no webexport plugin available for Windows version.

[@ravicloudnine]

Dude, then how to get the fonts too. I have this issue that after exporting I am not getting the fonts that I have used in the design.

[@gamersylum3674]

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.

[@thxsyou]

Hi! I can't find the "Web export" in the plugin search bar....please help thank you!

[@SOURAVDIY]

i searched web export and it shows no plugin found i am using win 10

[@lordvviader]

Unfortunately I am also not able to find it. Most probably it's gone.

[@justasimplemanpassingby7335]

Maybe XD problem? I'm using web export right now.

[@BBMotion]

So its not possible to export the site responsive?

[@artichokehandler]

no one, not a single soul: Punit: *coral*

[@PunitChawla]

Hahaha!

[@adhilkdn4997]

Why is it zooming in how can I make it the correct size.....pls help 😭

[@David-zs1yb]

A quick suggestion, do tell what key shortcuts you are using, so that a beginner can learn

[@chellastation]

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?

[@v3nom748]

Front End Developers be like my almost more than half work is doing ui designer

[@tropochito]

Ehmmm no.

[@ali.esl.m]

i use this plugins, but when i want open html just open white windows. can u plz help me?

[@velogonza]

but what about CSS code file? How you got it exported?

[@gergolaky3624]

its probably in the html file

[@faizanmadakiya6104]

Can I export animated transitions code from Adobe XD?

[@saumyasingh6894]

Watched this entire video waiting for this 😭

[@faizanmadakiya6104]

@@saumyasingh6894 well I found a solution with Lottie plugin on Adobe After effects

[@saumyasingh6894]

@@faizanmadakiya6104 Hey but can you use after effects to design interfaces?

[@faizanmadakiya6104]

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

[@saumyasingh6894]

@@faizanmadakiya6104 Ahh, gotcha. Thanks

[@grafbaz206]

Thank you man. perfect tutorial

[@mangeshsannake1014]

Hi punit...the html exported are not working for buttons ...tags are missing. What is the solution for it...

[@One_Films]

Would you please mention the plugins of mockups in adobe XD ?

[@PunitChawla]

Use either web export plugin or fireblade plugin

[@One_Films]

Thanks Sir 😊

[@rileyperrin]

I wanna ask u plz if I download the file u posted her it will open the whole design?? I'm trying to open it but it didn't work

[@masterofmath5575]

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

[@souravsen5773]

days of photoshop used to design websites are over? also is manual html/css/js/jquery coding coming to an end?

[@PunitChawla]

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.

[@자시엘-l1s]

That's great for business

[@adnanabbas1646]

Please must reply. Can I use this in my wordpress website.. Please reply thanks in advance

[@nicolebach2834]

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.

[@PunitChawla]

Adobe Xd as of now, doesn't support hover animations. I suggest using Figma for hover trigger.

[@mayankkaushal2659]

Hover trigger is availabe now in XD

[@gianlucaredaelli139]

Hi, great tutorial but how i can export also the link (ex menu scroll to another object)? thanks

[@maguetteka2292]

Awesome ! +1 subscriber

[@PunitChawla]

Thanks! Welcome to the commmunity!

[@startrocker4959]

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?

[@meatbased77]

Still slightly skeptical here, why not so us the code you extracted, is there redundancy ?

[@ChiminieChimmy]

Amazing again thank you so much

[@PunitChawla]

You're most welcome Cheery!

[@tcp5212]

Life Saver. Thank you!

[@PunitChawla]

You’re welcome! Keep watching

[@jurasv2]

after export, my website is not 100% wide how to change it? it's fit on high on the web but I don't check that option. What can I do?

[@PunitChawla]

Make sure your settings are like this (screenshot) : mega.nz/#!n1MRxawR!_2UEoD4HFDVPG_1-RieD44hDi05H9iqXiBWsbtYPHEQ

[@asadiqbal9211]

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

[@wahabuiux]

nice work love Adobe XD

[@PunitChawla]

Thank you! And yes Adobe XD is awesome

[@wahabuiux]

@@PunitChawla really like your work .. keep it up brother

[@hirenmehta8470]

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!

[@wendelllopez7179]

EXCELLENT , do you think, you can make a video of how to upload that html to wordpress?

[@PunitChawla]

Thank you! Let's see, I might do something like that in the near future. Keep watching

[@wendelllopez7179]

@@PunitChawla I would appreciate it very much thank you: D

[@ruslan2676]

Do all html, css work and then build a Wordpress theme with ACF plugin. Just search how to do it on the web.

[@PunitChawla]

Ruslan Anisimov cool! Let me try that out then.

[@web_masud]

Can I using Illustrator CC 2020 in UI desing

[@jekigates8039]

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 ?

[@dpdpj4895]

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

[@human_modak]

Can you please tell, how to set background image if the colour palette of the projects are different.

[@neerajkunnath6479]

Is it possible or there is any plugin that exports code to design and editing that design and again export to code?

[@daninoneya8043]

So if I export a whole website will it still keep the linking that I set up within the site for navigation?

[@UsmanYousafOfficial]

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 ?

[@hossamsalem8878]

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?

[@bikrampandey475]

manually change it afterwards

[@mohdibrahim1995]

nice but please try to show your short key what your using

[@charulatadodwal4245]

How to add links to those button bellow? ( youtube, behance..)

[@AliCan-ni3uy]

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?

[@choose2behappy699]

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

[@fahdk-SA]

that's great, going to tryout, and thanks for showing my previous comment on this vdo for HTML+CSS 👍🤓

[@PunitChawla]

Hey, You're welcome! Keep watching

[@GamerSolitO]

Is it possible to build s responsive website with bootstrap assets in ADOBE DESIGN XD??

[@dukduka9178]

how to doing 10:47-11:07 min please tell me I can't

[@sruthyvarghese1827]

Hi - can we get the css for the interactions section on adobe xd if we just have a link shared to us?

[@RettlonHD]

so exporting with the animations from the prototype tab wont work?

[@FeliciaGaddis]

Thanks so much! You really helped.

[@PunitChawla]

I'm glad you liked it Felicia!

[@ButterGames]

I have a question, when you export your adobe xd proyect to a website it would lose all of his animations/transitions?

[@PunitChawla]

Yes, unfortunately there is no plugin to export with transitions right now. You'll have to manually add css or js for the project. Best of luck!

[@amans6504]

@@PunitChawla that means that means the files or ui designs we create in adobe xd or figma is just for illustration? Its not the actual app? Like as we saw in WordPress that it makes the complete website for u. So is it similar to WordPress? I'm really confused about this

[@Telugutechngaming]

Thanks for d video very useful

[@PunitChawla]

I'm glad I could help

[@jekiyt811]

I got a problem, when i convert the adobe xd design into code, it doesn't match with my chrome resolution. I have tried all web sizes. From 1280 x 720, 1280 x 800, 1360 x 768 and 1920 * 1280. Anyone have a solution for me?

[@ucneeko5947]

Amazingggggg. Thanks Bro ~ I love Indian

[@PunitChawla]

Thank you !

[@martakov]

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

[@PunitChawla]

You're most welcome Marta! Hopefully this video will help your workflow

[@firhanthalib6943]

How about figma, help

[@apocgod]

Is this responsive? I mean, I can export to HTML/CSS and site will be responsive?