courses.pgbovine.net

Figma Lab 3

components and constraints

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.


Other useful resources:

Figma blog posts:

Official Figma tutorial videos:

Our goal is to start replicating component-based UIs like those seen in messaging apps:

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: copy images into your file

  • Open this Figma file
    • (you can also open in Figma desktop app by copying this URL then doing 'File' -> 'Open File URL From Clipboard')
  • Select everything and copy-paste into your Figma file

Step 2: create a new frame and add text/images to it

  • create a new 375x76 frame
  • add blank profile image to left
  • add the > image to upper right
  • add time text to upper right Helvetica Neue 15 regular, 8C8C8C color
  • add title text Helvetica Neue 17 bold, black color
  • add message text Helvetica Neue 15 regular, 8C8C8C color

Step 3: turn your frame into a component

  • select the entire frame
  • click the four-diamonds icon in the upper middle bar to turn it into a component

  • now you should see it outlined in purple
  • rename your component to "Person"

Step 4: create 3 instances of your component

  • select Person component
  • copy it (command/ctrl C)
  • paste (command/ctrl V)
  • drag the pasted item away from original
  • paste it twice more and drag so you have 3 instances
  • in the layers pane, each instance has a hollow diamond icon, whereas the original component has four filled diamonds

Step 5: edit your component and see what happens to instances

  • e.g., resize the entire component, move elements around inside of it, change the text contents, change text styles

Step 6: add constraints to objects inside of the component

(do this to the Person component itself, not to the individual instances)

  • profile photo constraints: horizontal left, vertical center
  • title text: horizontal left, vertical top
  • message text: horizontal left & right, vertical top
  • time text: horizontal right, vertical top
  • > image: horizontal right, vertical top
  • with these constraints set, now resize your component and see what happens to the objects inside of it

Step 7: edit your individual instances to override the component's defaults

  • change the title, message, and time text
  • change the profile photo in each of the 3 instances by copying the properties of each profile photo ('Copy Properties'), selecting the target object in the instance, and doing 'Paste Properties' (if you try to copy/paste the whole image, it may just create a new image)
  • resize your component and now see what happens to the instances

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

  • components
  • instances
  • layout constraints