Craft Sync for Sketch

The Craft Sync tool for Sketch 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. Select your screens in Sketch, create or choose the freehand or prototype you want to sync to, and import your screens into InVision. Craft remembers what type of document you sync to.

If using Photoshop, please read the article Craft Sync for Photoshop.

Sync to Freehand

The Craft Sync tool lets you rapidly capture feedback throughout the product design process. Create a freehand document directly from your design file in Sketch, and then share that freehand with others to begin collaborating in real-time.

Remember, Freehand is an online whiteboard for real-time collaboration and feedback, rather than a prototyping tool like InVision; therefore, you'll have to return to Sketch to edit your screens.

Create a new freehand

To create a new freehand from a Sketch file:

1. Open your design file in Sketch.
2. Sign in to your InVision account in Craft Manager. If you're already signed in, go to the next step.
3. Select the artboards you want to sync and then select Craft Sync () in the Craft toolbar at the right of your Sketch canvas.
4. Select the option Create New.
5. Enter a name for the new freehand.
6. Choose to sync All Artboards or Selected Artboards.
7. Select Publish—this takes you to the documents tab, where you can view the publish progress.

From the documents tab, you can copy the freehand link or open the freehand in a new browser tab, and you can begin working on your new freehand.

Update an existing freehand

To update an existing freehand:

1. Open your design file in Sketch.
2. Sign in to your InVision account in Craft Manager. If you're already signed in, go to the next step.
3. Select the artboards you want to sync and then select Craft Sync () in the Craft toolbar at the right of your Sketch canvas.
4. If you have previously synced a file to a freehand, you’ll see the name of the most recently synced freehand in the Select existing dropdown. To choose a different existing freehand, select the dropdown arrow.
5. Choose to sync All Artboards or a Selected Artboard.
6. Select Publish.

From the documents tab, you can copy the freehand link or open the freehand in a new browser tab to continue collaborating on your freehand in InVision.

Use Freehand in InVision

After creating or updating your freehands in Sketch, you can continue to collaborate on them via InVision. To learn more about how to use Freehand, check out our Getting Started Guide.

Sync prototypes

If using Photoshop, read the article Craft Freehand for Photoshop.

This section covers the following:

• Organizing artboards before syncing
• Selecting artboards
• Publishing a new prototype
• Updating an existing prototype
• Syncing with multiple users
• Viewing sync progress

Organize artboards before syncing

To ensure that the organization of your prototype artboards in Sketch is reflected on InVision, you can select your preferred artboard order before publishing the prototype:

• Canvas - Left to right, top to bottom: Your artboards will be organized in InVision just as they're on the Sketch canvas, starting with the first row of artboards on the canvas, moving from left to right before progressing through the second and subsequent rows.
• Canvas - Top to bottom, left to right: Your artboards will be organized in InVision just as they're on the Sketch canvas, starting with the first column of artboards on the canvas, moving from top to bottom before progressing through the second and subsequent columns.
• Alphanumeric: Your artboards will be organized in alphanumeric order (based on the name of each artboard) in InVision.
• Sketch layer list - Top to bottom: Your artboards will be organized in InVision based on the order you've established in the Sketch Layers panel, starting with the top layer and progressing through the bottom layer.
• Sketch layer list - Bottom to top: Your artboards will be organized in InVision based on the order you've established in the Sketch Layers panel, starting with the bottom layer and progressing through the top layer.

This setting only applies when publishing new artboards for the first time. When publishing changes to existing artboards, they will remain in the same order as they currently appear on the web.

To define your preferred artboard order when publishing to InVision:

1. Open a Sketch file.
2. Sign in to your InVision account in Craft Manager. If you're already signed in, go to the next step.
3. Select the artboards you want to sync and then select Craft Sync () in the Craft toolbar at the right of your Sketch canvas.
4. In the Craft Manager modal that opens, select the Prototype tab.
5. Open the Advanced dropdown menu.
6. In the Artboard Order dropdown list, select your preferred order.
   
   If publishing a new prototype, be sure to select the appropriate options in the Device type dropdown.
7. Select Publish.

Select artboards

To sync artboards from Sketch to InVision, navigate to the right-hand toolbar, select Craft Sync (), and then select the Prototype tab. By default, only selected artboards are published.

When you sync artboards with hotspots, make sure you select the artboards with the hotspots and all the destination artboards so all hotspots work as expected in your prototype.

To publish all artboards, make sure no artboards are selected before selecting the Sync icon. You can also select the drop-down at the top of the Craft Manager publish modal and select All artboards on page.

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's the default setting. To turn this setting off, in the Mac menu bar, select the Craft Manager icon () > settings cog icon () > Preferences > Sync tab > clear the Prevent upload of unmodified boards checkbox.

Publish a new prototype

After selecting the Craft Sync icon, the Craft Manager publish modal opens. Select the Prototype tab. If you have never published a prototype from the Sketch file before, you are prompted to create a new prototype. You can also select the option Create new. If you want to update an existing prototype, choose Select existing.

When publishing a new prototype, you will be required to give it a name and select a device type. Selecting Publish takes you back to the documents tab where you can view the publish progress.

If you are on a Team plan, but you aren't the Team owner, you can't publish new prototypes for your team from Craft Sync. First you need to create a new prototype in the InVision web app. You can now return to Craft Sync and sync your Sketch file to that prototype. For more information, check out the article How do I create a prototype on a Team plan?

Update an existing prototype

If you have published a prototype for the specific Sketch file before, when you select the Sync icon and the Prototype tab, open the Select existing dropdown to search for and select the prototype you want to sync changes to. After double checking your settings in the Advanced dropdown area, select Publish.

To learn more about replacing screens in your prototype using Craft Sync, check out this article: Replacing screens in an InVision V7 prototype. 

If you want to publish an entirely new prototype, select the option Create new.

Selecting Publish takes you back to the documents tab in Craft Manager, where you can view the publishing progress and then copy the prototype link to view it on InVision.

There is no way to unsync screens. If you need to remove screens that have already been synced, you can navigate to your prototype dashboard in InVision and delete the screens. Alternatively, you can create a new prototype and sync your screens again.

Sync with multiple users

Multiple users can sync as many Sketch files to one prototype as you'd like. Any new content will be added as new screens and won't replace the existing content.

View sync progress

After selecting Publish, you can view your publishing progress (as mentioned above) in the documents tab of the Craft Manager modal. There are a few stages of the publishing process that need to complete before your prototype is ready:

1. Exporting Assets: We export all layers marked as exportable so that they can 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 to 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.

Change your sync settings

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

1. Select the Craft Manager icon in your toolbar.
2. Select the cogwheel, and then select Preferences.
3. Select Sync (next to General).
4. Edit your sync settings as wanted.

You can adjust these Craft Sync preferences:

• Prevent Craft Sync from uploading unmodified artboards
• Play notification sounds
• Exported pixel density

Unable to import deleted an artboard

If you delete an artboard and then try to re-import it but aren't able to, review your sync settings. You can't import a deleted artboard if the setting to prevent upload of unmodified artboards is on.