Take your design files to the next level in Studio. Studio allows a 1:1 import of Sketch files, or you can copy/paste files from Sketch. Studio also supports SVG import, copy/paste styles, and copy/paste images.
Importing Sketch files
To import a Sketch file to Studio, navigate to the top-right of the Studio launcher and click Open (or use the keyboard shortcut: ⇧⌘O). Locate the file you want to import and click Open. Alternatively, you can double click any of the recent files listed in the Studio launcher.
There are some Sketch features that don’t directly translate to Studio. As a result, you may see subtle differences between your original Sketch document and the imported version in Studio. For a list of those differences, check out this article: Studio compatibility with Sketch
Copying and pasting from Sketch
To copy from Sketch, select the desired layers, groups, or artboards, and use the shortcut ⌘C. You can then paste into Studio using the shortcut ⌘V.
Everything in the Sketch inspector besides the position and interactions palettes will be copied, including:
Layers with manipulated vectors are imported as paths rather than their named shape in Sketch. Sketch keeps path points for all “shapes”; Studio does not.
Copying and pasting from Studio
In Studio, you can copy the following:
These objects can be pasted into any Studio window. When copied, an object is also added to your clipboard in a TIFF format. You can then paste these objects into programs like Freehand and Sketch.
Copying and pasting from other applications
Studio also supports pasting other types of objects:
Image types such as JPGs, PNGs, and BMPs
When pasting or importing images into Studio, make sure that your images are no larger than 4096 pixels on any side. If they are, first resize the images.
When these objects are pasted, they are converted to the following types in Studio:
Pasted symbols are imported as components.
If you copy a symbol instance, Studio also brings over the symbol master.
If you copy just a symbol master, Studio brings it over alone.
If you copy and paste the same symbol instance or symbol master repeatedly, Studio will continue making new component definitions for each.
Rasterized images (JPGs, etc.): These are imported as images.
Plain text: Text is imported without formatting.
Importing SVG files
SVG is a common vector file format that can be exported by many different design tools like Photoshop, Illustrator, and Figma. Since Studio cannot import their file formats directly, SVG is ideal for importing vector content from these applications.
To import an SVG file to Studio, drag and drop the file into your Studio document.
If you're unsure how to export SVG files from your current design tool, we recommend reaching out to their support team. If you're having trouble exporting or importing SVG files using Studio, please contact InVision Support.
For styling elements, Studio currently only supports fills, borders, and stop-color CSS styles, as well as #id and .class CSS selectors.