Layout & Design

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Justin

4:59

2.6K views

Feb 19, 2026

About this lesson

In this lesson, we'll cover how to use Variables to create flexible, scalable vector icons without duplication. We'll go over how controlling fill, stroke width, opacity and fill alpha with variables can allow one icon to support multiple styles.

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

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=21s Recap

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=39s What is a Variable?

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=60s Applying Variables

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=143s Fill Alpha

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=199s Combining Variables

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=232s Variables vs Variations

https://www.youtube.com/watch?v=9fH8H5q_kXM&t=271s Wrap Up

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

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

0:00As icons and vectors get reused across 0:02layouts and components, they don't 0:04always work everywhere [music] out of 0:06the box. So, in this lesson, we're going 0:08to cover how to use variables in Framer 0:10to [music] design flexible vectors that 0:12adapt to multiple visual styles without 0:15the need to create new icons.0:22In the last lesson, we focused on 0:23organizing and building vectors so 0:26they're clean and reusable. Now, we're 0:29going to build on that foundation by 0:31applying variables to our vector sets.0:33But before we get there, let's quickly 0:36define what a variable actually is. In 0:40Framer, a variable acts like a 0:42placeholder for a property value, things 0:44like fill color or stroke width, and 0:47bring it to the surface when selecting 0:49an instance of a vector set or 0:51component. That way we can override the 0:54value of that property on a per instance 0:57basis without affecting the others. And 1:00framer gives us different properties we 1:02can apply variables to depending on the 1:04style of our icons. For example, in this 1:08vector set, I'm working with a few 1:10common styles. Outline, filled, and a 1:14hybrid of the two. Let's start by 1:16selecting the outlined icon. Then head 1:18over to the layers panel to take a 1:20closer look. If we expand the icon, we 1:23can see all of its individual paths.1:25From here, I can select a single path to 1:28adjust its style properties or select 1:31all of the paths and group them together 1:34using command G like in the last lesson.1:37So, with this new group selected, let's 1:39go ahead and add a variable to the 1:41stroke width by heading over to the 1:43properties panel and clicking on width,1:46then create variable. Now when we use 1:49this icon in a project, we can adjust 1:52the stroke width as needed, giving us 1:55much more flexibility without creating 1:57additional versions of the icon. Next,2:01let's look at the filled version of this 2:02icon. For this one, I've already added 2:05variables to both the fill and opacity 2:08properties, which allow us to control 2:10the icon's color and transparency by 2:13using the same approach we just used for 2:16the stroke width. This works great for 2:19icons that are entirely filled or 2:22entirely outlined. But when we're 2:23working with hybrid or duo tone icons,2:26we often need more control. For example,2:29what if we want to change the opacity of 2:32the fill without affecting the stroke?2:34Well, that's where fill alpha comes in.2:37So, looking at this third icon, we have 2:40both a stroke and a fill. Instead of 2:43adjusting the overall opacity, I'll 2:46select the elements that have fills 2:47applied to them and then add a fill 2:50alpha property by heading to the style 2:52section of the properties panel,2:54clicking the plus icon, and then fill 2:57alpha. Now, as I drag the slider, we can 3:00see the fill becoming more or less 3:03transparent, while the stroke stays 3:06exactly the same. This gives us precise 3:09control over the visual hierarchy within 3:11the icon, letting us soften or emphasize 3:14parts without changing its structure or 3:17creating separate versions. One of the 3:19biggest advantages of using variables is 3:21that combining them can allow us to 3:24switch between outline, filled, and duo 3:26tone styles effectively. For example, an 3:29outline style might rely entirely on 3:32stroke with the fill alpha set to zero,3:36while a filled style would do the 3:38opposite, using a solid fill with little 3:41or no stroke. And a duo tone style could 3:45utilize both. And because all of this is 3:47driven by variables, we can change the 3:50style just by updating the values. Okay,3:53so up to this point we've been using 3:55variables to handle stylistic changes.3:58But when the overall structure of an 4:01icon needs to change, that's when icon 4:04variations should come into play. A good 4:07rule of thumb is use variables for 4:10stylistic adjustments and use variations 4:13for structural differences. So, if the 4:16underlying shape stays the same and 4:18we're just changing how it looks,4:21variables are usually the best choice.4:23But if paths are added, removed, or 4:26fundamentally different, that's a job 4:29for a whole new variation. And that's 4:32it. Now you've seen how variables can 4:34empower a single icon to support 4:37multiple styles, keeping your library 4:39consistent, flexible, [music] and easy 4:42to scale. In the next lesson, we'll take 4:44these icons a step further by covering 4:46how to animate them, adding some motion 4:49and personality [music] to our designs.4:52I'll see you there.

TeachesVariables Vector Sets

Also coversComponents

Watch on YouTube ↗

‹ Framer Update: Flow Effect in Layout Templates

Framer Update: CMS Dynamic Filters ›