The Fill Popover has some major redesign yet it looks minor, some new features might surprise you! I’ve seen 9 new features/updates for Fill Popover, let’s jump in more details one by one.
🎨 1/9 Appearance, Icons, and Placement
The obvious redesign will be the color palette is in Circle instead of Square. This redesign will align with the shape of different mode selection in Fill Popover. Even the Slider Selector in the color spectrum and alpha slider are in a circle shape too.
The icons in Fill Popover like the Arrow (▼) and Plus (+) icons are now in thinner stroke, which makes it consistent with other thin stroke icons they use in the app. The new Arrow (˅) icon that can be clicked to expand and collapse the section is now placed at the right-hand side. And the Plus icon to add new global or document color is now placed at the right side and same line as the Global title.
🎨 2/9 Pattern Fill
The Noise Fill has been moved into Pattern Fill in Sketch 53. The Pattern Fill is redesigned too. You will need to mouse over the preview pane and click “Choose Image…” or drag an image into it to change the pattern.
🎨 3/9 Frequent Colors/Images Used in…
Frequent Colors Used in… and the new Frequent Images Used in… are now a Time/Clock (🕓) icon beside the title Color Picker.
🎨 4/9 HSL
Do you know that you can switch color mode from RGB to HSB? And Sketch is introducing a new family into the color mode which is HSL! I used HSB a lot for my UI design to easily get the different shade of one color. It’s useful for getting different shades for the button states like normal, hover and pressed. Sometime I will use it to get the different dark tone of typography. You can read more about using HSL colors for your UI design here.
🎨 5/9 Dropdown Menu for Global and Document Colors
One thing I dislike about the Fill Popover is they move Global Colors and Document Colors into a dropdown menu, same as for Gradients. It is no longer two separate sections.
But I think it is because Sketch team introduce the new List View of the color palette. If Global and Document Colors are kept in two separate sections, the Fill Popover will be super long when switch to list view.
🎨 6/9 Grid and List View
You can switch to List View by clicking on the List (☰) icon on the right of Plus icon. Now the color palette will be present in list view with their HEX code at the side.
The List View is not only the new feature in color palette. Now you can right click on each of the color palettes and there is a new context menu!
🎨 7/9 Context Menu: Copy/Move Colors
Since the color palette is not longer in section, you can’t drag and drop colors to or from Global and Document Colors. But you use the context menu Copy or Move the selected color from Global to Document or vice versa.
🎨 8/9 Copy Color Value to Clipboard
The most exciting feature is the next menu: Copy To Clipboard! 😍 You can get color value of the selected color in HEX, RGB, HSL, NSColor (Objective-C or Swift) or UIColor (Objective-C or Swift). It is a very handy feature for developers.
🎨 9/9 Rename and Delete Colors
The following feature in the context menu is Rename and Delete. Once you click on the Rename, the Grid List of the color palette will automatically switch to List View then you can start to give a name to the color. Lastly, the Delete is to remove the color from the respective palette, or you can drag the color out of the Fill Popover to remove the color too.