Shapes, Vectors & the Pen Tool

Introduction

Design isn’t just about arranging rectangles — sometimes you need custom icons, intricate illustrations, or precise UI shapes. In this guide, you’ll learn how to work with Figma’s basic shape tools, draw custom vector paths with the Pen Tool, and use boolean operations to create complex designs with ease.

1. Creating Shapes: Rectangles, Ellipses, Lines & More

Image Placeholder: Basic shapes created in Figma: rectangle, ellipse, line, polygon

Figma makes it easy to insert geometric shapes:

• Rectangle (R) – for buttons, containers, cards
• Ellipse (O) – for avatars, icons, charts
• Line (L) – for dividers, underlines
• Polygon – adjustable sides, great for triangles, hexagons, stars
• Arrow – lines with directional control, ideal for flows

Each shape has editable properties like corner radius, stroke, fill, rotation, and constraints.

2. Drawing Custom Shapes with the Pen Tool

Image Placeholder: Pen tool drawing in action with anchor points and handles

The Pen Tool (P) allows you to create custom vector paths. Unlike traditional pen tools, Figma supports vector networks, meaning paths aren’t limited to one-way connections — they can branch and loop in any direction.

Basic Pen Tool Actions:

• Click to create straight segments
• Click + drag to create curves
• Use Alt/Option to adjust individual handles
• Close a shape by clicking the first point
• Esc to finish drawing

Why vector networks matter: You can draw more complex shapes like stars, arrows, or flow diagrams without needing to start a new path for each branch.

3. Editing Vectors: Precision Control

Image Placeholder: Vector editing with node types: corner, smooth, symmetrical

Once drawn, any vector shape can be edited using the Vector Edit Mode (Enter when a vector is selected). You can:

• Add/remove points
• Convert between corner, smooth, or mirror points
• Adjust handles for fine curves
• Join or disconnect paths

These tools are powerful for creating icons, logos, or any bespoke design elements.

4. Boolean Operations: Combine Shapes Intelligently

Image Placeholder: Example of union, subtract, intersect, exclude in action

Figma’s boolean operations allow you to combine shapes into complex forms — non-destructively.

• Union (⌘/Ctrl + ⌥/Alt + U): Combines multiple shapes into one
• Subtract (⌘/Ctrl + ⌥/Alt + -): Cuts the top shape out of the bottom
• Intersect: Keeps only the overlapping area
• Exclude: Removes the overlapping area, keeps the rest

These are essential for creating icons, cutouts, or decorative UI shapes. Even better, boolean groups remain editable, so you can still move or reshape individual parts later.

Conclusion

Shapes and vectors are more than decoration — they’re design fundamentals. With Figma’s intuitive tools, you can build clean layouts, craft unique visuals, and scale your creative ideas. Master the Pen Tool, explore boolean magic, and start creating truly custom designs with precision.