Import / Export

Last updated 5 months ago

Import

Framer X supports the Sketch Plugin from Framer Studio. This means you can easily copy your artboards from Sketch and paste them in Framer X.

Here’s an overview of the specific features and tools included in this plugin:

Supported:

  • Artboards

  • Groups

  • Shapes

  • Text Layers

  • Paths

  • Boolean Operations

  • Symbols

Not yet supported:

  • Nested Symbols

  • Stroke Settings

  • Masked Layers

  • Image Fill

  • Radial / Angular Gradient

Export

This section covers exporting from Framer X. Export screens and assets to start developing your designs or copy CSS values for your next web design project.

Exporting works exactly as you’d expect. You can create multiple exports for a single frame or shape to cater to multiple resolutions. Simply select a layer and hit export in the bottom right corner of Framer. Select one of the pre-made presets or add your own. Adding a suffix to the preset will append this to your file name. Clicking the suffix dropdown allows you to save assets to organized folders.

You can export your Frames to:

  • PNG

  • JPG

  • WEBP

  • PDF

You can also copy the CSS code from your Frame directly.

CSS & SVG Exporting

Right-click a layer and select Copy CSS to copy the CSS values or Copy SVG to copy the SVG values of the selected layer to your clipboard. Then paste perfectly formatted CSS or SVG code directly in your favorite editor to speed up your development workflow.

Quick Exporting

Framer X allows for quick exporting just by right-clicking on a layer. Select Copy Image or hit +C to copy the selected item to your clipboard. You can paste to any app that supports pasting images, easily add your exports to documents, create quick mocks, or gather feedback in chat apps.

Exporting Presets

Framer has a few pre-loaded exporting presets. The iOS and Android presets contain all of the platform-specific sizes you’ll need for development. You can always add your own custom preset by hitting the + icon in the export panel.

iOS Size Presets:

1x 2x 3x

Android Size Presets

1x 1.5x 2x 3x 4x