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.
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.
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