Articles in this section

Inserting Screens from Adobe XD

Syncing your Adobe XD designs couldn’t be simpler. Just make sure that you’re on the latest version of Adobe XD and Overflow.

Installing the Overflow plugin for Adobe XD

Once you open Overflow, we automatically install the latest version of the Overflow plugin for Adobe XD. You can also install the plugin from the Plugin Manager in Adobe XD. 

mceclip0.png

Generally, you can manage Overflow's integrations from the relevant tab in the app's "Preferences".

 

Syncing Adobe XD designs in Overflow

The plugin is now accessible through Adobe XD's plugins panel. Simply select the artboards you would like to sync and hit Sync with Overflow. You have the option to choose export density and include prototype interactions. The interactions that can be carried forward to Overflow as connectors are of type Transition, Auto-animate, and Overlay.

mceclip1.png

This will take you to Overflow where you will be able to select the Overflow document and Board in which you would like your Artboards to sync to. You can choose to Sync to one of your already open Overflow documents, or to create a new document.

And voila! Your Adobe XD Artboards are now synced to Overflow as Screens.

Updating your Screens

If you make any changes to your XD Artboards, you can Sync again to update your Overflow Screens. Any changes you previously made on your screen styles in Overflow, and any connectors you added, will not be affected during the update.

Note that Overflow uses artboard names to identify and synchronize them from Adobe XD. This means that:

  • Screen names are unique per board e.g. you can only have one screen named “Sign in” inside a board in an Overflow document.
  • If you sync an artboard and then rename it in XD and sync again, this will create a new screen in Overflow.
  • If you sync an artboard from one XD document and then sync an artboard with the same name from another XD document into the same Overflow document, the screen will be replaced with the new artboard.

💪 Pro Tip: By default, your artboards will be exported to 1x, that’s the size you designed them at. If you wish to have crispier designs in Overflow simply set the pixel density you want to export your artboards to using the relevant option (plugin panel).

Related articles