Andrey Sitnik (author of PostCSS and Autoprefixer, used on pretty much every website) goes a little deeper into platform-independent (CSS) vs. platform-specific (Figma, Photoshop) implementation of P3. He also added ​“Figma P3 hex” as one of the accepted formats to OkLCH Color Picker, which makes using Figma values in OkLCH much easier.

The introduction of wide gamut Display P3 colors to the design tools ​“broke” the familiar hex notation that all of them have been relying on. The transition to modern notations will be painful and take time. I share some context in this thread, but the main takeaway is to NOT use the #RRGGBB values for hand-off or external tools when working with P3 colors.

Honestly, speed it up a bit and this little delightful animation is a keeper!

During Maker Week, Rogie built a handy plugin for attaching files to the Figma document for hand-off. Great tool for sharing fonts, high-resolution pictures, or other assets with developers.

Luis updated Figma’s public UI2 design system file with all the features and elements introduced since its last update in 2019. His process is fascinating to follow and shows how much work went into this little update! Also has some great tips on plugins and the organization of a large design system.

Last week Figma had their version of a company hackathon, Maker Week. I love everything about this — from dope branding to the inclusion of all teams. In this thread, they go through some of the past projects, but for the last 3 years, I’ve been collecting a (much longer!) list of my own. (Two years later, I’m still jealous of this keyboard by Robert Bye.)

A preview of the design lint plugin for identifying and fixing issues like missing tokens or styles.

A new plugin from the Tokens Studio: ​“Already have your variables set up and want to bulk apply them to your work? You can swap styles with variables or apply variables that match raw number values to elements in any file with access to your variables collections!” See also the walkthrough video.

Use Stable Diffusion to create unique AI images for your designs without ever leaving Figma with this text-to-image plugin. Won the ​“3rd Product of the Day” at ProductHunt on August 1st.

Vijay recreated a Fujifilm X100V camera using mostly primitive shapes with shadows and gradients. As a Fuji shooter since the days of X‑T1, I love seeing his attention to detail in this illustration! See this thread for his tips on creating a metal pattern and a camera texture.

Amazing animated illustration of a typewriter by Samarth Jajodia.

Interested in learning how to migrate from Styles to Variables? Join Luis Ouriach, Akbar Mizra, Jacob Miller from Figma, and Jack Minogue from Ford for a look at approaches you can use to lower the friction of your rollout of variables.

Christine Vallaure reminds us of using Selection Colors for applying variables to multiple objects.

An interesting challenge from Miguel Solorio — how to make nested icons in a component inherit color overrides when switching between outline and solid styles without having to outline the strokes? Two solutions that surfaced in comments are using a mask or a union.

John Maeda shares takeaways from his Design in Tech Report, thoughts on designing with artificial intelligence, and why we should embrace uphill thinking in a world optimized for shortcuts. See also the livestream ​“Diving deeper: Designing with AI in the future”.

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.

I love the format of this new newsletter. Every week, Aleks summarizes the many discussions and hot takes that took place on Design Twitter (or should we call it ​“Design X” now?!) It’s a valuable community service and I enjoy the roundups!

Aaron Shapiro talks about his work as a Staff Product Designer at Patreon to ​“guide product, design, and engineering teams in an effort to clean up a decade of cruft and reimagine their existing design system.” It’s a fascinating behind-the-scenes look at how an expansive design system is being built, but I also love this format and storytelling way more than a regular portfolio presentation.

I shared a sneak peek of this plugin by Yi Shen in issue #123, and now it’s available in the Community: ​“This plugin converts text and vector nodes into 3D models with just one click! The converted models will be automatically placed and rendered with GPU ray-tracing. You can use it to render a nice 3D icon, text, or any other 3D-style images without being a 3D specialist.”

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.