# Drawing with Vectors in Framer  (Vectors Lesson 2)

Source: https://www.youtube.com/watch?v=k0gVnc-OH7I
Recap page: https://rapidrecap.app/video/k0gVnc-OH7I
Generated: 2026-01-28T17:44:07.962+00:00

---
## Quick Overview

Framer's vector tools allow users to create and edit custom graphics using basic shapes, paths, curves, and Boolean operations like Unite, Subtract, Intersect, Exclude, and Join, offering non-destructive editing capabilities for flexible design adjustments.

**Key Points:**
- Framer provides vector tools accessible under the 'Vector' icon, offering Rectangle, Oval, Polygon, Star, and Path options (0:04-0:08, 0:40-0:46).
- Holding Shift while drawing basic shapes enforces perfect proportions, like creating a square from a rectangle (0:59-1:01).
- Holding Option (Mac) or Alt (Windows) while drawing expands the shape from its center point instead of the corner (1:17-1:25).
- When editing curves, vector handles are mirrored by default, allowing for smooth, consistent curves; holding Option/Alt disconnects the handles for asymmetrical control (2:09-2:28).
- Double-clicking an anchor point in selection mode toggles between curved and straight corners for that specific point (2:28-2:41).
- Boolean operations (Unite, Subtract, Intersect, Exclude, Join) are non-destructive, meaning the original shapes remain accessible within the group (6:09-7:07).
- The Path tool allows adding new anchor points anywhere along an existing path segment by holding Command (Mac) or Control (Windows) while clicking (3:18-3:25).

![Screenshot at 0:08: A grid displaying various preset vector icons demonstrates the range of available simple shapes before diving into custom drawing tools.](https://ss.rapidrecap.app/screens/k0gVnc-OH7I/00-00-08.jpg)

**Context:** This video, presented by Justin Jones, Education at Framer, serves as the second lesson in a series about drawing with vectors within the Framer design tool. It focuses on the fundamental tools available for creating and manipulating vector shapes, including drawing basic primitives, adjusting curves using handles, and combining shapes using Boolean operations.

## Detailed Analysis

The tutorial begins by showing the available basic vector shapes in Framer: Rectangle (R), Oval (O), Polygon, Star, and Path (P), accessible via the Vector menu (0:04-0:08). The presenter demonstrates drawing these shapes and highlights utility shortcuts: holding Shift maintains perfect proportions (e.g., drawing a square) (0:59-1:01), and holding Option/Alt expands shapes from the center instead of the corner (1:17-1:25). When modifying curves, handles are mirrored by default for smooth transitions, but holding Option/Alt disconnects them for independent control (2:09-2:28). Users can toggle anchor points between straight corners and curves by double-clicking them while in selection mode (2:28-2:41). The Path tool is introduced, allowing users to add new points anywhere on a path segment by holding Command/Control while clicking (3:18-3:25). Finally, the video covers Boolean operations—Unite, Subtract, Intersect, Exclude, and Join—which are non-destructive, allowing users to modify the original components of the combined shape later (6:09-7:07).

### Basic Shape Creation

- Access vector tools via the 'Vector' icon
- Options include Rectangle, Oval, Polygon, Star, and Path
- Holding Shift enforces perfect proportions when drawing (0:40-1:01)

### Shape Manipulation Shortcuts

- Holding Option/Alt expands shapes outward from the center instead of the corner (1:17-1:25)
- Holding Spacebar repositions a shape while drawing without altering its size (1:34-1:42)

### Curve Control

- Manipulate curves by dragging handles that appear when an anchor point is selected
- By default, handles are mirrored for consistency, but Option/Alt breaks mirroring for independent control (2:09-2:28)
- Double-clicking an anchor point toggles between straight corners and curved segments (2:28-2:41)

### Path Modification

- Use the Path tool (shortcut P) to add new points along any path segment by holding Command/Control while clicking (3:39-3:43)
- This allows for complex shapes like an ECG waveform (4:47-4:54)

### Boolean Operations

- Framer offers Unite, Subtract, Intersect, Exclude, and Join, which are non-destructive operations
- Non-destructive means the original component shapes remain accessible within the combined group (6:09-7:07)

![Screenshot at 0:15: A selection panel showing various icon options available within the vector creation menu in Framer.](https://ss.rapidrecap.app/screens/k0gVnc-OH7I/00-00-15.jpg)
![Screenshot at 0:59: Demonstration of holding Shift while dragging a rectangle to maintain perfect proportions, resulting in a square \(1:00\).](https://ss.rapidrecap.app/screens/k0gVnc-OH7I/00-00-59.jpg)
![Screenshot at 2:29: The visual result of using the 'Straight Corners' mode on a circle, creating a pointed, teardrop-like shape.](https://ss.rapidrecap.app/screens/k0gVnc-OH7I/00-02-29.jpg)
![Screenshot at 6:35: Visual representation of the 'Unite' Boolean operation merging two overlapping circles into a single, continuous shape.](https://ss.rapidrecap.app/screens/k0gVnc-OH7I/00-06-35.jpg)
![Screenshot at 7:08: The result of the 'Exclude' Boolean operation, showing only the non-overlapping areas of the two selected circles.](https://ss.rapidrecap.app/screens/k0gVnc-OH7I/00-07-08.jpg)