Apple Music » Importing the Sketch file

Importing the Sketch file

This Sketch file contains the screens we’ll need.

By the way, I used the newer SF Pro fonts in this file.

It contains five artboards:

The screen for the “Library” tab (also includes the Status Bar and Tab Bar)
The screen for the “For You” tab
An artboard with a second card for the “For You” screen: Favourites Mix
And another one with a third card: Chill Mix
The “Now Playing” screen

The Library screen is actually a lot higher. Its list of “Recently Added” albums is masked and can be found on the “Symbols” page.

I did this to make it easier to edit the albums. And I did the same with the “Recently Played” albums on the “For You” screen.

The “Symbols” page in the Sketch file, with the Recently Added albums for “Library” and Recently Played albums for “For You”

Let’s start!

Create a new Framer project, save it (naming it “Apple Music,” maybe), and import the Sketch file.

The design is made at 1x, which means the iPhone 8 screens measure 375 x 667 interface points. But importing into Framer at @2x will render them at 750 x 1334 pixels.

Importing the Sketch file at 2x retina resolution, changing the device frame to ‘iPhone 8’, and shortening ‘sketch’ to ‘$’

You’ll now have this line at the top of your project:

sketch = Framer.Importer.load("imported/Apple%20Music@2x", scale: 1)

By renaming the sketch variable to $ we’ll have to type less in the next steps …

$ = Framer.Importer.load("imported/Apple%20Music@2x", scale: 1)

… because we can now write, for example, $.Status_Bar instead of sketch.Status_Bar.