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
Editor GUI components:
Basic keyboard shortcuts (shown as uppercase here for clarity but when you press it should be lowercase, so don't hold SHIFT key):
Advanced keyboard shortcuts:
Watch out for ...
Step 1: create a new iPhone X frame
(If you've used Sketch, a frame is an artboard in Sketch.)
Step 2: create the main alert box
Step 3: create the inner white box
Step 4: add text
copy-paste to create other text boxes:
(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
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
Remember that holding SHIFT and the red centering guides are your friends!
Step 7: create final group
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:
Recap of concepts we covered today