Color Variables, Components View and a new Insert Window — what’s new in Sketch?

With this latest Mac app update, we’re introducing three features that we think you’re going to love. First, Color Variables — a long-requested feature and a foundational building block for any design system. Then, a new Components View — a proper home for your document’s local Symbols, Text Styles, Layer Styles and Color Variables. Finally, a new Insert Window that makes finding and inserting Components easier than ever.

Color Variables

Whether you’re working on a one-off project, or managing a complex design system, keeping the colors you use consistent and up-to-date is important. And with Color Variables, we’ve made that a lot easier. They work exactly how you’d expect them to — you can apply them wherever you’d normally apply a solid color. And when you make a change to a Color Variable, you’ll see that update reflected automatically across every layer that uses it.

You can create Color Variables right from the Color Popover. We’ve also introduced a menu to help you quickly access and apply existing Color Variables. You can edit them either from the Color Popover or from the new Components View.

Color Variables replace solid color presets. When you open a document, we’ll automatically convert any existing solid color presets in it. Any global solid color presets will become their own local Library, available for every document that used them. If you want to edit them, simply open the Library document from the Libraries preference panel, like you would with any other Library.

We’ve had plenty of requests for something like Color Variables over the years — and throughout development and testing we’ve found them to be incredibly useful. We hope you will, too! For more information, take a look at the documentation. We’ve also put together a short video to show you more and released a Color Variables Migrator plugin to help with adopting Color Variables in your older documents.

Components View (Beta)

Along with a whole new type of Component, this update also introduces a new home for them. The new Components View gives all of your document’s Symbols, Text Styles, Layer Styles and Color Variables the space they deserve.

Clicking on the Components View tab in the Toolbar will switch out the Canvas for a whole new view in your document’s window. There, you’ll see a grid with a preview of every Component in your document. From there, we’ve made it easy to organize them into groups, rename them, and even edit them in bulk using the controls in the Inspector. In other words, you no longer need to manually create a page full of text layers for the sole purposes of viewing and editing Text Styles.

This new Components View is all about organizing and editing Components that are local to your current document. Components from other Libraries are (by design) read-only, so you won’t see those here. To view and edit those, you’ll need to open the Components View inside that Library’s Sketch document.

Conceptually, the Components View has been a long time coming and we couldn’t wait any longer to share it with you. With that in mind, we’re launching it in Beta and we’ll bringing some additional improvements and polish to it over future updates. For now, though, you can take a video tour of the Components View or read the documentation.

Insert Window

The new Components View makes it easy to keep your Components organized. And we thought inserting them should be just as easy, too. Our Insert toolbar menu does a great job of that, and in this release we’ve improved it with a search field that we previously introduced to the Symbol swapping and Overrides menus.

But we knew we could improve this workflow even more. So in this release, we’re introducing the Insert Window. As the name suggests, the Insert Window is a separate window, built specifically for browsing and inserting Components — from your local document or any Library you have enabled.

We’ve worked hard to make using this new Window fast. You can simply tap C on your keyboard to open it, type to search for what you need, filter between Component types, or browse through specific Libraries and groups in the sidebar.

When you find what you need, simply drag-and-drop it onto your Canvas. The window hides itself when you do this so you can see the entire Canvas, but you can also pin it to have it reappear automatically.

We’ve also added a few nice drag-and-drop features — like the ability to drop a Text Style onto a text layer to apply it, as well as Layer Styles and Color Variables with other layer types. You can even drag Color Variables onto Color Wells in the Inspector, and Symbols onto overrides.

For more information on the Insert Window, you can take a look at the documentation or watch our video.

More updates, improvements and fixes

Along with Color Variables, the Components View and Insert Window, version 69 of the Mac app also includes:

• Smarter grids — Re-ordering layers in grids, by dragging on their circular center handle, works in a more natural way. Layers will now shift around in way that avoids adding extra rows or columns.
• A new name for Symbol masters — As part of an industry-wide change with Figma and Adobe, we’ve renamed Symbol masters. We now refer to a Symbol master as a Symbol Source.
• Offset Path improvements — We’ve moved the Offset Path controls into the Inspector and now temporarily show you an outline of the original path to give you a sense of scale while you’re making adjustments.
• Crash and bug fixes — As always, we’ve squashed some pesky bugs and fixed some unexpected crashes.

Version 69 of the Mac app is available right now and we hope you’ll enjoy these latest updates. We always appreciate your feedback, so if you have questions or run into any issues, please get in touch. Meanwhile, keep an eye out for the next update which includes a nice UI refresh for macOS Big Sur. 😉