A new plugin from Daniel Destefanis for creating mesh gradients either by hand or by using the colors from an image. Available on Figma Community or as a standalone tool.

A fully redesigned eyedropper for UI3 now supports color variables and styles! Rotate between color formats with the Tab key — previously, that could have been changed only in the color panel. Switch between picking the raw color value or a variable/​style with a Shift key or creating and applying a new color variable/​style by using the shortcut Command-Shift. See an in-depth demo from Ana.

This update is near and dear to my heart, as I talked about color formats and working around a lack of support for styles in an eyedropper back in 2023 at Config. Love that both features are now so straightforward to use!

The talented design team at Evil Martians makes a strong case for adopting opacity as a core component of your color system: ​“Transparent colors are a staple of modern operating systems, yet, for some reason, web apps still underutilize this marvel of modern interface design. And what happens when you properly integrate transparent colors into your design toolkit? You can minimize the number of design tokens, styles, and component variations — making your workflow more efficient and flexible.”

Smashing Magazine interviewed Björn Ottosson, the Swedish engineer who created Oklab color space, about developing an effective model with good hue uniformity that handles lightness and saturation well, and how it spread across the ecosystem.

One of the most common problems that Oklch solves: ​“One problem with sRGB is that in a gradient between blue and white, it becomes a bit purple in the middle of the transition. That’s because sRGB really isn’t created to mimic how the eye sees colors; rather, it is based on how CRT monitors work. That means it works with certain frequencies of red, green, and blue, and also the non-linear coding called gamma. It’s a miracle it works as well as it does, but it’s not connected to color perception.”

Jake made a plugin that brings the power of CSS color-mix() into Figma. Use it to generate swatches, variable ramps, and solid or gradient fills. I highly recommend watching Jake’s video if you’re unfamiliar with this CSS notation.

I look forward to the next release of Supa Palette with support for OKLCH and reusable configs!

It was a great episode of the ​“In the File” series, where Luis Ouriach talks to the designer Yann-Edern Gillet and engineer Andreas Eldh from Linear about the recent update of their design system. I love their use of the LCH color space to generate a consistent palette and tight collaboration between design and engineering.

Loren Baxter shares at Sneak Peek how to use Figma variables to design a dynamically colored UI for light and dark modes.

A day before Config, teams from GitHub and Figma hosted a dev community event with lightning talks. The recordings are finally available.

In the first talk, Katie Langerman, Staff Systems Designer at GitHub, shares how designing, testing, and shipping new design tokens at scale without disrupting users requires meticulous planning and care. She discusses how the Primer design system team revamped Primer Primitives with a new naming convention and build process, connecting core Figma libraries with code.

Recolor and remove colors from raster images with a solid color fill, like the Color Overlay effect in Photoshop.

This is a topic near and dear to my heart. Ana discusses the benefits of using color scales — consistency, accessibility, and efficiency.

In addition to setting a single color with the plugin above, this one defines color scales: ​“Use this Plugin to generate Color Palettes with Variations in the OKLCH Color Space. The shades can vary across Lightness, Chroma, Hue. The ability to control these individual parameters makes it perfect for building palettes to be used in interface design, because you can use the shades that vary in these parameters to establish hierarchy, contrast, attention, etc.”

Finally, a solid color picker that lets you control color in LCH for both fills and strokes! ​“This simple color picker allows you to use the LCH color space in your designs with ease. The LCH color space is perceptually uniform and significantly simplifies creating and modifying color systems.”

Minor but helpful change to the color picker — limit the options only to the current page.

Cool little app for generating a consistent color palette from Lightness, Chroma, and a given number of Hue steps using OKLCH.

A new plugin by Vijay Verma for generating pleasant color palettes and gradients in one click.

Designer Advocate Ana Boyer takes us on a deep dive into typography and gradient variables, sharing best practices for leveraging these new features in your design system.

Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because ​“building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.

Color variables can now be bound to gradient stops and saved as a style.

Free plugin for generating linear, radial, and conic gradients interpolated in a variety of color spaces, yielding richer, more brilliant gradients. Live updating so you can easily view and tweak the results.