×

Craft Sync for Photoshop

Note: Before using Craft Sync, you must install Craft Manager and enable the Craft tools in Photoshop.

To begin using Craft Sync for Photoshop, click the Sync icon (craft-sync-icon.png), and then click Sign in to InVision. Enter your InVision credentials and click Sign in.

sync-sign-in.gif

Note: If you are part of an Enterprise plan, click the Enterprise sign in option and enter your team domain, followed by your email and password.

Syncing prototypes

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

Note: In order to sync your project to InVision, your layers must exist on artboards. Read more about how to use artboards in Photoshop.

Syncing to a new prototype

To sync screens to a new prototype:

  1. Click the sync icon (craft-sync-icon.png), and then click Create or select a prototype.
  2. Click Create Prototype +.
  3. Enter the new prototype name, select the account you want to use, and click Create prototype.
    Note: You cannot use the name of a pre-existing prototype when creating a new prototype.
  4. Choose your artboard pixel density (1x or 2x).
  5. Choose whether you want to sync all artboards in the document or only selected artboards.
  6. Click Sync to InVision.

syncing-new-prototype.gif

Syncing to an existing prototype

If you have previously synced your document, the Sync tool will default to the last prototype the document synced to. You can change this at any time by opening the tool and clicking the current prototype name. You can then choose a different existing prototype, or you can create a new one.

When syncing, you’ll have access to prototypes from your personal and Enterprise accounts. You’ll also have access to prototypes on which you are a contributor or collaborator.

Screens are only updated when the artboard name matches the filename for the screen in InVision. Screen replacement when renaming an artboard is not supported.

Stopping an active sync

Stop an active sync by hovering over the sync circle progress indicator in the tool'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.

stopping-active-sync.png

Opening and sharing a prototype

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 and the time when your prototype was last synced. To go directly to your prototype dashboard in InVision, click Open. To copy a public share link to your clipboard, click the share icon (craft-sync-share-icon.png).

craft-sync-open-share.png

Generating assets

With Craft Sync for Photoshop, you can generate assets for export. For the layer you want to export, add one of the following extensions to the end of the layer name:

  • .png
  • .gif
  • .jpg

All layer assets are exported at 1x by default. If you want to export the layer at 2x, add “@2x” to the end of the layer name (for example, “layer-name@2x.png”). Afterwards, sync your prototype.

generate-2x-assets-photoshop__1_.png

Note: If you want to remove an asset from your synced prototype, delete the file extension from the layer name and sync again.

After syncing your prototype to InVision, you will be able to access and download the assets through Inspect.

Setting pixel density

Selecting the pixel density will determine at what density an artboard is exported. For example, If you select 2x, an artboard that is 500x500 pixels will be exported and uploaded at twice the size (1000x1000 pixels). Selecting 1x will export and upload the artboard at its original size.

Note: In Photoshop and Inspect, artboards will still display at the original size. However, when you export the prototype from InVision, the artboard size will match the set pixel density.

Signing out

To sign out of Craft Sync, open the Sync tool and click the gear icon (craft-sync-gear-icon.png). Click Logout.

On this same page, you can also submit feedback to our team by clicking Get in touch.


Getting Started: Craft (
)

Craft Sync for Photoshop

Prev