View all posts

Design File Syncing (.Psd, .Ai, .Sketch), Version Control & More!

We’ve completely revolutionized the InVision workflow

Now when you save your source files to InVision, we can extract individual screens automatically for use in your prototypes. We’ll also save out individual assets, Google web fonts, and provide you with a “save-by-save” version history of your design source files—Provided you’re using our desktop sync app.


Important Note: This set of features is currently in beta, if you run into any issues, please shoot us an email at support@invisionapp.com.

How to extract screens from source files

When you upload a source file to InVision (save your file to “Assets>Source Files” with InVision Sync or Dropbox), we’ll extract any screens or assets you want automatically, saving you the time and energy so you can move on to the important work ahead.

In order to take advantage of these powerful features, all you need is three basic symbols.

cheat-sheet


Want to try it out? Grab our demo PSD and upload it to InVision!

If you opt out of using symbols and design only one screen per source file, we’ll export a flattened version of your document(s) and bring it into the screens tab as well.

More about symbols

The ‘+’ symbol

Adding a plus symbol before any layer, layer group, or layer comp will mark it to be exported as an individual screen.

The ‘*’ symbol

Adding an asterisk symbol before any layer or layer group will mark it to be exported as a global element to be included on every screen (provided it’s at the top of all your layers). This symbol is really handy for nav bars, status bars, or any other persistent global elements.

The ‘&’ symbol

An ampersand symbol before a layer or layer group will export an alternate version of it’s parent screen with the “&” layer’s visibility turned on. (Ampersand symbols only work inside of other layer groups.) These are really helpful for smaller changes, like hover states, tooltips, dropdowns, and more.


What’s currently supported and what’s coming

Right now you can use the above symbols and syncing on:

Photoshop files:

  • Layer groups
  • Layer comps
  • Layers
  • Flattened document export

Sketch files: Get all the details here.

  • Pages
  • Artboards
  • Slices
  • Anything marked for export
  • Sketch doesn’t require symbols to work — more info here.

Illustrator files:

  • Flattened document export (no symbols yet)

Coming soon:

  • Sketch file syncing (launched)
  • Expanded support for Adobe Illustrator

Let us know your thoughts

As always, we want to know what you think! Drop us a line on twitter or shoot us an email with any questions at support@invisionapp.com.

Author

Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.