Import HTML to XD

[danlewski]

My team has a working HTML framework that was originally designed in Sketch but we're exploring switching to XD. The Sketch files don't quite match what has been developed and rather than importing the Sketch library and tweaking, is there a way to IMPORT the coded HTML INTO XD??? There is an "HTML to Sketch" tool, is there anything similar for XD? I haven't done an exhaustive search or test yet but wanted ask the community first.

[Rishabh_Tiwari · Accepted solution]

Hi there,

Sorry for the delay in response. I am afraid, as of now, we don't have this feature available, however, we have received a similar request on the Adobe XD UserVoice: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13245423-import-ht...

Please upvote the request to add voice to the feature. This is the best way of sharing feedback with the Engineering and Product management team.

Regards

Rishabh

[David26626357k819]

After next one and half year .... the most elementary feature is missing.

When I requested a trial, this was my first expectation: to read existing projects form html/css.

So Adobe forced me to enter credit card details, before I can see the product. The only reason is missing. Awful...

By by

[Jonathan8989]

For anyone else looking at how to do this ... namely, importing a webpage into XD ... I've found what works is this. You can first import the page into a free app called Figma. There is a plug-in for Figma called "Figma to HTML" and it's available here. You can also get an extension for Google Chrome (and Brave) to grab the page content.

The there's another plug-in for Figma which allows you to export Figma layouts to XD. You can get that here. It's called Convertify.

This is not exactly what the original poster asked how to do. However, you can export the HTML page from Sketch (in his case), and then import it into Figma. Then you can export it from Figma to XD. It sounds like a lot of steps, but I've found it only takes a few clicks.

I've found the whole process works very well.

[Cory30089333m9s6]

If you search long and hard, you can find a way to import into XD. Here was my method:

1. Open a free Figma trial
2. Go to Resources / Plugins, search for "Builder.io Generate Designs with AI & Export to Code" and install
3. Click the Import from the Web tab and paste in your URL (you can pull in any page on your website)
4. Go to Resources / Plugins, search for "Convertify Sketch/Adobe/Google" and install it
5. Click the Export and select XD, import into XD

You will have to do some cleanup, but it will save you the labor of redesigning the whole page and importing all assets. 

[kohesion]

Hi Cory, I couldn'tfind the Builder.io plugin in figma - is it still there?

[kohesion]

Update to my above query,realised I was trying to find the builder io plugin whilst in FIGJAM not design view.