×

Craft Sync for Photoshop

Note: Before using Craft Sync, you must install Craft Manager and enable the Craft plugins 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 (h3)

If you have previously synced your document, the Sync plugin will default to the last prototype the document synced to. You can change this at any time by opening the plugin 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 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.

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

Setting pixel density

Selecting the pixel density will determine at what density an artboard is exported. For example, If 2x is selected, 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 plugin 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