Import HTML (from URL) as editable static content in XD
I would like to import HTML or SWF files as content in XD.
Kenneth, would you mind breaking out SWF import as a separate feature request? That way people can gauge whether people want both or which one is higher priority. I’ll remove SWF from the title here so it’s focused specifically on HTML import.
A solution for "in the mean time" could possibly be:
• Convert the HTML to SVG
• Bring that SVG into XD
Corri Loschuk commented
I have software named "Page Layers" for mac that enables us to save a layered .PSD of a webpage which we can import into XD. Real time saver, curious if there is something that skips this step.
I understand that Abode XD is used as prototyping tool . But almost ,60% work frontend can be utilized in it. So I felt abode XD should export html files and also should import html into .XD file for backward compatibility . Just felt it be interesting.
Joachim Tillessen commented
I'm wondering whether this should be a browser plug-in rather than a feature of the XD desktop app.
As a browser plugin:
I could print out any application that is not publicly available (logins, localhost, internally hosted apps...)
I could replicate any state of the webapp that does not have a specific URL (single page apps, error states, one particular step in my checkout process, ...)
Joachim Tillessen commented
While I see tons of benefit in having a workflow to export style changes back and forth. It's important not to dilute the scope of this feature. Technically the web is a super diverse and while one fraction sees benefits in a dremweaver integration others are hoping to maintain their react or vue components and yet another fraction wants bootstrap... Exporting code is widely discussed in other feature requests.
I hope everybody here can agree that the ability to export a HTML document to XD alone is valuable enough to support this feature.
Babar Iqbal commented
That would be really helpful. Just importing a page from live html site. I would love to see that in action.
Jethro Higgins commented
I would love to pull an HTML page into Adobe XD with just the URL . Doesn't need to crawl the whole site I just need to upload a couple of pages that are examples of particular templates.
Mike Schwartz commented
A plugin to import HTML web pages to layers in XD
Daniel Iancu commented
Just drag and drop pre made components and show the props in the properties panel.
The easiest way is... convert your HTML to SVG and then simply drag and drop into XD.
YES! This is a much needed feature. Designs change when coded out. This would allow rapid iterations on an existing web page layout. I used to have an app that would convert web pages into PSDs and it saved me a lot of time when working on redesigns.
Ann Miles commented
The ability to import HTML, CSS, JS from Sketch exported designs would be invaluable for PC users!
will be nice!
Panagiotis Sarafis commented
Yes, importing directly from HTML would be great and would easily facilitate the transition fro other platforms to XD
It definitely is related. If importing HTML, JS and CSS, three aspects might be important:
- Support build automation: being able to hand over a list of components that consistently gets (re‑)imported, instead of having to select them manually in the UI
- Retaining the component hierarchy (component A is composed of component B and C)
- Understanding properties: A button's label can be edited or its icon or width, but not its colors or height
Justin Powell commented
I have recently become product owner of my company's client-facing intranet. Our developers prefer XD-like prototypes over static Photoshop mockups more complex efforts. Since our intranet already exists, it would be a HUGE productivity enhancement to be able to import an existing HTML document with CSS instead of having to recreate it in the Design mode. Why recreate the wheel (or page)?
I want to be able to automatically (re-)generate an XD UI kit from my existing Web UI component library so that the components the designers use are always in sync with what the developers use to implement the solution.
This includes the possibility to update existing symbols in my XD files if they have changed in my web component library.
There are numerous solutions that generate a documentation from existing UI components, couldn't this approach be extended to also generate XD symbols?
Jean-Michel Demers commented
I would love to important an HTML in Adobe XD to kick start working on an existing online project. Will save time a lot. It's a must I belive.
Wouldn't that be a feature for Adobe Dreamweaver?:
Have a tight integration between Adobe Xd (creating design content) and Adobe Dreamweaver (writing code).