×

How does Sketch artboard syncing work?

Note: This article mentions generating screens by uploading a Sketch file. This method of syncing is being discontinued for existing customers effective August 14 and are unavailable to new customers. Please see the announcement for more details. We strongly recommend that you start using Craft Sync now.

InVision can export multiple screens from a single Sketch file automatically. Combine this with file syncing to set up a lightning-fast workflow for updating your prototype every time you save your file.

How it works


To get started, just upload your Sketch file to a prototype, or add it to your Source Files folder (if you're using file sync).

Exporting artboards and pages

When InVision syncs a Sketch file, it exports each artboard as an individual screen. If your file doesn't have any artboards, it will export each page as an individual screen. Here are some pointers for exporting:

  • Make sure that each page and artboard have unique names—otherwise, only the first artboard or page with a duplicate name will export. 
  • You do not need to mark artboards for export, but you can export them at a different size, if desired. For instance, if you mark an artboard to export @2x, the screen will be exported twice as big. When you mark your asset for export, just add additional sizes, like so
  • Note: InVision will only accept artboards in JPG or PNG formats. TIFF, PDF, EPS and SVG formats will be ignored.

Sketch and Retina

The important part of the exporting to retina process is telling Sketch to export the screen at 2x resolution.

You can do that by adding an export mode to the artboard in Sketch that's 2x resolution. In the right sidebar after selecting an artboard, change the export mode as shown below and you'll automatically get retina resources. You will also need to add an @2x suffix to the filename so it's displayed correctly in InVision. Otherwise, the image will appear twice as large when viewed in InVision. If you've got @2x in the name of the artboard, you can safely remove it once you've added it to the export mode.

 

Excluding artboards or pages

To exclude an artboard or page, just put a minus sign (-) in front of its name. 

Excluding a page will exclude all artboards on that page. Excluding a single artboard will only exclude that artboard. However, any assets that are marked for export on those pages / artboards will still be exported. 

Exporting assets

To export an area of the file as an asset (an icon, for instance), just mark it for export in Sketch. Exported assets will show up in your prototype's Assets > Images folder. 

Fonts and Sketch

If your Sketch files don't look right when you export them to InVision, it could be due to the fonts you've used. If this is the case, InVision will display a notification telling you which fonts are missing. 

To fix this, add your fonts to the prototype's Fonts folder. On the web, you'll find the Fonts folder in the prototype's Assets. If you're using InVision Sync, head to InVision > Your Email > Your Prototype > Assets > Fonts. Place all of your Sketch file's fonts directly in the Fonts folder, without sub-folders. InVision supports OpenType and TrueType font types.

If you don’t have the font files, you'll need to manually export your artboards or pages to the Screens folder, or convert your text to outlines (Cmd+Shift+O).

Important license information

Make sure you've properly licensed the fonts you're using, and that your license allows uploading to InVision.