Web Export Introduction

Hi everyone,

I’m the lead developer for Web Export. Web Export helps designers and developers author and export dynamic, interactive web pages and web sites from Adobe XD.

With Web Export you can retain your development work throughout the designer and developer workflow and across design changes.

Developers can modify HTML and CSS to their liking and designers can modify the look and feel of the project. All of the code is manageable.

Style and code blocks allow you to drag and drop in styles and code blocks to add functionality to your pages.

If you want to add capabilities and social currencies to your page snippet blocks will add support for that.

2 Likes

More info
Forums
Home page

Curious how you see this competing with solutions like Sketch? Or if it is targeting a different market segment?

I haven’t used Sketch. I took a quick look at their site and it doesn’t seem like it has a web export option. Export options are mentioned here.

The market is for a few use cases:

• Designer makes a nice design and they want to put it on the web. They don’t need to know HTML or CSS but if they do that levels up their results.
• Developer making an app. They get the XD project from a designer and can “wire the project up” and then hand it back to the designers. Designers can then make changes, change colors, modify images etc.
• A web enthusiast who wants to make a website but they’d like to focus on the design or functionality rather than the HTML or CSS. Since the CSS is contained you can have fine grain control of the details.
• Template authors can create templates and then hand them to designers to make it work
• Turn a prototype into a live project or progressive web app. There aren’t many visual design tools that I like as a developer and so when XD (or a program like Sketch) can be used to create the UI then I can use that document description and the application API to create the real UI and make those prototypes interactive on the web and change the design at will without rewriting all the code over again.
• Users making slideshows of their artboards

Haven’t spent too much time looking into it but I don’t think Sketch has the plugin support to integrate it yet. I’ve added more than 15 new videos that show some of the uses cases since this post in the video playlist.

A grant would support creating new examples, starter projects, add new features developers and designers have asked for, extend to new platforms, add new documentation, add integration for other platforms (YouTube object), etc.

For example, with more support, after you create your web site artboards I could add support to add monetization to your site by dragging and dropping a code block to the artboard.