BitWithBite
UI/UX Worksheet
🎨 Figma Interface
SCORE___ / 20
NameClassDate
After this worksheet you can
Identify frames & layersExplain the pen toolName boolean operationsExplain the inspect panel📚 Quick Recap
🎯 What you'll practice: The core Figma workspace tools you'll use in every project.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A frame in Figma acts as a:
2The layers panel shows:
3The pen tool is used to:
4Union, Subtract, Intersect, Exclude are:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The panel showing exact spacing/color/CSS values for handoff is the panel.
6The operation combines two shapes into one.
7Why would a designer use the pen tool instead of default shapes?
8Who typically uses the inspect panel, and why?
9Explain the difference between Union and Subtract boolean operations.
🚀 Section C · Challenge ● CHALLENGE 5
10Describe how you'd create a custom icon shape (e.g. a crescent moon) using boolean operations and basic shapes.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = inspect 6 = Union 7 = To draw custom, non-standard vector shapes that default rectangles/circles can't produce 8 = Developers, to get exact spacing/sizing/color/CSS values for implementation 9 = Union merges two shapes into one combined shape; Subtract removes the top shape's area from the shape beneath it | 10 = Draw two overlapping circles, then use Subtract to remove the smaller circle's area from the larger one, leaving a crescent shape.