Importing and Migrating Content
Take your design files to the next level in Studio. Studio allows a 1:1 import of Sketch files. Alternatively, you can copy/paste from Sketch into Studio. Studio also supports SVG import, copy/paste styles, and copy/paste images. Additional formats will be supported over time.
Importing Sketch files
To import a Sketch file to Studio, at the bottom-right corner of the Studio launcher, click Open Studio or Sketch file (or use the keyboard shortcut: ⇧⌘O). Navigate to the file you want to import and click Open.
There are some features of Sketch 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 the article Studio compatibility with Sketch.
Copying and pasting from Sketch
To copy from Sketch, select the desired artboards, elements, or groups, 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 that have had their vectors manipulated are imported as paths rather than the shape they named inside of Sketch. Sketch keeps path points for all “shapes”; Studio does not.
Copying and pasting from Studio
Inside Studio, you can copy the following:
- Layers and artboards
- Pages
These objects can be pasted as layers to any Studio window. Additionally, a “snap” of the copied objects are put on the clipboard in the TIFF format. These can, in turn, be pasted to 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
- We copy and paste symbols and turn them into components.
- If you copy a symbol instance, we also bring over the symbol master.
- If you just copy a symbol master, we bring it over alone.
- One thing to note is that if you copy and paste the same symbol instance or symbol master repeatedly, we will continue making new component definitions from them, as there is no way to track which symbol was already imported and what was not.
- 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 including Photoshop, Illustrator, Figma, and others. This makes SVG ideal for importing vector content from these applications since Studio cannot import their file formats directly.
For help exporting to SVG from your design tool, see the following help documents for some of the more common design tools:
At this time, Studio only supports fills, borders and stop-color CSS styles, #id and .class CSS selectors for styling elements.