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 Add-ons page in Adobe XD.
Syncing Adobe XD designs in Overflow
Simply select the artboards you would like to sync in your Adobe XD file, and hit Plugins > Overflow > Sync Selected Artboards.
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 go to the Plugins > Overflow > Options and set the pixel density you want to export your artboards to.