As you may have noticed, I have a soft spot for color tools supporting perception-based color spaces. Taras Brizitsky writes about the plugin Generator that he built with Alex Bourt. It’s a really cool idea and implementation — start with a color, apply a set of visual modifications and conversions, and generate an entire palette from it. Change the starting color or modifiers to update all generated colors. Awesome!
USWDS is an open-source design system for building accessible and mobile-friendly government websites. There is no official support for Figma yet, so Patrick Morgan added the color library to the Community and explained why he settled on this design system for his projects.
Never noticed this before, but it’s such a nice touch! 👏
Shoutout to @figma for determining the background color of a shape and automatically setting the text color as black or white depending on contrast ratios to ensure accessibility. pic.twitter.com/ST1vTpf1Dc
Rasmus, who used to work on this at Figma, shares his workflow for designing in P3 color space and exporting assets in sRGB. Sadly, it’s still a very tricky process.
I wish Figma implemented color space support (color management.) I design in P3 and my workflow for exporting images is: export, run imagemagick to assign the correct profile (my workspace profile). Finally, run imagemagick to convert the image’s colors to sRGB.
If you’ve ever used my tool Accessible Palette, one of its core features is support for Advanced Perceptual Contrast Algorithm (APCA) — a great alternative to a basic contrast algorithm in WCAG 2 and the current recommendation in WCAG 3 Draft. This plugin is a simple contrast checker using this algorithm and taking into account fonts size as well as background and foreground colors.
Dan Hollick explains why colors in Figma can be different from the colors found on the web. Personally, I usually keep the Figma desktop app in sRGB color space to avoid surprises, only switching to Unmanaged for specific tasks.
Have you ever used a color in Figma and found it looked totally different on the web?
“We created this UI Kit to help you design and build mobile screens in dark mode. Components and layers were created with versatility in mind and can be edited to fit your needs. All the colors meet WCAG (Web Content Accessibility Guidelines) when used in the recommended way.”
Announced at Schema 2021, this is a new tool that helps you visualize Material You’s dynamic color and create a custom Material Design 3 theme. With built-in code export, it’s easy to migrate to Material’s new color system and take advantage of dynamic color. Don’t miss the article Introducing Material Theme Builder.
Cool plugin by Tom Quinonero for creating gradients through color spaces like LCH and ZYX with non-linear curves. There are so many cool use cases for color spaces like LCH — it’s a real pity that they’re not a standard part of Figma.
Interesting discussion about exporting assets with a Display P3 color space from Figma. I wasn’t familiar with Export PNG with Color Profile plugin (see below) or an option of assigning an ICC profile to the exported PDF.
I’d try this: 1. Setup your macOS to use P3 (display) 2. Setup Figma (desktop app, main menu) to use “unmanaged” color (= display space) 3. Assign P3 ICC profile to output PDF