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 in other designs.
- Color Variables
can speed up your workflow and keep designs organized. - They synchronize across your document. When you change a Color Variable it will update any layer that uses it.
- Any existing Global Color presets are now Color Variables and live in their own local Library.
- You can export Color Variables as Color Tokens or copy their individual values from the web app inspector.
We’ve also added support for Color Variables in web app Inspector, making them great for handoff.
Creating a Color Variable
You can create a new Color Variable from the Inspector, from the Components View or from the Find and Replace menu.
Creating a Color Variable from 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. 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
Switch to Components View 
, click on the Colors tab in the toolbar and then click on 
or Create Color Variable button. Pick the color you want using the Inspector and give your Color Variable a name. Click anywhere in the Previews Grid to save.
Organizing Color Variables
Grouping Color Variables
To group your Color Variables, switch to Components View , go to the Colors tab, hold ⇧ and choose the Color Variables you want to group. Control-click on your selection, and choose Group. Then, you can double-click on the title of the group 
in the left sidebar and rename it as you like. 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.
Applying a Color Variable
Applying a Color Variable from the Inspector
There are two ways you can apply a Color Variable from the Inspector. In both cases, you’ll need to select the layer where you want to apply a Color Variable. In the color well for any style property you can select the Color Variable you want from the grid. You can switch between the Color Variables for that document or any Library you have enabled. You can also apply a Color Variable by clicking on the color swatch icon 
next to the color well.
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.
Applying a Color Variable from the Insert Window
Choose Window > Components to open the Insert Window or use the shortcut C in your keyboard. Click on the Colors tab in the top-left sidebar, then drag and drop the color swatch you want onto the layer you want to apply it to. You can also drop the Color Variable onto any color well in the Fills panel in the Inspector.
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 to copy its HEX, RGB, HSL, Objective-C or Swift code color values to the clipboard.
Editing Color Variables from the Inspector
Select any layer, and click on a color well in the Inspector. Click on Edit Variable 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 Colors 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 Colors tab. Then, select the color swatch you want to rename. Under the Name section in the Inspector, type your new name. Your changes will save automatically. You can also Control-click on the color swatch and choose Rename.
Deleting a Color Variable
To delete a Color Variable, switch to the Components View, and click on the Colors 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.
Detaching a Color Variable
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 detach a Color Variable from the Inspector, select the layer where you want to detach the Color Variable from, click on the color well in the Style menu in the Inspector, and click Detach Variable.
Find and replace a specific color or 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 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’ve released a Color Variables Migrator plugin that makes it easy to apply Color Variables to Layers and Styles in older documents.
Using Color Variables in developer handoff
Color Variables are great for keeping 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.
