Framer Vocabulary
What do we call the big work area where you design?
Answer: Canvas
Create an iPhone Frame.
Answer: Press F → Select iPhone preset from the right sidebar.
Add a "Stack" to two text layers.
Answer: Select two items → Click "Stack" in the layout panel (or Right click → Add Stack).
Insert a standard Button.
Answer: Click Insert (+ button) → Forms/Basics → Drag in a Button.
Preview your website (Play Mode).
Answer: Click the "Play" (Triangle) icon in the top right.
What is the space inside a frame (cushion) around the content?
Answer: Padding
Create a circle and turn it into an oval/egg.
Draw Circle (O) → doubleclick and drag edge to stretch it.
Create a Stack and change the Stack from Horizontal (Row) to Vertical (Column).
Answer: Select Stack → Properties Panel → Direction arrow (↔ to ↕).
Create a new Component from a frame.
Answer: Right-click Frame → Create Component
Rename a Layer in the sidebar.
Answer: Double-click the layer name in the left "Layers" panel → Type name.
What is the specific term for the space/distance between two things?
Answer: Gap
Use the Pen Tool to draw a simple Triangle.
Answer: Press P → Click 3 times → Click the first point to close.
Add a 20px Gap between items. in the stack.
Answer: Select Stack → Gap setting → Type "20".
Insert a Navbar (Navigation Bar).
Answer: Insert → Navigation → Drag in a Navbar.
Switch between Light and Dark mode in the Insert menu.
Answer: Open Insert → Toggle the "Light / Dark" switch at the top.
What feature automatically arranges items in a row or column (similar to Auto Layout in Figma)?
Answer: Stack
Create a "Union" of two shapes.
Answer: Select 2 overlapping shapes → Top toolbar → Boolean Groups → Union.
Set a layer to "Absolute" position.
Answer: Select layer → Position Type → Change "Relative" to "Absolute".
Insert a YouTube video.
Answer: Insert → Media → YouTube → Paste URL.
Duplicate an element on the canvas.
Answer: Select element → Cmd/Ctrl + D (or Alt + Drag).
What do we call a reusable design element (when you edit one, all copies change)?
Answer: Component
Create a Row with 3 objects using Auto Layout.
Answer: Select 3 objects → Right Click → Add Auto Layout (Shift+A).
Make a frame "Fill" the width of its parent.
Answer: Select Frame → Width → Change "Fixed" to "Fill" (or 100%).
Add a Cursosr to a page
Answer: Select Cursosr → add
Publish the website.
Answer: Click the blue "Publish" button in the top right corner.