The Craft Sync plugin for Sketch and Photoshop brings your design environment and InVision together like never before. Sync lets you send your designs into InVision instantly—no saving, exporting, dragging or dropping. Simply select your screens in Sketch or Photoshop, create or choose the prototype you want to sync to, and easily import all of your screens into InVision.

Currently Craft Sync works differently for Sketch and Photoshop, and we’ll elaborate on the differences between those flows below.

Over the next few months, we’ll be improving Craft Sync functionality. See below for known limitations, and stay tuned for improvements.

Syncing to a prototype via Sketch

With Craft Manager, we also introduced some changes to the Sketch publishing workflow via Craft Sync. The publish process is still triggered by the Craft Sync plugin, but the publish dialog itself is located in Craft Manager.

Selecting artboards in Sketch

By default, when you click the Sync plugin icon on the right hand side of Sketch, artboards that are currently selected will be published. To publish all artboards, click the Sync plugin iconwith no artboards selected. View the number of artboards being published from within the publish dialog.

Note: Even when updating all artboards, Craft Sync will only publish the artboards that you have edited since previously publishing. Because this setting reduces the time required to update your prototypes, it is the default setting. To turn this setting off, in the Mac menu bar, click the Craft Manager icon (), click the settings cog icon (), click Preferences, click the Sync tab, and then click (to uncheck) the Prevent upload of unmodified boards option.

Publishing a new prototype via Craft Sync in Sketch

After click the Sync plugin icon, you will see the Craft Manager publish modal. If you have never published a prototype from the Sketch file before, you will be prompted to create a new prototype. If you want to update an existing prototype, click Sync existing prototype. When publishing a new prototype, you will be required to give it a name and select a device type. Clicking Publish will take you back to the prototypes tab where you can view the publish progress.

See "Viewing sync progress from a Sketch file via Craft Sync" below for next steps.

Updating an existing prototype via Craft Sync in Sketch

If you have published a prototype via the Sketch file before, when you click the Sync icon, you’ll be prompted to click Update to save changes to the existing prototype. If you wish to publish an entirely new prototype, click the + button to the right of your prototype name in the Sync modal, where you will be prompted to assign the new prototype a name and a device type.

Clicking Publish will take you back to the prototypes tab where you can view the publish progress.

Viewing sync progress from a Sketch file via Craft Sync

After clicking Publish or Update, you can view your publish progress in the prototypes tab of the Craft Manager modal. There are a few stages of the publish process that need to complete before your prototype is ready:

1. Exporting Assets: We export all layers marked as exportable so that they can easily be downloaded via Inspect.
2. Extracting Inspect Data: Inspect gives your developers access to all the important information they need when implementing a prototype. During the publish process, we need to extract all this information from the Sketch file.
3. Uploading: Once all data is ready, we upload it all the InVision. Upload times can vary depending on the size of the prototype and your internet speed.

Once your prototype is published, you will see the prototype URL, which you can use to preview the prototype on InVision via the web or the InVision mobile app.

Stopping an active sync of a Sketch file via Craft Sync

Stop an active sync by clicking the square in the sync progress icon. Artboards that have already successfully uploaded will remain in your prototype even if you stop the sync in mid-progress.

Syncing to a prototype via Photoshop

The process for using Craft Sync for Photoshop differs from the description above for Craft Sync for Sketch. Note that first you’ll need to follow the set-up instructions below for Photoshop. Then, you’ll be able to use the following instructions to begin syncing.

Sync setup: Photoshop for Mac OS

For Macs, you’ll need Craft Manager in order to use the Craft plugins.

In Photoshop for Mac, click the Sync icon and enter your InVision credentials, and then click Sign in.

If you don’t yet have an InVision account, click Create Account, which will take you to the sign-up flow at InVisionApp.com. Once you have signed up for an account, you can go back to Photoshop and sign in to the plugin with your new InVision credentials.

Sync Setup: Photoshop for Windows

To use the Craft Sync plugin for Photoshop on a Windows computer, you’ll need to download the Craft Sync Windows Installer.

1. Once you open the installer, click Yes to allow the app to make changes to your device.
   
   
2. Click Install.
   
   
3. Wait while Craft installs on your computer.
   
   
4. Once the download is complete, click Finish.
   
   
5. If Photoshop is already open on your machine, restart it.
6. To open the plugin, in Photoshop go to Windows > Extensions > Sync (Beta). The first time you relaunch Photoshop, it may take up to 1 minute before the Sync plugin displays in the Photoshop panel.
   
   
7. The first time you open the Sync plugin, you may receive a Windows Security Alert message. We recommend that you check both private and public networks and then click Allow access.
   
   

Back in the Craft Sync panel in Photoshop, click Sign in to InVision. If you don’t yet have an InVision account, click Create Account, which will take you through the sign up flow at InVisionApp.com. Once you complete signing up for an account, you can go back to Sketch or Photoshop and sign in to the plugin with your new InVision credentials.

When an update to Craft Sync for Windows is available, you will see the modal below and need to click Update now. You will be required to update when a new version is available. Once you update, you’ll also need to restart Photoshop.

Syncing to a prototype via Photoshop

Once you’re signed in, you can start syncing your Photoshop screens to your InVision prototype(s).

Sync changes to an existing prototype
To sync changes to a previously created prototype, select the prototype you want to update from the list, or use the search field to find it by name.

Sync to a new prototype
To sync screens to a new prototype:

1. In the Sync plugin, click Create or select a prototype.
   Note: If you were working with an existing prototype in the Sync plugin, you will see the name of that prototype rather than Create or select a prototype.
2. Below your list of existing prototypes, click Create Prototype +.
3. Enter the new prototype name, select the account you want to use, and then click Create prototype.
   Note: You cannot use the name of a pre-existing prototype when creating a new prototype.
4. Finally, click Sync to InVision.
   

When choosing an existing prototype to sync to, you’ll see your unarchived prototypes from both personal and Enterprise accounts. You also have access to prototypes for which you’ve been given Contributor/Collaborator access.

If you have synced from the active document before, the plugin will default to the last prototype you synced to. You can change this at any time.

Selecting artboards and initiating a sync via Photoshop

The Sync plugin exports and uploads artboards from your design as screens in your InVision prototype. If you're working with a legacy Photoshop project, to use Craft Sync you'll need to convert your layer groups to artboards first. You can do this by left-clicking on a layer group in your non-artboard Photoshop file; then, select the option to convert that layer group to an artboard.

You can either sync all artboards from a page or selected artboards. If you chose Only selected artboards, select which artboards you want to sync. You will also be able to select the export pixel density (1x or 2x) from the project selector screen.

Once you’ve selected your prototype and whether you’d like to sync all artboards on an active page or only selected artboards, click Sync to InVision. Your Photoshop document must exist on your hard drive (meaning it’s been saved at least once), for a sync to start. All screens sent to InVision with Craft Sync for Photoshop are compatible with Inspect.

As your sync takes place, you’ll be able to view the progress under the sync button:

Once syncing is complete, you’ll see a green check mark, when your prototype was last synced, and an Open button to go directly to your prototype dashboard in InVision:

Note: The current build does not make a share link available. That functionality will be added in an upcoming release.

When syncing artboards from Photoshop via Craft Sync, screens are updated based on the artboard name matching the underlying filename for the screen in InVision. Screen replacement when renaming an artboard is not supported.

Stopping an active sync of a Photoshop file via Craft Sync

Stop an active sync by hovering over the sync circle progress indicator in the plugin’s footer and pressing the X icon. Artboards that have already successfully uploaded will remain in your prototype even if you stop the sync in mid-progress.

Changing your sync settings

Sketch settings

Use Craft Manager to adjust your Sketch settings for Craft Sync:

1. Click the Craft Manager icon in your toolbar.
2. Click the cogwheel, then click Preferences.
3. Click Sync (next to General).
4. From here, you can adjust the exported pixel density and notification sounds.

Photoshop settings

When using Craft Sync for Photoshop, click the cogwheel to sign out of the account or send us feedback.

Select your export pixel density (1x or 2x) from the main Craft Sync screen:

Selecting a pixel density will export the artboard at the selected density. If 2x is selected, a 500x500 artboard will be exported and uploaded at twice the size (1000x1000), but it will be displayed in your prototype at 500x500. Alternatively, you can export at 1x.

Sketch’s density setting will up-res the image, whereas Photoshop’s density setting just allows you to define the density you designed the artboard at. In Photoshop, by default the export density is 2x.

Known Limitations

Here are a handful of known limitations for the Craft Sync plugin:

• Unsyncing: At this time, you can’t unsync. You can switch to a different prototype, but there is currently no way to unsync screens sent to a prototype. You would need to overwrite them manually or delete them in your InVision prototype dashboard.
• SSO: Craft Sketch Sync supports SSO (single sign on) and is available as an option after choosing Enterprise sign in and entering your InVision Enterprise domain name. While Craft Photoshop Sync does not presently support SSO, Enterprise users can still sign in to Craft Sync and use it successfully by providing native credentials. If you don't know your native password, you can do a password reset to generate a new one.
• Sharing: The current build does not make a share link available directly from Craft Sync. That functionality will be added in an upcoming release.
• Photoshop density: Sketch’s density setting will up-res the image and Photoshop’s density setting just allows you to define at what density you designed the artboard.
• Assets: Craft Sync for Photoshop will generate assets for export from any layers with names ending in .png, .gif, or .jpg only.
• Private Cloud: Enterprise accounts with Private Cloud enabled can sign in with Craft Sketch Sync via SSO. Native credentials are required to sign in with Craft Photoshop Sync.