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.
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.
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:
- Layer groups
- Layer comps
- Flattened document export
Sketch files: Get all the details here.
- Anything marked for export
- Sketch doesn’t require symbols to work — more info here.
- Flattened document export (no symbols yet)
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 firstname.lastname@example.org.