So excited about this release! I spent a good chunk of my Config talk discussing workarounds for using wide gamut colors in Figma, and this update addresses them all. See this thread by Qi Linzhi on the engineering challenges of implementing support for Display P3.

The next thing I hope for is a more precise way to select colors. Figma relies on hex values in the UI, but they’re supposed to be limited to sRGB and aren’t representative of what you’ll see in the browser. The Dev Mode uses the correct color(display-p3 R G B) syntax as an output, but that doesn’t help much with input. Besides that, I’d like to see when the color is outside of the sRGB range and what is its closest fallback. OkLCH isn’t the easiest color space to use, but OkLCH picker gets that part right.

Ridd shares a free annotation components library to help designers communicate more effectively and nail down the handoff process. Comes with a video lesson on organizing Figma files using the helpers library.

…and one more list, but for advanced prototyping!

At Smashing Meets Figma event, Christine Vallaure showed how to add real data to your Figma designs, and various ways to include Google Sheets and API data via Kernel.

Miggi on using sections in Figma for prototypes and how to preserve the state of a given flow.

Designer Advocate Mallory mapped out a helpful list of resources like YouTube videos, playgrounds, community files, plugins, and articles to get started with Variables.

Molly shares her 3 favorite tips from the Config talk ​“Designer and developer workflows unlocked using Dev Mode” — using ​“Compare changes” (my favorite as well, and the first thing I showed my team!), testing components in the Playground, and switching between the design and Dev Mode by pressing the Shift‑D shortcut.

“In this livestream, Jake, Lauren, and Emil dive into Dev Mode, the newest space in Figma built for developers.”

Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.

Emily Brody, Product Marketing Manager at Figma, writes about the go-to-market strategy for the Dev Mode and how the team prepared for the launch and triaged bugs, requests, and feedback during the first two weeks.

Security improvements to public links — auto-generated passwords on all plans and expiring public links on the Enterprise plan.

A new tutorial from Vijay Verma on creating an animation for a loader indicator shaped like a glass filled with liquid. The prototype uses a few variables and conditions, and he shares them in the cheat sheet in the thread.

Sam Gordashko collected resources on variables and advanced prototyping for the Design System University community, based on topics designers often struggle with.

Christine Vallaure wrote about one of the most under-the-radar new features of the Dev Mode — units conversion. Now, you can design with pixels and then translate them to rem or other relative units in code. (Thanks for sharing the friend link with Figmalion, Christine!)

Luis Ouriach with an introduction to variables and a primer on how to structure your variable collections for single and multi-brand systems.

Mark Steinruck shows how to scope variables for certain components to appear unchanged in light and dark modes.

Niko shares how advanced prototyping came from a vision in June 2022 to reality at Config 2023. The team had to ship variables, multiple actions, expressions, and conditionals simultaneously to make it happen. This release is a huge achievement and the team should be celebrated for it.

Fantastic post by Developer Advocate Jake Albaugh on how component properties can be translated and aligned between design files and coding frameworks to help designers and developers work better together. ​“Implementing components as a designer in Figma differs from implementing as a developer in a codebase. When you optimize for the developer or designer experience with a component, it is tailor-fit for that specific purpose — even if it shares a name with a component in another environment.”

Codejet converts designs to production-ready code. Create a project in Figma, and Codejet will convert it into React and TypeScript code. Was voted Product Hunt’s Product of the Day on July 13th.

A preview of the new ray tracer plugin currently in development by Yi Shen. Some of the examples are pretty wild!