courses.pgbovine.net

Figma Lab 1

create an alert box

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

Setup and basic controls

  • Open Figma desktop app
  • Create a new file

Editor GUI components:

  • main center window = canvas showing the current page (every file starts with 1 page, but you can make multiple pages)
  • upper left menu = tools to create and manipulate objects
  • left layers pane = all your objects, organized into layers
  • upper right = zoom controls
  • right properties pane = properties of selected object(s)

Basic keyboard shortcuts (shown as uppercase here for clarity but when you press it should be lowercase, so don't hold SHIFT key):

  • F = frame (e.g., a new iPhone screen)
  • R = rectangle
  • L = line
  • T = text box
  • O = oval (or circle)
  • V = back to the default select/move tool

Advanced keyboard shortcuts:

  • hold SHIFT and click to select multiple objects
  • while you're moving/resizing an object, hold SHIFT to make it align to 45/90 degrees or to make a square or circle
  • hold COMMAND (mac) or CTRL (windows) and click to select objects within a group
  • use + and - to zoom in/out (no need to hold SHIFT for +)

Trackpad shortcuts:

  • two-finger drag - move around on the canvas
  • two-finger pinch in/out - zoom in/out
  • with a mouse, COMMAND/CTRL + scroll wheel to zoom
  • right-click - bring up a pop-up menu
  • double-click on object - enter drawing mode (if you accidentally do this and get confused, press ESC to get out of drawing mode)
  • double-click on text in left layers pane - rename this layer

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.

More info:


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'

(If you've used Sketch, a frame is an artboard in Sketch.)

Step 2: create the main alert box

  • R for rectangle tool (notice how cursor changes shape)
  • drag out a rectangle near the middle of frame
  • size: 270 x 180
  • corner radius: 16 (corner icon in right pane)
  • fill color: F2F2F2

Step 3: create the inner white box

  • R for rectangle
  • drag a rectangle near middle
  • size: 240 x 27
  • corner radius: 6
  • fill color: FFFFFF
  • stroke color: 3C3C43, 30% opacity
  • stroke width: 0.5

Step 4: add text

  • T for text tool
  • drag a text box near top and label 'A Short Title is Best'
  • font: Helvetica Neue (mac); if you don't have this font, choose any similar one
  • 17 point font size
  • Medium for font weight
  • center align

copy-paste to create other text boxes:

  • copy and paste that text box, then move it down a bit
  • label it 'A message should be a short complete sentence'
  • change font size to 13
  • copy-paste that one and move it into the white text box
  • label it 'Placeholder'
  • copy-paste again and label 'Cancel'
    • font size: 17
    • fill color: click the four-dots icon and select 'BLUE 1' as the style color
  • copy-paste again and label 'Action'
  • finally, select the 'Cancel' text box and set its font weight to Regular, which is a bit lighter than Medium.

(Note that to edit an existing piece of text, you need to press T to get into text mode, then select a text box. Otherwise it just selects the box to resize/move it.)

Step 5: create a group

  • use SHIFT-click to select 'A Short Title is Best' and 'A message should be a short complete sentence' text boxes
    • you can select from left layers pane or directly in the canvas
  • right-click and choose 'Group Selection'
  • double-click the group in left layers pane and rename it 'alert message'

Now you have a group, so you can move / modify those elements together at once. To select an individual object within a group, hold COMMAND (mac) / CTRL (windows) and click, or choose it from the left layers pane.

Step 6: add lines

  • L for line tool
  • create a short vertical line next to 'Placeholder' to represent a text cursor
  • use SHIFT and drag to ensure the line is perfectly vertical
  • color: use 'BLUE 1' style from four-dots menu
  • width: 2
  • copy-paste to make a horizontal line separator below the text box
  • stroke color: 3C3C43, 30% opacity
  • width: 1
  • copy-paste again and move/rotate it to make a vertical line separator

Remember that holding SHIFT and the red centering guides are your friends!

Step 7: create final group

  • drag to select everything in the frame, right click, and 'Group Selection' to create a big group for all of your objects
  • double-click that single group in left layers pane and rename it 'alert box'

Now expand both the 'alert box' group and the 'alert message' group within it so that you can see ALL of the objects.

Step 8: take a screenshot

Take a screenshot of your entire Figma app with all groups and the alert box 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

  • frames (called an artboard in Sketch and other tools)
  • layers (each layer holds one object that can be either a shape, text, or group of objects)
  • rectangles
  • lines
  • text boxes
  • groups