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/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”).
Earlier, all objects drawn in Design simply became layers, but since Version 107 we now have Frames and Shapes.
- 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
For more info, see this Framer Help article.
Let’s zoom in and start with 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
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 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
The border radius seems to be ±
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).
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 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
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
Name the frame
Mini Album Cover.
We need a separate frame for the player’s background. Later, you’ll see why.
Its background should be
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.
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.
Now we can select all objects, do ⌘↩ “Add Frame,” and name the new encompassing frame
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 Album Cover
Mini Button Pause
Mini Button Play
Mini 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