Color Variable Basics | Sketch Tutorial (2020)

hey it's joseph and today is part one of a two-part series where we're going to be looking at one of the newest and most anticipated features released in sketch 69. so if you're all up to date you've got a new feature called color variables and color variables are really just a major enhancement to document colors which if you use document colors liberally in the past was a way to save color swatches within your document so that if you needed to use those same colors and wanted to stay consistent you'd be able to choose the same colors from the color picker that you saved for yourself right it's just basically just your saved colors in the document the problem was that those saved colors couldn't be redefined and that the objects using those save colors couldn't stay in sync with the colors which is exactly what color variables solve for so let's take a look at how it works in sketch [Music] so here in this document there are a few colors that are very commonly used there's this purple color and this purple color is being used on objects that are several different opacities there's also a dark gray there's also a white which i think is absolute white but you can see here that the purple is being used on several different layers it's being used on icons it's being used on text and if this color ever needed to be redefined the redefinition of that color would obviously affect many layers so what we need to do is take the colors that exist in this document and turn them into color variables that's something that does not happen automatically so we're going to have to select an object that has a color it could be a fill could be a text color could be really anywhere that a color is used on the inspector and we'll bring up the color picker and when we do so we have this new option here to create a color variable which is basically just to save a document color but also to link this object to that color or link this property of this object to that color so i'm going to choose create color variable here and it asks me to give it a name i'm going to name it primary brand and click create and here we have it and it looks just like a document color just like before the big difference is that the object specifically the fill here on this object is now attached to this color and the way that we can tell it's attached besides the option to detach it here showing up in the color picker is that next to the color swatch there's a little icon here that represents color variables and you'll notice that that is purple instead of gray if i select another object despite the fact that this object is that same purple color it has not yet been attached to that color variable so creating a color variable and attaching other layers to that color variable is two separate steps and part two of this video series is going to be all about connecting your documents which obviously have a lot of layers and a lot of properties and probably have some layer styles connecting all those things to your color variables and creating color variables from an existing document in this video we're just looking at the basics of creating color variables and applying them to layers so this is going to be a very one by one process but if you want to see how to do a whole document an existing document that's what part two of this video series is going to be all about so again if i've got a layer here that has a color associated with it but doesn't have a color variable associated with it yet i've got to go to the color picker and i've got to click on the color variable to apply it and you can see here that the name of the color variable is propagated underneath a little color chip here and that icon has turned purple because that icon uh is now reflecting that we're connected to that color variable one important thing to note here is that the color variable includes the opacity of the fill so this is this purple color this hex code here which is grayed out because it's now linked to a variable and it's not something that is meant for me to mess with anymore uh and the opacity is also grayed out because that's part of the color variable so the reason i make a point of that is because these objects here these rings that are laid on top of one another are different opacities but it's the object opacity the layer opacity that's reduced to 40 here it's not the fill opacity so the fact that they have the same fill opacity allows me to use one single color variable for all of them and then i can use the opacity of the layer uh to create this uh this sort of gradient ring effect going on here if you have multiple densities or multiple opacities of a color you may end up with different color variables so if i commonly use this purple color at 100 but i sometimes used it as 50 at 50 percent uh it would behoove me to create two separate color variables one at a hundred percent one at fifty percent uh but that really isn't the case here i'm only using the color at 100 it's just the objects uh that entirely uh vary in opacity here um this background object though this is actually a different uh a different purple this isn't the same purple at a reduced opacity this is a different shade of purple which i am going to define as another color variable and i'm going to name this secondary brand and i'm not including the name of the color in the name of the color variable because if i name it purple well what if it changes what if it becomes more of a blue what if it becomes royal blue which is kind of a purplish blue but isn't really purple anymore i don't want to have to change the name of it the name kind of describes the intent how the color is being used more so than the color itself which could later be redefined so again it's all about creating the color variables and then attaching the layers to the color variables so as you can see here this document has many many layers that need to become attached to these color variables which could be tedious it could take a long time but if you watch the part two of this video i'll show you how to do it very quickly and very easily in a more automated way versus going one by one which will drive you absolutely insane so these color variables they exist in the document they become part of the document so i've just created two of them that are now part of this document so now the question is how do we manage them how do we group them how do we rename them how do we stay organized how do we delete them if we make a mistake or redefine them if we want to change the color that all happens in this new components view which was also added in sketch 69 it's still in beta so it could change but over here on the toolbar if we switch to the components view it's a full screen takeover it's a whole different mode where i can see any symbols text styles layer styles or colors that exist within this document so here on the colors tab i can see the color variables that i've saved so from here there are a few things that i can do i can group color variables together so these two are brand colors so i might want to select them both press command g to create a group and then over here on the sidebar that's where the group has been created and i can rename it brand another way to accomplish this is uh in the naming of the color variables themselves so when i created this primary brand color variable if i wanted it to instantly and automatically go into a group called brand i could just like with symbols and with textiles and layer styles i could have named it brand slash primary brand anytime you use a slash in the naming convention of symbols textiles layer styles or color variables the prefix before that slash becomes a group name so i could have done that but i didn't do that so you can always later group things up here in this view it's totally up to you the other thing you can do here is create a new color variable so when you create a new color variable it just basically gives you the color picker over on the inspector and you can choose a color or you can manually enter a color here and you can give it a name similarly you can select an existing color variable and redefine it as well as rename it over here on the sidebar or the inspector as it's called so let's actually do that let's redefine this color i'm going to redefine the primary brand color and i'm going to do exactly what we were talking about before and i'm going to make it blue instead of purple and i'll apply the same shift to the secondary brand color and as i make these changes including changes to the name anything that i do over here on the inspector is going to affect my document immediately so if i go back to my design canvas you can see here that all the layers that were attached to that color variable have changed automatically and instantly what hasn't happened is all the layers that were not connected to the color variable have not changed so i'll show you real quick just a little sneak peek of something that's coming in part two of this video i could go to edit on the menu bar and choose find and replace color and i can find any instances of that purple color right which that purple color doesn't have it's just a hex code right that's the purple color that is not connected to a color variable and i can find any instance of that color and replace it with my primary brand color right which ultimately ended up being the replacement uh for that purple color when i choose replace i'm not just replacing the color i'm also replacing the property that had a hex code associated with it to now be a property that has the color variable associated with it so now again if i redefine the color variable it will redefine the color wherever it's being used in the document so let me do the same thing here with this purple color i'm going to go to edit find and replace color and the shortcut is option command f for those of you who like keyboard shortcuts i'm one of those people and when you have a layer selected it's kind of nice the find box will already have the color um selected from the layer that you had selected when you open find and replace so there's my kind of lighter lavender color which is going to get replaced with my lighter brand color and i'll click replace here and now we're getting warmer now more of our prominent brand colors are associated with the variables that we've created so again if we want to redefine if we say you know what the purple worked better we can go back into our color variables in the components view and we can re-establish those colors in the real world i would be more careful about what colors i'm choosing here but i'm just going to go back to a purple-ish color for those two variables and when i go back everywhere that they were being used which includes the icons these shapes here the text layers everywhere those colors have updated so it's that easy as far as deviating from color variables is concerned it's as easy as just going to the color picker and making a change if you make a change on the color picker here the first thing that's going to happen is it's automatically going to detach that layer from the color picker so you don't or from the color variable i should say so you don't have to worry about accidentally redefining a color variable and making a change that's going to propagate all throughout a large document you can't do that on accident you would have to go into the color variable in order to redefine it or you can do that from the inspector by instead of just changing the color here first click edit variable and then any change that you make will happen everywhere uh it'll only happen everywhere once you click update so you'll notice that just this one layer is changing so i can preview it and then when i click update there we go it changes absolutely everywhere so again you have to do an extra deliberate step you have to choose to edit the variable or you have to go into your color variables in the component library so nothing's going to happen accidentally and suddenly i'm going to hit undo here to go back there is a button that says detach variable and you might be thinking okay if you can just play with the color picker why would you ever have to click detach variable detach variable is just if you don't want this object to be connected to the variable but you also don't want to change the color so rather than having to wiggle the color and then wiggle it back to where it was you could just click detach variable so the color stays the same it looks the same but it's no longer connected uh to that color variable so if every other layer gets redefined through the variable this layer will get left alone uh this one back to gray it's no longer attached so yeah that's uh that's the gist of creating and applying and updating uh color variables you can also delete them naturally so if i go back into the canvas view here or the component view rather um i can choose to just basically select something and hit delete on the keyboard or you can always right click and choose delete from the drop-down menu and when you delete a color variable kind of like when you delete a symbol or any other style for that matter it's not going to affect the appearance of your document they're just no longer going to be connected to a variable that can be updated centrally so these basically just went back to being regular old hex codes which is fine no harm done so if you ever need to start over or go back or if you make a mistake create a variable that shouldn't exist it's it's very very low risk these these features are very low risk to experiment with so that's now looking good i've got no variables in this document anymore but one last thing that i do want to show you which is going to require me to undo deleting my color variables there we go i just hit command z so they're back i want to show you the new insert window and how that can be used for color variables as well because you might be thinking okay this is nice this view where i can see everything nice and big but i can't really just slap these onto a layer because i can't see my design canvas i can't see my layers so what we do have now is if you press the letter c on the keyboard we have this new components it's basically the insert component window which allows me to browse the same content that we saw in that full screen components view with the symbols text styles layer styles and colors and now from here you have two options you can either drag a color variable directly onto a layer you'll see the little outline show confirmation that it recognizes the layer and when you drop it it'll replace the fill if it has a fill if it has nothing but a border it'll replace the border or if you have a border a fill and a shadow and you want to insert a color variable into a specific property on the inspector you can drag directly onto the color chip in the inspector so if i wanted a purple border i could drag it directly onto borders and now i can enable or disable that border same goes for shadows inner shadows etc so yeah you can drag directly onto the canvas or you can drag onto the inspector and i do recommend getting into the habit of dragging to the inspector because groups get in the way when you're dragging these things onto the canvas you'll notice that when i'm dragging here i don't get those blue outlines and the reason for that is because these objects are in a group and i can't change the color of the group and when i drop it it's going to insert a new object with the color rather than redefining the color so it doesn't understand which layer i was trying to drop it on and unfortunately and maybe this will change in the future if i hold command which normally drills through a group to select individual layers it doesn't seem to work so that's like an unfortunate uh little shortcoming here so there's no way to get directly into the group unless of course ahead of time you have the foresight to switch this option on the inspector to select a group's content on click in which case you can drop through the group onto the individual objects in this case i have a group in a group so i'd have to do that multiple times there we go now it should work now that there are no groups in the way at least there are no groups that are being perceived as being in the way so i can drop that directly onto an object so again groups can get in the way so you may need to drag things onto the inspector instead of on to the layer itself so that's the gist of it that's how color variables work in terms of creating them applying them to layers we also touched on find and replace which we're going to go into much much greater detail in the next video where we talk about how to apply color variables to an existing document i hope you enjoyed this video uh if you did watch part two i'll slap a link to it in this video on the screen right now somewhere and i'll see you soon

Channel: Joseph from LearnSketch.com

Views: 7,928

Rating: 4.9351354 out of 5

Keywords: sketch, tutorials, app, sketch 3, sketchapp, learnsketch, learnsketch.com, bohemian coding, sketch resources, sketch app sources, mac, osx, software, design, graphic design, web design, ui, ux, Apple, Tutorial (Industry), OS X (Operating System), Macintosh (Computer), Software (Industry), Adobe Illustrator (Software), Adobe Systems (Organization), figma, ux design, invision, invisionapp, animation, product design

Id: wASFApHAidc

Length: 17min 32sec (1052 seconds)

Published: Wed Nov 11 2020