×

How does Photoshop layer syncing work?

Note: This article mentions generating screens by uploading a PSD 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.

When you're working in Photoshop, you can use a few basic symbols ( +, &, * ) to completely skip manually saving and uploading your screens to InVision.

What do the symbols mean?

We’ll cover these in depth below, but as a quick primer:

  • “+” turns a layer, layer group, or layer comp into a screen in InVision
  • “&” turns a layer, layer group, or layer comp into an alternate version of a screen to help you illustrate things like hover states
  • “*” turns a layer, layer group, or layer comp into a global element that will appear on top of every layer below it—handy for things like navigation bars


Setting the stage

In order to best explain this, we need an example: Let’s say I’ve designed a website that has 6 screens:

  1. Home
  2. About
  3. Team
  4. Contact
  5. Contact form focused
  6. Contact form submitted

I’ll reference these screens through the rest of this article—let’s look at how to properly mark them for export.

Creating screens with the plus sign 

To export a layer, layer group, or layer comp as a screen, place a + in front of its name.

If I wanted to export the 6 screens I listed above, I could name and arrange them like this:

Layers don't need to be visible to export them.

When you upload a PSD using artboards, we use the artboard name (not the PSD name) as the resulting screens' filenames. Screen filenames determine, upon upload of an image or source file, whether to update an existing screen (e.g. if the filename being uploaded matches an existing screen) or to create a new screen (if the filename being uploaded does not match an existing screen).

Creating global elements with the asterisk (or star)

The layer structure above will export those 6 screens just fine. But it’s not the most efficient way to structure your PSD because it would create a lot of duplicate elements, like the navigation bar.

We can cut the clutter by moving our navigation to the very top of the Layers panel and adding an * before the layer name.

Now “* Navigation” will appear on top every screen below it when the screens are exported.

That way, if you need to make a change to your navigation, you'll only have to do it once, instead of 6 times!

Note that you'll usually want an * on your background layer, too, unless each layer group has its own background layer.

Creating alternate screens with the ampersand

Now that we’ve simplified our layer structure with the * symbol, it’s time to simplify even further.

The two screens at the bottom of the layers panel—“+ Contact form focused” and “+ Contact form submitted”—are really just copies of “+ Contact” with some slight variations.

Instead of creating whole new screens for them, I can just add the slight variations as layer groups inside the “+ Contact” layer group, and place an & before them.

Note that & layers can only go one level deep, and must be inside a “+” layer group.

Now the layer group “+ Contact” will export three different screens:

  1. Contact
  2. Contact Form Focused
  3. Contact Form Submitted

Exporting individual assets

If you want to export an icon, photo, or other graphic into an Images folder, just add “.png” to the end of that layer. Note that layers or layer groups appended with .png must be nested within a + group in order for images to extract correctly to Assets > Images.

Getting your PSD into InVision

There are three ways to get your PSD file into InVision for automatic screen extraction.

  1. On the InVision website: Drag it into the Screens tab, just as if you were dragging normal image files into the uploader. We'll extract your screens, and move your PSD into the Assets > Source Files folder for that prototype.
  2. With InVision Sync: In a prototype folder, go to Assets > Source Files and move your PSD there. This way, your screens will update automatically every time you hit save.
  3. With Craft Sync: Please see how to use your PSD file with Craft Sync here. No layer symbols are required.

LayerSync and Artboards

LayerSync notation works slightly differently when used in conjunction with artboards in Photoshop. Since artboards have some inherently different behavior than layers, layer groups, and layer comps, some of the notations have no effect on the generated assets.

For example, artboards will already generate a single screen, so using + on the name of an artboard will not impact the output.

Additionally, using a + on a layer group within an artboard will not generate a second screen for that layer group. Instead, you should use the & layer if you need to generate alternate screens within a single artboard.

If you use .jpg or.png on artboard names, the PSD will fail to process. So that type of LayerSync notation should not be used on artboards themselves, and rather on things like Layer Groups in the artboard.

Finally, the * character won't work when using artboards since the contents of the artboard are already associated with a specific screen.