Craft Sync: Designs Sync with Lightning Speed Right from Your Native Design Environment

As designers, we are constantly experimenting with processes to find what works best for us. We try our best to improve the workflow for our teams, because more efficient processes result in products getting built and shipped faster.

Design process is inevitably linked to the tools we use. Some of these tools are so good that they become habit-forming products that people love. One of them is Craft by InVision.

In this article we’ll see what Craft is and how it helps close the gap between design and prototyping, and focus on Craft Sync, which is a fast, simple way to send designs straight to InVision.

What is Craft?

Craft is a free plugin suite for Sketch and Photoshop that lets you design with real data in real time. Since its launch, Craft has brought more than just speed and data to your designs-it’s revolutionizing the screen design workflow for designers everywhere.


Craft is a must-have for every designer’s toolbox.

Craft consists of the following tools:

Data

Data lets you design with real data faster than ever. No more copy and pasting or lorem ipsum – you can add real unique content with just a few clicks. Just a few examples here:

  • You can drop in some randomly generated user names:


Fill your design with custom names – just select a few bits of text and click ‘Names.’

  • Save time by dropping a placeholder photo from Unsplash (a public domain library of images), from Dropbox or from your local files.


Fill you design with beautiful images.

  • Or pull in content from real websites – such as text and images that are relevant for your designs:


The Web plugin lets you grab photos and text from any site you want.

Library

Library – cloud-connected design assets, which gives you control and consistency in your design process. Library elements can be anything including text styles, icons, UI elements, or even custom-designed logos.


You can build collaborative design libraries with everything your team needs to work efficiently.

The coolest thing is, Library support design changes. If you’re working in a team environment, this feature is crucial for your team. Design properties tend to change over time, and design specs are always changing on new projects. Library gives your design team a consistent set of elements to use without manually updating changes. For example, you can change a color and resync it to the Library and everyone on your team has the latest data.


You can change the color and resync it to the Library. When the team gets an update, the color change will be made everywhere in the design.

Library also makes it possible to build comprehensive style guides with one click. From here, you can change any colors, fonts and text styles globally. Your design changes are in the cloud – so just change and sync.


You can add colors and text styles to your shared Library – it lets you fill anything from brand colors or adjusting types when needed.

Duplicate

Duplicate – your way to effortlessly clone assets. It lets you quickly duplicate anything on your artboard – vertically, horizontally or both at the same time. Just make your selection and type the number of times you’d like to duplicate.

Duplicating content will create a new layer of content in your Layers panel called Duplicate control.

If you ever want to change spacing or the number of duplicates, just select this layer and make all required changes.

Prototype

Craft Prototype allows you to create a rapid prototype inside Sketch. Without leaving the app it allows you to preview the app on your phone. It also keeps access to the native iOS components like a camera or keyboard.


Design and prototype in the same space.

Sync

Last but not least in our list is Craft Sync, which bridges design and prototyping environments by allowing designers to send their artboards to InVision with just one click.

Sync With One Click From Your Native Design Environment

Syncing your design files should be drop-dead simple and lightning fast. Craft Sync makes it possible. With Craft Sync, you never have to leave your native design environment to send your designs to InVision, and it lets you send your designs instantly – without dragging and dropping of files, changing artboard names or exporting. Less extra actions means less mistakes, and less mistakes means less frustration.

Configuring and using Craft Sync is as simple as one, two, three.

One: Choose The Design Environment That Works Best For You

Craft Sync gives you freedom of choice – you can choose to use Sketch or Photoshop, Mac or Windows. No matter what environment you choose, it will still be a simpler, easier workflow.

Two: Setup Plugin

For Macs, you’ll need Craft Manager in order to use the Craft plugins. In Sketch or Photoshop for Mac, click the Sync icon and enter your InVision login credentials, then click Sign in to InVision.

For Windows, you’ll need to download the Craft Sync Windows Installer in order to use Craft Sync. To open the plugin, in Photoshop go to Windows > Extensions > Sync (Beta). The first time you relaunch Photoshop, it may take up to one minute before the Sync displays in the panel.

Once you’re logged in, you can start syncing your Sketch or Photoshop screens to your InVision prototype(s).

Three: Sync To InVision

If you want to sync screens to a prototype, first create a prototype at InVision. Syncing to existing prototypes is “click, sync, and done” simple:

  • 1. Select your screens in Sketch or Photoshop

  • 2. Choose the prototype you want to sync and click Sync to InVision

That’s it! You’ve imported all of your screens into InVision!

Accelerate Your Design-To-Prototyping Workflow

The Craft Sync plugin makes your workflow much faster:

Send Sketch / Photoshop Artboards to InVision With a Single Click

Craft Sync is the most effortless way to send Sketch and Photoshop designs to InVision. Select which prototype you’d like to sync your screens to by choosing your prototype from the list, or use the search field to find it by name. Once you’ve selected your prototype, you can click Sync to InVision.

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, when your prototype was last synced. You can click an Open button to go directly to your prototype dashboard in InVision.

Best of all, Sync makes updating your design in InVision magically fast.

Choose Any Prototype To Sync To

When choosing a prototype to sync to, you’ll see your unarchived prototypes from both personal and Enterprise InVision accounts. You also have access to prototypes you’ve been given Contributor/Collaborator access.

A small but helpful tip for the selected prototype: If you have synced from the active document before, the plugin will default to the last prototype you synced to.

Take Complete Control of What Gets Uploaded and When it Gets Uploaded

Sync gives you complete control of what gets uploaded and when it gets uploaded, so nobody sees anything before you want them to. You can sync just a selected artboard or sync everything at once – whatever works for you.


Craft Sync for Sketch. If you chose Only selected artboards, select which artboards you want to sync

Customize Your Export Pixel Density

You can select the export pixel density (1x or 2x) from the project selector screen. Selecting a density will export the artboard at the selected density.

In Sketch, click the cogwheel at the top right of your Craft Sync plugin to open the settings modal. From here, you’ll be able to change the export density of your screens. If 2x is selected, a 500×500 artboard will be exported and uploaded at twice the size (1000×1000), but displayed in your prototype at 500×500.


Craft Sync for Sketch: export pixel density

When using Craft Sync for Photoshop, you can select export pixel density from the main Craft Sync screen. There’s a difference between Sketch and Photoshop for this feature – Sketch’s density setting will up-res the image and Photoshop’s density setting just allows you to define at what density you designed the artboard.


Craft Sync for Photoshop: export pixel density.

Track Visual History of Design Progress

Great design is an iterative process. You’re constantly making changes, refining your design until it’s just right.

Have you ever been in a situation when you’re on the most recent version of your work when you realize the version you did last month is really the way to go? Hopefully, you don’t ever have to dig through old files on your computer or Dropbox. InVision stores every version of your design.

After each sync, Craft Sync updates your design versions, which helps InVision keep a visual history of your design progress. You have the full story of how your design has progressed over the life of your project right in InVision.


Each version of the design is separated by dates uploaded. Clicking on the dates will move you between versions.

Make Design Handoff Easy

No matter how much prep work you do, the handoff from design to development is a complex process. Traditionally designers try to ease the handoff with style guides, which are usually created manually. It’s time to say no to clunky, difficult-to-understand, flat specifications that take forever to generate. If you really want to save a designer’s time, just tell them to forget about that and focus on the actual design process instead.

Thankfully, InVision tools exist out there to help with this. Sync is a perfect companion for the designs you share with developers with Inspect, since all screens sent to InVision with Craft Sync for Sketch are compatible with Inspect. Any layer marked as exportable in Sketch will be available within Inspect and in the Assets tab.

Inspect by InVision is a developer’s best friend. Using Inspect your team gets access to measurements, colors, and assets from a designer’s prototype. Now your team can create stylesheets, get pixel perfect comps, discuss design challenges, export assets adaptively, and generate real code for any design element. No more long email threads and endless rounds of revision!


Inspect gives your team access to measurements, colors, and assets from a designer’s prototype.

What Craft Sync Can Do Better

Craft Sync is a really magical tool, but there are still a few things that can be improved:

  • Artboard Names: If an artboard is renamed, it’s currently treated as an entirely new screen. You will need to delete your screen in InVision with the old name. It would be much better if Craft Sync just updates the screen name in InVision and replace the screen.
  • Order For Screens: Screens uploaded via Craft Sync show up in the order they are uploaded. However, it’s much better to map the order of the artboards to the InVision prototypes.
  • Sharing: The current build does not make a share link available directly from Craft Sync.
  • Single Sign-on: Enterprise accounts with single sign-on (SSO) enabled won’t be able to use Sync at this time.
  • Unsyncing: There is currently no way to unsync screens sent to a prototype. You would need to overwrite them manually or delete them in your InVision prototype dashboard.

Conclusion

Craft supercharges the screen design workflow. And Craft Sync takes it a step further by bringing your design environment in InVision together like never before. These free tools allows teams to spend more time on what’s important: creating beautiful and functional designs and giving users the best experience possible.

Comments

  • Zach Bishop

    Does anybody know how you can mark a layer as exportable in Photoshop? So its available as a downloadable asset within inspect? Or is this perhaps still on the way?

    Thanks

  • Bilal

    I’m also still looking for an answer, if you got any information please let me know :(

  • fidhaz

    Me too :)