courses.pgbovine.net

Figma Lab 2

recreate Apple Music UI

Lecture video (mouse cursor a bit laggy):

(these notes are meant to accompany the live demo in lecture; they are NOT a replacement for the lecture's content.)

See Figma Lab 1 for a refresher on basic controls and keyboard shortcuts.

Setup

  • Open Figma desktop app
  • Create a new file

Watch out for ...

  • If you're not connected to the internet, Figma will NOT auto-save your project to your computer. You can manually select 'File' -> 'Save As .fig' to save it as a Figma file on your computer.

Step 1: create a new iPhone X frame

  • F for frame tool (remember keyboard shortcuts are all lowercase, so don't hold SHIFT)
  • right pane, select 'iPhone X'

Step 2: copy Apple Music components into your file

  • Open this Figma template file
    • (you can also open in Figma desktop app by copying this URL then doing 'File' -> 'Open File URL From Clipboard')
  • Select the screenshot and all components, then copy-paste them into your Figma file

Step 3: use screenshot as a translucent overlay

  • make a copy of screenshot and move it over your frame
    • it should now be a child layer inside your frame
  • make screenshot translucent: Layer -> Pass Through -> 50%
    • (don't apply this to the entire layer!)

Step 4: start from bottom UI layer with album art

When recreating a UI, it's good to work bottom-up. The bottom UI layer in Apple Music contains the album art and captions.

  • move the Somebody to Love and Lover components into frame
  • resize each to match size (hold SHIFT for proportional resize, 158px height)
  • adjust corner radius to match (4px)
  • make duplicate copies of both to use as bottom two albums, move down to y-position of around 710px (those will be covered up and blurred by the control panel, so it doesn't matter that they're duplicates)
  • add album art captions: Helvetica Neue 15px regular (or something close)
  • to get gray font color for artist names, go to Fill color then select the eyedropper tool (or 'Edit' -> 'Pick Color')
    • VERY IMPORTANT to point the eyedropper at your original screenshot (which is not translucent) or else you may get the wrong color due to opacity

The bottom of your frame should now look like this:

Step 5: create control panel layer

(you may need to hide your screenshot overlay to reduce clutter)

  • R for rectangle along bottom: 375x147, fill EAEAEA 80% opacity
  • make sure this layer is above the album art
  • set Effects -> Background Blur -> (click icon to the left) -> Blur 35 to get the blur effect

Step 6: create control panel components

  • move screenshot to the top so it's not covered or blurred out
  • drag all the relevant icons into place (there's no Radio icon so duplicate the Browse one to use in its place)
  • for Library icon, change its color using Fill -> eyedropper tool
    • VERY IMPORTANT to point the eyedropper at your original screenshot (which is not translucent) or else you may get the wrong color due to opacity
  • for icon captions, create text boxes and use CENTER ALIGN so that they can snap into place better under the icons (Helvetica Neue 10px regular)
  • L for line tool, draw a 0.5-pixel thin horizontal line above icons, use eyedropper to match color again
  • copy Somebody To Love album art again to put as the 'now playing' album, resize to 48x48, and add Effects -> Drop Shadow (default blur 4%)
  • 'Somebody To Love' now playing caption (Helvetica Neue 17px regular)

The bottom of your frame should now look like this:

Step 7: fill out rest of text and icons above the album art

  • this should be much more straightforward, so use remaining icons and text to match the rest of the UI
  • if you want to clean up your frame, you can create groups

Step 8: take a screenshot

Take a screenshot of your entire Figma app with all layers visible, then submit it to Google Forms:

  • mac: command-shift-3 (screenshot file appears on desktop)
  • windows: search for 'snipping tool' in start menu, set Mode to Full Screen, and then save your file

Recap of concepts we covered today

  • using translucent screenshot overlay to help recreate UIs
  • recreating a UI bottom-up
  • matching colors using eyedropper tool