Export a responsive website directly from adobe XD without code using the Quest web export plugin
I have a very simple and minimal website designed with desktop, tablet and mobile breakpoints
The font used is Poppins. Quest AI supports the google fonts catalog. If you’re using Adobe fonts, refer to the Quest AI docs for help
Go Plugins > Manage Plugins > search for Quest Web Export To install the plugin
I have the plugin installed
Quest AI is a NoCode platform for publishing web experiences from your designs
It supports XD, Sketch and Figma
There are paid plans as well as a free plan
To use the plugin go Plugins > Quest web Export
Do not to use Google Single Sign-On to create your Quest AI account if you plan to work with Adobe XD, as the plugin does not support it at this time
Use the username/password option to setup your account. If you’ve already used Google Sign-on, refer to the Quest AI docs for help
Once signed in you can select an existing project or create a new one
You can choose the kind of web experience, this will a webpage
Give the project a name...
Select a single artboard or shift+select multiple artboards for a responsive website
High Res image support requires a premium account
Select export and view in Quest
I can add the web interactions to my design using Quest
A brief overview of the interface...
I can make an element interactive by selecting "Add features"
If I want to make this a link, I will select the URL action
Create a hyperlink without having to code!
I can continue to select elements and add features
It's possible to add custom code
The dropdown at the top allows me to select and preview each view or breakpoint
I can make components that are reusable across webpages too
Page settings can be defined here
When I'm ready to publish, I simply select the publish icon at the top
Time to view online!
Viewing the website in my browser, I will test the responsiveness
I can go back to Quest AI and tweak the website further. No Coding!
The status of my website shows it's live
Thanks for watching! Like, comment and subscribe for more videos!