Drawing the mini-player in Framer Design
When you drag the “Now Playing” screen downwards, it should transition to a small mini-player just above the Tab Bar.
That mini-player is not in our Sketch file. It’s simple, though: a transparent background with a mini version of the album art, the song title, and a few buttons.
So… code break! Type ⌘1 to switch to Design.
Your Design screen will still be empty. Start by adding an ‘Apple iPhone 8’ frame.
As a template for the correct dimensions and position, I made a screenshot that you can find here. Just drag it to the frame.
It comes with an added “Play” button because we’ll need one of those as well.
It’ll be too big because of its retina resolution, but, just as in Sketch (or Framer Code), you can use calculations in the property fields. So by changing its width of 750 to 750/2 it will assume the correct size.
It’s best to lock the template, so that you can’t accidentally move it. Select it and type ⌘L (or right-click it and select “Lock”).
Frames vs. Shapes
Earlier, all objects drawn in Design simply became layers, but since Version 107 we now have Frames and Shapes.
In short:
- Shapes are for precise drawing — Frames are for layout
- Only Frames can have layout constraints
- Frames are just layers in code land, but Shapes are something new: SVGLayers
- Or in HTML speak: Frames are
<div>elements, and Shapes<svg>elements
Let’s zoom in and start with the “Play” button.
The “Play” button
We need a triangle. You can use the Polygon tool, make a three-sided polygon, and rotate it, but it’s probably easier to go straight for the Path tool. It’ll give you more control. (You can also make a polygon, double-click it to turn it into a path, and then make corrections.)
Give the triangle a black fill.
The triangle alone would make for a tiny and not easily tappable button, so we’ll make it bigger by drawing a square on top of it. (Now you see why I added those blue outlines to the template.)
Draw a Frame that follows the blue outline. It should be 40 points.
Because it’s bigger (and also because it’s not a Shape or Path) it will automatically become the parent of the triangle, which is exactly what we want.
Change its name to Mini Button Play, and make it transparent by switching off its Fill.
The “Pause” button
The “Pause” button is easy: two rectangles with a bit of border radius.
You could make them with the Frame tool, but it’s better to use the Rectangle tool, because a Shape can be positioned on sub-point values. You’ll notice that the correct y-position for the rectangles will be 576.5 points.
The border radius seems to be ± 1 point.
Just like with the “Play” button we make the tappable area bigger by drawing a frame on top of it, which we’ll name Mini Button Pause (and also make transparent by switching off its Fill).
The “Next” button
Two triangles. You can ⌘D duplicate the “Play” triangle to have something to start from.
We will not actually use this button in our prototype, but we can clean things up a bit by selecting these two and typing ⌘↩ to put them in a parent frame …
… which we‘ll name Mini Button Next.
The track name
The title of the song is in Apple’s SF Pro Text (or SF UI Text) with a Regular weight, 17 points big, and with a letter spacing of -0.4.
The album art
When transitioning from the “Now Playing” screen to the mini-player the big album cover will shrink, so we actually don’t need album art on the mini-player. But by drawing it here in Design, we’ll have the correct position and shadow at our disposal in Code.
The album art image is 48 points square and has a border radius of 3 points. You can simply draw a frame and leave it in the default transparent blue. (We’ll hide it afterwards anyway.)
Its shadow should be 30% black, with a y-offset of 3 points and a blur of 10 points.
Name the frame Mini Album Cover.
The mini-player’s background
We need a separate frame for the player’s background. Later, you’ll see why.
Its background should be 375 by 64 points, and its color is a very light off-white, #F6F6F6, that is 50% opaque. Name it Mini Player Background.
Mini Player Background probably just became the parent of all other objects, so it’s best to select its children in the layer list and drag them out again.
Line at the top
The mini-player has a thin line at the top. You could draw one with the Path tool, but it’s easier to just give Mini Player Background a top border. It should be 0.5 points thick and have #AEAEAE as its color.
The “Mini Player” parent layer
Now we can select all objects, do ⌘↩ “Add Frame,” and name the new encompassing frame Mini Player.
Setting Targets
We need to set targets for the Frames that we want to use in Code. Give the following ones a target by clicking their little circle:
Mini PlayerMini Album CoverMini Button PauseMini Button PlayMini Button Background
Your layer list should now look more or less like this:
All set. We don’t need the template anymore so we can make Mini player.png invisible by right-clicking it and selecting “Hide” (⌘;).
We also don’t need the (default) white background of the Apple iPhone 8 frame, so we set the opacity of its Fill to 0%.
