Event card1080 × 1350
Design Night
Bring a sketchbook. We'll redesign a bus ticket together.
RSVP- 1. Tune
- 2. Generate
- 3. Judge
This card is broken. Fix it.
Read the brief, then use the design panel. When all five checks turn green, ask AI for versions.
Frame
In Figma
Press F to draw a frame, then pick a preset size such as Instagram post in the right panel. Frames are your artboards.
Format
Image
In Figma
Drag an image onto a shape to fill it with the photo. Corner radius is in the Design panel, next to the size.
Show
Overlay
Caption
Layout
In Figma
Auto layout (Shift + A) sets padding and the gap between items, so spacing stays even when the content changes.
Align
Text
In Figma
Press T to add text. Save fonts and sizes as text styles so every screen in the file stays consistent.
Font
Text color
Fill
In Figma
Fill is the colour of a layer. Click the swatch to paste a hex code. Check text contrast with a plugin such as Stark.
Background
Button
- Hierarchy
- Contrast 1.7:1
- RSVP stands out
- Room
- Nested corners
- Fits the frame ok
Turn all five checks green first.
Figma basics you'll use every day
The same moves you just used, as real Figma shortcuts. Try them when you open Figma for Unit 1.
- F
Frame
Draw a frame (an artboard). Pick a preset size in the right panel.
- T
Text
Add text. Change font, size and line height in the Design panel.
- RO
Rectangle and ellipse
Draw basic shapes. Hold Shift to keep them square or round.
- ShiftA
Auto layout
Stack items with padding and gaps that stay even as content changes.
- Ctrl/⌘D
Duplicate
Copy a layer in place, then move it. The fastest way to make variations.
- Alt
Measure
Select a layer and hold Alt (Option) to see the distance to anything you hover.
- Ctrl/⌘AltK
Component
Turn a layer into a reusable component, like a button you use everywhere.
- Shift1
Zoom to fit
See everything on the canvas at once. Shift 0 goes back to 100%.