Layout & Design

Drawing with Vectors in Framer (Vectors Lesson 2)

Drawing with Vectors in Framer (Vectors Lesson 2)

Drawing with Vectors in Framer (Vectors Lesson 2)

Justin

·

7:57

·

3.9K views

·

Jan 28, 2026

About this lesson

In this lesson, we dive into drawing with vectors in Framer. You’ll learn how to create shapes and paths directly on the canvas, use modifier keys to draw with precision, and edit anchor points to refine your designs. We’ll also cover how to build more complex shapes using Boolean operations, so you can move faster without manually drawing every curve.

Perfect for anyone looking to create custom icons, UI elements, or illustrations inside Framer.

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=0s Introduction

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=35s Drawing with Shapes

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=103s Adjusting Curves

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=205s Adding & Selecting Points

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=267s Drawing with Paths

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=340s Boolean Operations

https://www.youtube.com/watch?v=k0gVnc-OH7I&t=442s Wrap-Up

Remix Lesson Worksheet: https://framer.com/remix/Au8lxGEL37nhWoriktKv

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Before we can build icon sets [music] or 0:03add animation, we need to start with the 0:05basics. Drawing vectors. Framer's vector 0:09tools let you create and [music] edit 0:11shapes, paths, and curves right on the 0:13canvas. These [music] are the core 0:16building blocks behind icons, logos, and 0:19any other custom graphic you want to 0:21make. So, in this video, we're going to 0:23cover how they work and how you can 0:26start combining them into more complex 0:28[music] shapes without ever leaving 0:30Framer.0:35To start drawing with vectors in Framer,0:38we'll head to the top left corner and 0:40select the vector icon. From this 0:43dropdown, we have options to create 0:45simple shapes like rectangles, ovals,0:48polygons, and stars. To place a shape on 0:51the canvas, just pick one and click and 0:53drag to draw it. If we want perfect 0:56proportions, like turning a rectangle 0:58into a square, we can hold shift while 1:01dragging. This works for all shapes.1:04Just keep in mind that using shift 1:07automatically locks the proportions 1:09after the shape is placed, but you can 1:11unlock them any time by clicking the 1:13lock icon in the properties panel.1:16Another helpful drawing tip, holding 1:18option or alt while we drag makes the 1:21shape expand out from its center instead 1:24of the top left. Pair that with shift 1:26and we'll get perfect proportions just 1:29like before. And if we want to 1:31reposition the shape before placing it,1:34just hold the spacebar while dragging.1:37This lets us move it around midraw 1:40without losing the size we've already 1:42set. Once we're happy with the shape on 1:44our canvas, we can now customize it even 1:47further by doubleclicking it to edit its 1:50individual anchor points. From here, we 1:53can change the positioning of each point 1:55or even adjust the curves of the shape's 1:58path. For example, when we select one of 2:00the points on this circle, a pair of 2:02handles will appear. These let us 2:05control the angles and shape of the 2:07curve. By default, both handles are 2:10mirrored, so they move together, which 2:12is perfect when we want a smooth,2:14consistent curve. But if we want a bit 2:17more control, we can head over to the 2:19properties panel, where we'll see three 2:21curve options to switch between:2:23straight corners, mirrored handles, and 2:27disconnected handles. Straight corners 2:30flattens the curve connected to that 2:32anchor point, giving us exactly what 2:34it's titled, straight corners. We can 2:37also toggle this by double clicking an 2:39anchor point while in selection mode.2:42Mirrored handles is the default mode 2:44where both handles move together and 2:47disconnected handles lets us move each 2:50handle independently for more custom or 2:54asymmetric curves. Another way to 2:56activate this temporarily is by holding 2:58option or alt on our keyboard while 3:01dragging one of the handles. And if we 3:04want to lock the angle of a handle, we 3:06can hold shift while adjusting the 3:08curve. Framer also lets us add new 3:11points to any path. By default, we can 3:14add a point right in the middle of a 3:16path segment. But if we hold command on 3:19our keyboard, we can place a point 3:22anywhere along the path instead of just 3:24the midpoint. Now, I've gone ahead and 3:27added a few more points to a shape to 3:29show how managing multiple points is 3:32incredibly flexible. For example, let's 3:35say we needed to select multiple points 3:37at once. All we need to do is drag over 3:41the points to select them. And now we 3:44can move them as a group. But what about 3:46points that aren't right next to each 3:49other? For that, we can hold shift and 3:52click the points we need to select to 3:54add them to our selection. Or if we want 3:57to remove a point from the selection,3:59just shiftclick it again. With multiple 4:01points selected, we can also use align 4:04and distribute to keep everything 4:06perfectly lined up or evenly spaced. And 4:09if we have a pair of straight path 4:11segments, the ability to round the 4:13anchor points between them will appear 4:16in the properties panel. Finally, like 4:19most things in Framer, we have style 4:21options that allow us to control the 4:22color, add shadows, and adjust stroke 4:26properties.4:27Now that we've gone over how to draw 4:29with the basic shape tools, let's jump 4:31in to making our own custom shapes from 4:33scratch. The first thing we need to do 4:36is select the path tool, either from the 4:38vector dropdown or by pressing P on our 4:41keyboard. From there, we can click 4:43anywhere on the canvas to place our 4:46first anchor point. Each click after 4:48that adds a new point, automatically 4:51connecting them with a straight path.4:55If we ever want a curved path, we can 4:57just click and drag when placing a 4:59point. This adds a curve and handles 5:02just like the ones we adjusted earlier.5:04To fully close the path and finish the 5:06shape, just click back on the very first 5:09anchor point that was set. If we ever 5:12need to keep the path open for any 5:14reason, we can press escape on our 5:16keyboard before closing it. If we do 5:19have a closed shape that we want to 5:21open, we can just select any path we 5:23want to remove and hit delete to reopen 5:26it. And if we have an open path that 5:29we've maybe clicked away from or are 5:32coming back to later, we just need to 5:34click either the first or last anchor 5:36point in the path to keep drawing and 5:39adding new points.5:41Now, let's talk boolean operations. So 5:44far, we've learned how to create shapes 5:46in a few different ways, but it would be 5:48nice to build more complex ones without 5:50having to manually draw or adjust every 5:53curve. Luckily, boolean operations let 5:56us combine two or more shapes to create 5:59an entirely new one. I've set up a few 6:02shapes on the canvas so we can walk 6:04through how this works. If we look over 6:06at the properties panel, we'll see a row 6:08of icons. These are the boolean 6:11operations. Right now, they won't do 6:13anything because they only activate once 6:16we've selected two or more shapes to 6:18combine. Once we do that, all of the 6:20icons will light up. But what does each 6:23one do? Well, Framer gives us five 6:26options to choose from depending on our 6:28desired result. Unite, subtract,6:31intersect, exclude, and join. Unite 6:36merges two or more shapes into one.6:39Subtract cuts the top shape out of the 6:42one beneath it. Intersect keeps only the 6:45overlapping area. Exclude removes the 6:49overlap and keeps the non-over 6:50overlapping parts. And join groups 6:53multiple paths so they share the same 6:56visual properties without merging their 6:58actual shapes. Boolean operations and 7:01framer are nondestructive, which means 7:04we're never locked in and our shapes are 7:06never flattened. We can always go back 7:09to our layers panel or doubleclick 7:11directly on the canvas to open up the 7:13shape group to access our original 7:16shapes and paths, allowing us to move 7:18anchor points or tweak paths as our 7:21design evolves. So now you should have a 7:24good [music] understanding of the core 7:25tools for drawing vectors in Framer.7:28[music] Shapes, paths, curves, and 7:31booleans together. These give us 7:33everything [music] we need to build 7:35clean, flexible graphics that can scale 7:38from simple [music]7:39icons to more complex illustrations. In 7:42the next lesson, we'll take these basics 7:44further by covering how to create 7:46[music] and organize a vector set. I'll 7:49see you in the next video.

TeachesDrawing Vectors

Also coversKeyboard Shortcuts Section & Anchor Links Vector Sets

Watch on YouTube ↗

‹ Getting Started with Vectors in Framer (Vectors Lesson 1)

Introducing Tutorials on the Framer Marketplace ›

More in this topic

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Animating Vectors in Framer (Vectors Lesson 5)

Animating Vectors in Framer (Vectors Lesson 5)

Layout & Design4K views · 3 months ago

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Layout & Design3K views · 3 months ago

Replace component instances site-wide in Framer

Replace component instances site-wide in Framer

Layout & Design4K views · 4 months ago

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.