Importing » How to import

How to import

Importing is easy!

  1. Open your design in Photoshop or Sketch (or create a new design and save it)
  2. Create a new document in Framer
  3. Click the Import button (bottom left)
  4. Verify the name of the document (because you might have a few files open)
  5. Select the desired scale (Sketch only)
  6. Click ‘Import’

Importing from Figma works similarly, but the document doesn’t need to be open since your documents are saved on the Figma servers.

Importing a Sketch design in ‘retina’ resolution

Something like this will appear at the top of your document:

sketch = Framer.Importer.load("imported/iPhone home screen@2x", scale: 1)

You will see your design in the Preview Window, with the images already sliced and positioned.

This new variable, sketch, contains all the imported layers; it’s like a container for these layers.

As an example, if you had a ‘Messages’ group in Sketch it would now be accessible as sketch.Messages, and you could make this layer react to a tap:

sketch.Messages.onTap ->
    # Do stuff

You can change the name of the ‘sketch’ variable if you want:

sk = Framer.Importer.load("imported/iPhone home screen@2x", scale: 1)
sk.Messages.onTap ->
    # Do stuff