Layout & Design

Link and Color Styles in Framer (Fundamentals Lesson 18)

Link and Color Styles in Framer (Fundamentals Lesson 18)

Link and Color Styles in Framer (Fundamentals Lesson 18)

Joseph

·

9:37

·

25K views

·

Feb 13, 2025

About this lesson

In a perfect world, we make flawless decisions about colors and typography from the very beginning and scale our designs without making any mistakes. But in the real world, design is an iterative process and inconsistencies are time consuming to stay on top of as we evolve the aesthetics of our sites.

This is where “Styles” in Framer come in, allowing us to define presets for colors, text, and more — then apply those presets to the elements across our site. Then where the real magic happens, is that we can later redefine those styles to make global changes with flawless consistency throughout our entire site… with just a click or two.

Now let’s take a look at how to create, apply, manage, and edit styles in Framer.

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=0s Intro

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=9s Why use styles in Framer

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=17s Types of styles in Framer

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=29s Recap of link styles

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=64s Creating and editing a link style

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=127s Managing link styles in the Assets panel

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=173s Creating color styles

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=207s Naming conventions for color styles

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=249s Applying existing color styles

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=353s Detaching from a color style

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=387s Editing color styles in the Assets panel

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=428s Organizing styles with folders

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=539s Deleting unused styles

https://www.youtube.com/watch?v=XqwmFB_GhLs&t=553s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00in a perfect world we make Flawless 0:02decisions about colors and typography 0:04from the very beginning and scale our 0:06designs without making any mistakes but 0:09in the real world design is an iterative 0:11process and inconsistencies are 0:13time-consuming to stay on top of as we 0:16evolve the Aesthetics of our sites this 0:18is where Styles in framer come in 0:21allowing us to Define presets for colors 0:23text and more then apply those presets 0:26to elements across our sites then where 0:28the real magic happens is is that we can 0:30later redefine those styles to make 0:32Global changes with flawless consistency 0:35throughout our entire site with just a 0:38click or two let's take a look at how to 0:40create apply manage and edit Styles in 0:45[Music]0:47framer before we jump into setting up 0:49some Styles let's take a quick look at 0:51the different types you can create in 0:54framer we have link Styles which we 0:57talked about in an earlier lesson on 0:58links text Styles which I mentioned in 1:01the previous lesson on text and we'll 1:02dig into today color styles which will 1:05be new to you and CMS Styles which we're 1:08going to save for another course on the 1:10framer CMS each is somewhat unique but 1:13fundamentally they have a lot in common 1:15let's unpack how each one works I'll 1:18start with a quick little recap of Link 1:19Styles which we talked about a couple 1:21lessons back I'm going to select this 1:23first layer in my Navar and add a link 1:26on the properties panel I'll just link 1:28it to framer dcom so that it actually 1:30goes somewhere and when you add a link 1:33to a text layer or a range of text 1:35specifically you'll see a property 1:37called style here and we can click to 1:39open this modal and if you haven't 1:40created a link style in this project 1:42before one will be created and applied 1:44automatically which is exactly what just 1:46happened unlike other text text links 1:49are actually required to have a link 1:51style applied from the links model here 1:54we can create a new style select an 1:56existing style or edit an existing style 1:59here we've just got this one link style 2:01that I've created so far so I'm just 2:02going to edit that one and instead of 2:04using blue for the color I'll change it 2:07to some sort of neutral gray to be more 2:09cohesive with our theme here and then 2:11I'll head back and on Hover we'll just 2:13go solid black then for the current 2:16state I'll go black as well so if we're 2:18currently looking at the page it'll look 2:20pretty much the same as if we're already 2:22hovering on it so now if I'm happy with 2:24that link style I can go back and uh 2:27personally I would like to rename this 2:28because once I have multiple link Styles 2:30I want to be able to tell them apart so 2:32I'm just going to double click here and 2:34I'm going to name this nav link just to 2:37keep it straight for myself later now 2:39when I select my other two NAB items and 2:42I add a link to those again I'll just 2:44link to framer dcom you see they 2:46instantly take on the appearance of that 2:47first nav link I did because we only 2:49have one link style so that link Style 2:52just got applied automatically but at 2:54any time I can go in and edit this link 2:57Style again and whatever changes I make 2:59here will apply to all of the links that 3:02share this link style all in one swoop 3:05and we can also manage our link styles 3:07by going to the asset panel and you'll 3:09find all of your Styles here in the 3:11style section of the asset panel so 3:13here's my nav link I can click the 3:15little overflow menu here where I can 3:17find layers that are using the style I 3:19can rename the style I can duplicate the 3:21style or up above I can click the plus 3:23sign to create a new style without even 3:25having to have a link selected I can 3:28create a text style without having to 3:29grab some text I can create a link style 3:31without having to grab a link and then 3:32we also have block quotes and code which 3:34I didn't mention earlier cuz they're a 3:36lot like text Styles but they're 3:37specific to block quote text or code 3:40text and then we also have color styles 3:43and CMS Styles here so again the assets 3:46panel is home to all of your Styles and 3:48that's the place you'll go most of the 3:50time to manage your existing Styles now 3:53let's look at color styles even a simple 3:55landing page is sure to have enough 3:57colors and layers to make Global changes 3:59major chore even this basic black and 4:02white example page already has a bunch 4:04of layers and at least four unique color 4:07fills I'm going to start by creating a 4:09color style for our whole background 4:11color here which is applied to the 4:12breakpoint I believe if I head down here 4:15I can see that I have a fill that my 4:16fill is this color and if I click to 4:19open the color popover there's a button 4:20at the bottom that allows me to create a 4:22new style and when I click new style I 4:25can now give this a name now there are a 4:27few different ways to approach naming 4:28your color styles I could name this 4:30color for what it actually appears to be 4:32I could name it gray or I could name it 4:34light gray or lightest gray using 4:36subjective terms like that light lighter 4:38lightest I don't really recommend but if 4:41you use a number scale you can help keep 4:43track of what is higher contrast and 4:45what's lower contrast which is why 4:46sometimes you'll see colors that end 4:48with 500 or a th000 or 50 at the end 4:51that's just a numeric system that helps 4:54kind of take the subjectivity out of 4:56what's the strongest in contrast versus 4:58what's the weakest contrast but in this 5:00case I'm going to name this semantically 5:02I'm going to call it surface and rather 5:05than using the contrast scale I'm going 5:07to name this surface zero because it's 5:09the base level surface so with this 5:11called surface zero I'm going to click 5:13create and there I have it now I've got 5:15a color style called surface zero I'll 5:18do something similar for the cards I'll 5:20select both of these and these are 5:23already white so I don't need to do 5:24anything there create a new style and 5:26name this surface one since these are 5:29one level higher now for this next one 5:32let's say I want to grab the black 5:34that's being used for my text here I'm 5:36going to head down choose the color of 5:39the text and when I create a new style 5:41for this one I'm instead going to name 5:43this content and I'm going to name it 5:45content 100 because it's 100% I would 5:49name this black 100 perhaps 100% solid 5:52black but again I might change the color 5:54later it might not always be black so in 5:56this case I'm more naming it 5:58semantically based on what it's used for 6:00it's used for Content so content 100 and 6:04I'll click create now I've got a few 6:06other layers that seem to share the same 6:09color and if I think they're always 6:10going to share the same color like the 6:12background of this button for example I 6:14can go and apply that same color style 6:17so again bring up the Color Picker and 6:19instead of creating a new style this 6:21time I will select the existing one 6:23content 100 I can do the same for this 6:25black card over here and the Color 6:27Picker stays open for me which is really 6:29nice I'll do the same for this button 6:31I'll do the same for this button I guess 6:33I would theoretically do the same for 6:35this text here and this text here 6:37because those both appear to be black as 6:39well as the footer down here so let me 6:41do that text first content 100 and the 6:45footer I'll grab and I'll set that to 6:48content 100 as well and if you decide 6:51that you don't want an element to be 6:53connected to a color style anymore 6:55perhaps you want to change it and not 6:56change everything else or change 6:58everything else and not change it there 6:59are a couple of different ways to detach 7:02one is just to remove the color fill and 7:04reestablish a color fill or you can open 7:06the Color Picker and any change you make 7:08up here will instantly detach from the 7:11color style you'll notice when I click 7:13content 100 content 100 is highlighted 7:16it appears to be selected but as soon as 7:18I make a change up here it's no longer 7:20highlighted I've deviated from the color 7:22style down here and instead I've 7:24manually chosen a color up here now 7:27let's look at how to edit and manage our 7:29existing color styles I'm going to jump 7:31ahead to another version of this 7:32document where I've already created some 7:34additional color styles and applied them 7:36to the corresponding layers let's start 7:38with the real magic editing the color 7:40associated with a color style so I'm 7:41going to head over here to the assets 7:43panel I'm going to find my color styles 7:46and I'm going to Mouse over content 100 7:49and when I click it since I'm on the 7:50assets panel it's not going to apply it 7:52to anything it's instead going to open 7:54up the properties of that style and here 7:57all I need to do is make a change and 7:59I'm redefining the color associated with 8:02that style so my changes are applying on 8:04the canvas automatically in real time 8:08and when I'm done I can just close this 8:11then back over here on the assets panel 8:12if I decide that I want things to be a 8:14little more organized which will 8:16inevitably happen down the road when we 8:18have more and more of these color styles 8:20accumulating we can come up to the color 8:22folder click the Ellipsis and we can 8:24create a new folder for ourselves you 8:26can also sort things alphabetically 8:28which can help manage the cha 8:30but I'm going to create a new folder and 8:31I'm going to name this folder content 8:34and then I can drag in all of my content 8:37related 8:39Styles another way to go about this is 8:42when you're creating or editing the name 8:44of a style you can also type a Word and 8:48then a slash to create a folder so boom 8:51I just created a surface folder and I 8:53could have done that when I originally 8:54named the color style as well and then 8:57I'll drop surface one in there so things 8:58are nice and tidy 9:00and if at any point you decide you don't 9:02need a color style anymore and you want 9:03to delete it and detach it from all of 9:05the layers and properties that it's 9:07connected to you can also click the 9:08Ellipsis icon next to the name of the 9:10style and you can choose 9:12delete that does it for part one now you 9:15know what styles are all about and how 9:17to create edit and manage link and color 9:20styles now we're on to part two where 9:23we'll dive into Tex Styles I'll see you 9:25there

TeachesColor Styles Text Styles

Also coversBreakpoints Hover & Press Links Semantic Tags Themes Typography

Watch on YouTube ↗

‹ Text Styles in Framer (Fundamentals Lesson 19)

Layout Templates: Mobile Menus, Page Effects, and Sidebars ›

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.