Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Importing and Migrating Content

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.

studio-import-sketch-file.gif

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:

  • Blending
  • Opacity
  • Corner radius
  • Fills
  • Borders
  • Shadows
  • Inner shadows
  • Text
  • Attributes
  • Size
  • Weight
  • Font
  • Letter-spacing
  • Line-height
  • Color
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:

  • Layers
  • Groups
  • Containers
  • Components
  • Artboards

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:

  • Symbols
  • Plain text
  • 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:

  • Symbols:
    • 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.

import-svg-to-studio.gif

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.

Learn something new

Getting Started Guides