Punit Chawla

Punit Chawla

Published on 11 months ago

Today we will be designing a portfolio website in #adobexd using the Pantone Color of the year - Coral. As an added bonus, I will teach you how to export this web #uidesign as a HTML/CSS file for further development. This can be achieved using a simple plugin for XD. I've attached the XD file below:

Adobe XD File: http://bit.ly/webuixd

Join Facebook Design Group -- https://www.facebook.com/groups/punitchawla/

Music in the video: "Far Away" by Declan DP Music

Follow Me on Twitter:
Follow me on Medium:
My Behance Profile:


Comments :

Ronald Hancock

Ronald Hancock . 3 days ago

https://fireblade.io One of the best plugin for to do that!

K_ Magahis

K_ Magahis . 4 days ago

Can someone provide a link for the plug in? Thank you !

Brain power

Brain power . 5 days ago

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.


GHHOZI . 2 weeks ago

is the web export plugin totally free?

M Wasim Aziz

M Wasim Aziz . 3 weeks ago

Punit you are just amazing ...👌

Julian Borghuis

Julian Borghuis . 3 weeks ago

I am getting a white rectangle on the rigth side https://gyazo.com/b0c24ce5f9ca3d4b09785b3142276b6f How to fix it sir?

Muhammad Arif

Muhammad Arif . 4 weeks ago

Thanks for your videos very informative highly appreciated. But please i have a question how to create a click able prototype.

Construction Agency

Construction Agency . 4 weeks ago

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

Zainab Shafiq

Zainab Shafiq . 1 month ago

I'm using the free XD and it doesnt show the html or css option. would it show if i upgrade

David Pereira

David Pereira . 1 month ago

thanks a lot


KAYO . 1 month ago

I couldn't discover the plugin, would you send me the plugin?

Divi Park

Divi Park . 1 month ago

Thanks for sharing.

Shivam Mishra

Shivam Mishra . 2 months ago

Where tf did the shadows go bruv

Shafayat Hossain

Shafayat Hossain . 2 months ago

When i exported my xd file with web export plugin it doesn't export properly, some designs were missing. what should i do now ?

Traffic Bot's

Traffic Bot's . 2 months ago

web export doesn't exist

Srinivas Sistla

Srinivas Sistla . 2 months ago

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

Glenn Philp

Glenn Philp . 2 months ago

The way you use grids is bad and creates headaches for developers.

_Rankz Gaming

_Rankz Gaming . 2 months ago

Pretty major problem with exporting and the fact that it's not responsive.

Hossam Salem

Hossam Salem . 2 months ago

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?

Greg Golias

Greg Golias . 3 months ago

What program did you use for screen recording?

Jegor Vasiljev

Jegor Vasiljev . 3 months ago

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

Videos To The Point

Videos To The Point . 3 months ago

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

Usman Yousaf

Usman Yousaf . 3 months ago

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 ?


ui_tuts . 3 months ago

nice work love Adobe XD

Telugu tech n gaming

Telugu tech n gaming . 3 months ago

Thanks for d video very useful

Muhammad Ammad

Muhammad Ammad . 3 months ago

The html is not looking correctly settled how export correctly

Adnan Abbas

Adnan Abbas . 4 months ago

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

Nicole Bach

Nicole Bach . 4 months ago

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.

Jim Philip Ablay

Jim Philip Ablay . 4 months ago

how to make those prototype actions work once exported as an html file? Thanks

Bùi Tất Thành

Bùi Tất Thành . 4 months ago

i can't find it on xd


SAURAV KUMAR . 4 months ago

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.


smuthole . 5 months ago

Nice, how do you get the shadows and stuff exported? They are kinda important for the looks.

Vishesh Upadhyay

Vishesh Upadhyay . 5 months ago

Further ordo, Piximperfect😂

Shivani Shrivastava

Shivani Shrivastava . 5 months ago

Hello, If I know the basic html, so can I convert the Adobe XD file into live website??

Harish karthik

Harish karthik . 5 months ago

Hey punit, Which is best for Web app designing, Bootstrap studio or Adobe xd?

Mzanh kun

Mzanh kun . 5 months ago

Why I can't find this plugin in my Adobe XD :/


xEdwarDx . 6 months ago

Sorry but how can I upload html files on my website?

Ruth Matos

Ruth Matos . 6 months ago

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

Silent Observer

Silent Observer . 6 months ago

Please tell me that doing ui design in adobe xd means that we don't have to do front end developing now? Or ui design is just an illustration

dio aditya romadoni

dio aditya romadoni . 6 months ago

not work

Ashish Khandelwal

Ashish Khandelwal . 6 months ago

Hello Punit I have sent an email to you. Kindly check and respond if you are interested. Thank You


Gravitati0ns . 6 months ago

I have all this down, and I know a bit of HTML/CSS, but what do you do to edit and add links and such to create a live website?


SOURAV DIY . 6 months ago

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

Vlady Vlady

Vlady Vlady . 6 months ago

Very interesting effect of menu. Folded menu. Check it out https://vimeo.com/41495357

Shadin Rishi

Shadin Rishi . 6 months ago

ok. now what i do ? to make the corrections?


ARLEQUINA . 6 months ago

Which version do u use? I am using 2019 cc, but plugings are not working.

harshith narayan

harshith narayan . 7 months ago

Hello, I don't have a degree in design but in mechanical, I always wanted a career in design , can I learn from online courses and get a job in it now..?

Bạch Dạ

Bạch Dạ . 7 months ago

It's looks good but the exported files are not useful too much, I mean they're not ideal, many useless data and too big...? I give this plugin for a frontend dev, but he said the he can't use it, not ideal code somehow? Anyway thank you for share, I hope this plugin will be good in the future


TheBluer . 7 months ago

there is no web export

Gabriel Valente Ferrão

Gabriel Valente Ferrão . 7 months ago

My favorite moment of this video: 19:21

Report form

Related Videos
Beginning Graphic Design: Color

Copyright © 2019 MP3XYZ. All Rights Reserved
Made with by MP3XYZ