How to make the most of Color Variables

Whether you’re working on a single webpage or an entire design system, the colors you choose have a huge impact — from usability and accessibility, to brand identity and character. With Color Variables, you can easily sync and manage colors across your designs.

In this post, we’ll share some tips and tricks to help you make the most of Color Variables.

Let’s kick things off with a quick recap!

What the heck is a Color Variable?

Let’s say you’re working on a company logo and want to make sure to use the same colors in your landing page design. With Color Variables, you can save the colors you used so they’ll appear as handy color swatches in the Color Picker popover. But Color Variables do a whole lot more than just store your colors for future use — any changes you make actually update automatically across all of the layers that use them.

You can create Color Variables that are local to a specific document or share them in a Library to use in other designs. But more on that later!

How to create a Color Variable

You can create a new Color Variable from the Inspector or the Components View. Below, we’ll give you a quick run-through of each example, but feel free to use whichever works best for you.

Using the Inspector. Select any layer and click on the color well for any of its style properties in the Inspector. Select the solid color you want to use, then click on Create Color Variable. Give it a name and click on Create or press ↵ to save.

Using the Components View. Go to the Colors tab in the Components View and click on the icon. Pick the color you want using the Color Picker and give your Variable a name. Once you’re happy with it, click anywhere outside the popover to save.

How to update colors in your design with Color Variables

Let’s say you’re back to working on that landing page and you’re almost done… except your client is now telling you they want to change their logo’s color. Other designers might panic, but you don’t have to! With Sketch, you simply need to tweak the Color Variables and they’ll update everywhere on your logo and landing page — whether you’re using them in a single document or as part of a Library.

To do so, select the layer with the Color Variable you want to update and head to the Inspector. Open the Color Picker and click on the Edit variable button. Once you’re happy with the new color, click Update. The Color Variable will then change everywhere else automatically!

Organizing your Color Variables

Once Color Variables become a staple in your designs, you’ll likely benefit from keeping them organized. Well-sorted Color Variables are easy to edit and even easier to use. You can use the Components View to rename, group and edit them.

Grouping. Select the Color Variables you want to group while holding ⇧, then Control-click on your selection and choose Group. You can also drag Color Variables into existing groups in the left sidebar.

Renaming. Once you create a group, double-click on the title in the left sidebar and type in a new name.

Editing. Click on any Color Variable and use the Color Picker to make changes.

Working with Overrides

While the main goal of Symbols and Color Variables is to keep your designs consistent, sometimes you need to make tweaks to specific instances. That’s where Overrides come in. There’s a whole panel in the Inspector dedicated to Overrides, which you can use to assign and replace Color Variables to nested Symbols or layers within the Symbol — without affecting the Symbol Source or the rest of its instances.

You can override any Color Variable, whether you apply it to a fill, border, shadow, or text layer. You can also view all your colors in a grid or a list view, and hover over them to get handy information, like names or HEX values.

Tints

Tints are an easy way to apply a solid color to an entire Symbol or group of layers. Tints are ideal for things like icons or iOS-style tab bars that combine an icon with a text label. A common use case is creating different states for your buttons — such as active and inactive. You can set these Tints as Color Variables so that they update automatically.

Deleting and detaching Color Variables

Not vibing with your current Color Variables? No problem! You can easily delete Color Variables in the Colors tab in the Components View, by clicking on the Color Variable you want to delete and hitting backspace. You can also Control-click on the color swatch and select Delete.

Other times, you might want to make changes to the color of a single layer that uses a Color Variable without updating the Color Variable itself. In this case, you’ll want to detach that Color Variable first. To do so, select the layer where you want to detach the Color Variable from, open the Color Picker popover in the Inspector and click Detach Variable.

Using the Find and Replace sheet

You can use Find and Replace Color sheet to find similar colors in your design and replace them with a Color Variable. You can also use it to replace multiple opacities of the same color — just keep in mind that when you replace them with a Color Variable, it won’t preserve those opacities.

To replace a Color Variable, choose Edit > Find and Replace Color… (or press ⌘⌥F) to bring up the Find and Replace Color menu. From there, select the color or Color Variable you want to find within your design and the one you want to replace it with.

Easy handoff with Color Tokens

We know Color Variables make designing in Sketch a breeze, but what about handoff? With Color Tokens, we’ve got it covered.

Color Tokens give you an always-up-to-date set of values that match the Color Variables in your document or Library. You can easily generate Color Tokens through the Components web view. Just open the Color Variables view and click on the Export Color Tokens button in the bottom left corner.

Currently, Color Tokens are available for download in CSS and JSON formats, which you can select from the drop-down menu in the Export Color Variables as Tokens modal. Once you’re done, press Download to save a copy of the Color Tokens.

Public links

You can also generate a URL for either format that stays up to date with any changes you make. There are three options to choose from, which you can find in the bottom drop-down menu:

• Enable link for the latest update
• Enable link for the latest Star
• Disable link

And there you have it — everything you need to make the most of Color Variables. We hope you’ll enjoy using them, and if you design anything you’re proud of, share it with us! Who knows, you could even be our next #MadeWithSketch hero 👀