Figma Shapes and Pen Tool
Shapes form the building blocks of every design in Figma. Buttons, icons, cards, and illustrations all start as basic shapes. The pen tool lets you draw any custom shape that the basic tools cannot produce.
Basic Shape Tools
Figma provides six built-in shapes accessible from the toolbar or keyboard shortcuts.
- Rectangle (R) – Draws squares and rectangles.
- Ellipse (O) – Draws circles and ovals.
- Line (L) – Draws straight lines.
- Arrow (Shift + L) – Draws a line with an arrowhead.
- Polygon – Draws triangles, pentagons, hexagons (set the number of sides).
- Star – Draws stars (control the number of points and inner radius).
To draw any shape, select its tool, then click and drag on the canvas. Hold Shift while dragging to constrain the shape to equal proportions — a perfect circle or a perfect square.
Shape Properties in the Right Panel
When you select a shape, the right panel shows its editable properties.
Rectangle Selected ------------------------------ X: 40 Y: 60 W: 200 H: 80 ------------------------------ Corner Radius: [0] [0] [0] [0] (top-left, top-right, bottom-right, bottom-left) ------------------------------ Fill: [solid color or gradient] Stroke: [width + position + color] Effects: [shadow, blur] ------------------------------
Corner Radius
The corner radius rounds the corners of a rectangle. A radius of 0 produces sharp corners. A radius of 8 produces the slightly rounded corners common on buttons and cards. Clicking the radius icon switches between all-equal and individual-corner control.
Stroke Settings
Strokes draw an outline around a shape. Set the stroke width in pixels and choose whether it sits inside, outside, or centered on the shape's edge. The inside option is most predictable — it does not change the shape's outer dimensions.
The Pen Tool
The pen tool draws custom vector paths. A path consists of anchor points connected by straight or curved lines.
How Anchor Points Work
Anchor point = dot (corner or curve control) Path segment = the line between two anchor points Example: Drawing a triangle Click → Point A (top) Click → Point B (bottom-left) Click → Point C (bottom-right) Click → Point A again to close the path Result: A triangle shape
Straight Lines vs Curves
Click to place a corner anchor point — this creates straight line segments. Click and drag to place a curve anchor point — this creates a smooth, curved segment (called a Bezier curve). The direction and length of the drag handle controls the shape of the curve.
Bezier Curve Controls:
Handle ←→ Handle
|
Anchor Point
(dragging handle adjusts curve direction)
Editing Shapes with Vector Edit Mode
Double-click any shape (rectangle, ellipse, or custom path) to enter Vector Edit Mode. In this mode, you can:
- Move individual anchor points
- Add new anchor points by clicking on a path segment
- Delete anchor points by selecting them and pressing Delete
- Change a corner anchor to a smooth curve by selecting it and clicking the curve icon in the toolbar
Press Esc or click outside the shape to exit vector edit mode.
Boolean Operations
Boolean operations combine two or more shapes into one. Select two overlapping shapes, then choose a boolean operation from the toolbar dropdown (the icon shows overlapping circles).
Two shapes: Circle (A) + Rectangle (B) Union → Merges both into one outline Subtract → Removes B from A Intersect → Keeps only the overlapping area Exclude → Keeps everything except the overlapping area Visual Example (Union): A = Circle B = Rectangle ⬤ overlaps ▬ Result: One combined shape outline
Flattening Paths
After a boolean operation, Figma keeps the original shapes as editable sub-layers. Press Ctrl/Cmd + E to flatten them into a single, non-editable path. Flatten only when you are certain you no longer need to adjust the individual shapes.
Practical Example: Drawing a Notification Icon
- Draw a circle (O) — 24 × 24 pixels.
- Draw a small rectangle at the bottom of the circle for the bell body.
- Use Union to merge them.
- Draw a tiny rectangle at the very bottom and use Subtract to cut a notch.
- The result is a simple bell-shaped notification icon made entirely from basic shapes.