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.
— Rasmus Andersson (@rsms) June 15, 2022
Supa Palette is an all-in-one palette editor and generator. Love that it supports modern color modes like LCH and Oklab, as well as correcting lightness for balanced palettes.
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?
— Dan Hollick 🇿🇦 (@DanHollick) December 15, 2021
Well I have some good news:
a) you're not crazy.
b) that's changing. pic.twitter.com/F5pOYYdY1g
“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.”
“Associates colors to styles if it finds matching or very similar ones.”
Design in one theme and automatically switch to other themes within a color system.
A new plugin from Gleb Sabirzyanov for getting custom colors from Figma to FigJam.
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.
A tool for exporting PNG with an embedded ICC profile such as Display P3.
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:
— Rasmus Andersson (@rsms) September 3, 2021
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
A guide to creating the perfect palette with Material Design. While it’s not strictly specific to Figma, the recommended Baseline Design Kit makes it easy to preview a custom color palette in the Material Design system.