Color Variables

With Color Variables, you can set colors and gradients that synchronize across your document. When you make changes to a Color Variable, those changes appear across all of the layers that use it. You can create Color Variables that are local to a specific document or share them in a Library to use across different documents.

• Color Variables let you sync colors across your document. Change a Color Variable once and it updates every layer that uses it.
• You can export Color Variables as Color Tokens or copy their individual values from the web app inspector.

Color Variables are also available in the web app Inspector, useful during handoff.

Creating a Color Variable

You can create a new Color Variable from the color well in the Inspector, from the Components View, or from Edit > Find and Replace Color.

Creating a Color Variable from the Inspector

Select any layer and click on the color well in the Inspector. Select the solid color you want to use, then click to add a Color Variable. Type a name and click Add or press ↵ to save. You can also use the eyedropper tool to create Color Variables from your display, inside or outside of the Mac app.

Creating a Color Variable from the Components View

1. Switch to Components View
2. Click the Color Variables tab in the toolbar, then click
3. Set the color you want in the color panel that appears in the Inspector, then type a name
4. Press ↵ or click anywhere in the Previews Grid to save

Organizing Color Variables

Grouping Color Variables

To group your Color Variables:

1. Switch to Components View and click the Color Variables tab
2. Hold ⇧ and click the Color Variables you want to group
3. Control-click your selection and choose Group from the context menu
4. Double-click the group title in the left sidebar to rename it

You can also drag Color Variables into existing groups in the left sidebar.

Like Symbols or Text Styles, you can also group Color Variables by using a / in their names. Anything before / will become the group name, and anything after will be the name of the Component within that group. For example, Primary/light and Primary/dark will become part of a group named Primary.

Organizing Color Variables in the Components View

Color Variables and groups will organize automatically in alphabetical order. You can use numbers in front of Color Variables so they appear in the order that works best for you. For example, 1 Primary or 2 Secondary. You can also add numbers to the end of similarly named variables, such as Neutral-100, Neutral-200.

Applying Color Variables

Applying a Color Variable from the Inspector

Color Variables appear in the Inspector wherever a color is applied — fills, borders, etc. They also show up in the Colors section, so you can quickly spot them and change them across your whole selection at once.

Select a layer, then apply a Color Variable in one of these ways:

• Click any color well to open the color picker, then switch to the Variables tab. To stop using a Color Variable, switch to Custom in the color picker — it picks up the variable’s current value, so you can modify it independently.
• Click a color in the Colors section to open the color picker, then switch to the Variables tab.
• Click a color override in a Symbol instance to open the color picker, then switch to the Variables tab.

You can switch between Color Variables from your document or any enabled Library.

Note: When you use a Color Variable for the color of a text layer and then create a new text layer in the same document, your new text layer will also use that Color Variable.

Picking a Color Variable with the eyedropper

You can apply a Color Variable by picking it directly from the Canvas with the eyedropper:

1. Press ⌃C or click the eyedropper in the color panel.
2. Hover over a layer that uses a Color Variable — the loupe labels show the variable name alongside the color value.
3. Hold ⇧ and click to apply the Color Variable. Without ⇧, you’ll pick the raw color value instead.

Applying a Color Variable from the Find and Replace menu

In the Find and Replace menu, click on the color well next to “Replace with”, and select the Color Variable you want to apply. Click anywhere to close the color picker, and hit Replace to update the colors.

Editing Color Variables

You can edit Color Variables from the Inspector, the Components View or Find and Replace menu.

You can Control-click on any Color Variable and choose Copy Value to copy its value as HEX, RGB, HSL, Objective-C, Swift or SwiftUI.

Editing Color Variables from the Inspector

Select any layer, and click on a color well in the Inspector. In the color picker, click Edit and pick a new color. Choose Update to save. Keep in mind you can only edit Color Variables that are local to your document. If you want to edit Color Variables from a Library, you will have to edit them in their Library document.

Editing Color Variables from the Components View

Switch to the Components View and click on the Color Variables tab. Click on the color swatch you want to edit and choose the new color using the Inspector. Changes will preview and save automatically.

Renaming a Color Variable

To rename a Color Variable, switch to the Components View and click on the Color Variables tab. Select the color swatch you want to rename, then type the new name in the Name field at the top of the Inspector. Your changes save automatically. You can also Control-click the color swatch and choose Rename.

Deleting a Color Variable

To delete a Color Variable, switch to the Components View, and click on the Color Variables tab. Select the swatch of the Color Variable you want to delete and hit backspace. You can also Control-click on the color swatch and select Delete.

Find and replace a specific color or Color Variable

Choose Edit > Find and Replace Color to bring up the Find and Replace Color menu, or open the Command Bar and type “replace” to find it quickly. From there, select the color or Color Variable you want to find within your design and the color or Color Variable you want to replace it with.

Enable “Include all opacities of this color” to find all colors with different alphas, but the same RGB or HEX values.

Enable “Preserve original opacity” to keep those different alphas intact when you replace the color.

Note: We built a plugin to help you migrate to Color Variables. They’ve been around for a while, but this plugin makes it easier to apply them consistently across your documents. It automatically assigns Color Variables to any layers, Text Styles, or Layer Styles using the same color — even if they weren’t using a Color Variable before.

Using Color Variables in developer handoff

Color Variables keep colors consistent between design and code projects. You can download Color Variables as Color Tokens, as CSS variables or in JSON format, or even generate a URL that dynamically updates with the latest values. You can also copy values for individual Color Variables from the web app Inspector.