Layout & Design

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

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

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

Justin

·

6:58

·

3.2K views

·

About this lesson

In this lesson, you’ll learn how to create, organize, and manage Vector Sets in Framer—so you can reuse icons, keep styles consistent, and scale your designs without things getting messy. Perfect for UI work, design systems, and anyone tired of hunting for the “right” icon.

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

https://www.youtube.com/watch?v=uVtelh5LS5U&t=29s What is a Vector Set?

https://www.youtube.com/watch?v=uVtelh5LS5U&t=65s Creating a Vector Set from the Assets Panel

https://www.youtube.com/watch?v=uVtelh5LS5U&t=117s Creating Icons inside a Vector Set

https://www.youtube.com/watch?v=uVtelh5LS5U&t=210s Creating a Vector Set from the Canvas

https://www.youtube.com/watch?v=uVtelh5LS5U&t=284s Creating a Vector Set from external SVG sets

https://www.youtube.com/watch?v=uVtelh5LS5U&t=317s Naming Best Practices

https://www.youtube.com/watch?v=uVtelh5LS5U&t=357s Adding a Vector Set to a Page

https://www.youtube.com/watch?v=uVtelh5LS5U&t=386s Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/mastering-vectors-in-framer

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

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

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

0:00As projects grow, keeping our icons0:03cohesive and organized can become more0:05and more challenging. Loose icons on the0:08canvas can lead [music] to inconsistent0:10size, style, and slow down our workflow.0:13[music]0:14So, in this lesson, we'll cover how to0:16create cohesive vector sets, import0:18external icon libraries, organize0:21everything cleanly, and easily [music]0:23add them to our project.0:29In Framer, we can create a collection of0:31editable vector icons and store them in0:33our assets panel so that they are in one0:36place, easy to browse, and ready to use0:39anywhere in our project. These are0:42called vector sets and they give us a0:44controlled environment to design our0:46icons so that we can control their size,0:48style, and structure, preventing any of0:51them from feeling mismatched or0:53off-brand.0:55There's a few ways to create vector sets0:57in Framer. From the assets panel, from1:00the canvas, or by importing pre-existing1:03SVG files. To create one from the assets1:06panel, we'll navigate to the vectors1:08section and click the plus icon. From1:11here, choose new set. This will create a1:15fresh vector set with a few default1:17shapes within containers to get us1:19started. Like I mentioned before, vector1:22sets will live right here in the assets1:24panel, making them easy to access and1:26edit along with any of our other project1:29assets. And each icon in our set sits1:32inside its own container. And it's a1:34good idea to size it the way we want1:36from the start because every new icon is1:40created at the size of the container we1:42currently have selected. And while we1:45can always make individual containers1:47different sizes, best practice is to1:49keep all icons in a set sharing the same1:52container to maintain a cohesive scale.1:56Okay. So from here we can tweak the1:58default shapes or delete them and start2:01fresh using all the drawing techniques2:03from the previous lesson to create and2:06style our own icons with strokes, fills,2:09and boolean operations at our disposal.2:12And if we zoom in while drawing, Framer2:15reveals a helpful grid that makes it2:17easier to craft precise, well-aligned2:20icons.2:21Now here we have an icon made up of2:24several paths. And I'm going to start by2:26grouping them together to make it even2:28easier to style them all at once. So2:32I'll go ahead and select all the2:33elements and hit commandG or rightclick2:37and choose group. Now we can apply and2:41adjust shared properties like stroke2:42width on the whole icon at once while2:46still being able to select individual2:48paths or elements inside the group if we2:51need more control. And once we're ready2:53to add more icons to the set, we can2:56click the plus icon next to the existing2:58ones. As we create more icons, it3:02becomes even more important to keep the3:04entire set feeling cohesive. Consistent3:07styling like matching stroke widths and3:10similar corner radius goes a long way in3:13making an icon set feel intentional3:15rather than random. A quick tip is that3:18using Framer's alignment tools can also3:21help keep each icon centered within its3:23container so that they stay visually3:25stable and don't shift around when we're3:28using them throughout our projects. Of3:31course, we won't always start creating3:33icons inside a brand new vector set.3:35Sometimes it's more natural to draw an3:37icon directly on the canvas, and when we3:40do, we can still convert it into a3:42vector set at any time. But before3:46converting, we need to make sure all the3:48icons elements are grouped. If they3:50aren't, Framer will treat each element3:53as its own separate icon, which isn't3:56what we want. So to do that, we'll open3:58the layers panel and select each path or4:01shape used to make the icon and hit4:04command G just like before to group them4:07together. Now with everything grouped,4:09we can rightclick and choose create4:12vector set. and Framer will generate a4:15new set using the icon we already4:17created on the canvas. However,4:20something important to note is that4:22vector sets don't support frames. So, if4:25a frame is included in your selection4:27when trying to create a vector set, the4:30option to create one won't appear.4:32That's why it's important to use groups4:34for vector shapes and paths. Think of it4:37like this. Groups organize vector path4:40layers while frames are meant for page4:43layout and structure. Okay. Now, the4:46last way to create a vector set and4:48framer is by importing SVGs from your4:51computer, like a folder of icons from an4:54icon pack. So, to do this, we'll just4:57select the SVG files from our computer4:59and drag them onto the canvas. Framer5:02will then automatically generate a new5:04vector set with all the icons organized5:07and fully customizable. If we ever need5:10to expand the set, we can just drag5:12several additional SVGs into the same5:15vector set to keep everything together.5:18Now, no matter how a vector set gets5:21created, keeping it organized is one of5:24the most important parts. A simple5:26naming structure for your icons goes a5:28long way. So, we want to make sure each5:31icon has a clear, consistent name so5:34it's easy to find once the vector set is5:36added to a page. For example, names like5:39search, settings, arrow left, arrow5:42right, or user make each icon easy to5:46find. And using consistent naming like5:49arrow left and arrow right also keeps5:52related icons grouped together, making5:54them faster to browse and reuse. With5:58that said, when we're ready, we can add6:00a vector set and all of its icons6:02directly to a page by opening the assets6:05panel and dragging it in directly from6:08the vector section. When we drag a6:11vector set onto a page, we will see the6:14first icon in the set by default, but we6:17can head to the properties panel and6:19open a popover that lets us browse,6:22search, and switch between icons6:25instantly. And that covers how to6:27create, organize, and work with vector6:30sets in Framer. Whether you're drawing6:32icons from [music] scratch or importing6:34a full library, vector sets keep6:36everything consistent, editable, [music]6:38and easy to manage. In the next lesson,6:41we'll build on this by [music] exploring6:43how to create variations of our icons6:45utilizing variables and how to manage6:48them [music] inside of our vector sets.6:50I'll see you there.

Watch on YouTube ↗

‹ Replace component instances site-wide in Framer

Framer Update: CMS Components ›

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating a fixed footer reveal in Framer6:25
Creating a fixed footer reveal in Framer
Layout & Design7K views · 4 months ago

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