Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. Element Options

Auto Export

Export on each change

PreviousDisplayedNextExport (artboard)

Last updated 3 years ago

Was this helpful?

The Auto Export option when it's enabled exports the selected artboard whenever you make a change to the artboard.

Use Auto Export with Auto Refresh to see changes live.

The Auto Export option is only available in the Web Export panel.

When you first enable this option it will prompt you to select the folder that you want to export to. Using Auto Export will use the options you have selected in the Export Artboard dialog.

After you select the folder the artboard will be exported a message and a few new options are available.

Before:

After:

The export message is automatically removed after a few seconds.

When Auto Export is enabled anytime you make a change the selected artboard will be exported.

If you select an element on another artboard that artboard will be selected.

Currently anytime you make a new selection the artboard will be exported.

The Auto Export option is not saved between sessions. If you close the document you have to enable it the next time you open the document.

Copy URL, Open Server and Open URL

The copy link copies the URL of the exported web page to the clipboard

The server link appears when you define a server. When you click on it it will open the link in a browser.

If you do not have a server value set then the server link is not created.

The url link defines the path to the exported HTML page. When you click on it it will open a link to the browser. If you are using Windows this opens a remote page due to a limitation.

Demonstration

https://github.com/velara3/xd-examples/tree/master/web-export/examples/exports/auto-export

Example Project

https://github.com/velara3/xd-examples/tree/master/web-export/examples/auto-export