Articles

What an incredible introduction to color spaces! It starts by stating an important point that ​“color spaces are all constructs”, then proceeds to explain how useful one particular color space from 1931 is: ​“CIE XYZ turns color mixing problems and color matching problems into math problems. This has proven so useful that every modern color space is defined in terms of CIE XYZ. When we say that a system is ​“color managed” what we’re saying is: it’s built on top of CIE XYZ.”

Later it covers my favorite topic of perceptual uniformity and explains why it’s so hard to achieve — communicating meaning in data visualization, storing colors digitally, measuring contrast to ensure accessibility, and rendering even-looking gradients are all highly desirable use cases. Both CIE XYZ and sRGB can’t do it: ​“sRGB, the web’s dominant, default color space, was constructed in order to model a typical 1990s cathode-ray tube display.” On the first attempt to create a perceptually uniform space: ​“Whereas every color theorist before Albert Munsell (and many, after him) worked from the ​“frame in”, trying to cram all visible colors into a regular shape like a wheel or a sphere or whatever, Munsell instead worked from the ​“content out”, trying to create even intervals between adjacent colors and letting each ​“branch” extend as far as it could before he reached some limit of saturation. The resulting solid resembles a lumpy, lopsided spinning top.”

In the end, he explains why and how the Oklab color space proposed by Björn Ottosson in 2020 became rapidly adopted by the web platform and tools. (Not all tools yet — wink-wink!) Lab parameters in ​“a” and ​“b” are hard to work with, so OKLCH offers a user-friendly way to navigate the color space through Lightness, Hue, and Chroma. That’s the color space I rely on the most in my work.

The Stark team prepared simplified and actionable explanations of WCAG 2.2 criteria. ​“This is a collection of summaries of each and every criteria from the WCAG 2.2 designed for clarity, simplicity, and actionability. The WCAG is complex and detailed so we wanted to give you something that takes the awesome efforts that went into creating it and gives it to you in a really easy to understand package.”

Designer Advocate Chad Bergman explains the basics of design systems — what they are, how they work, and how they can change the way you design.

Stumbled upon this old blog post from 2019 by Alex Harri, one of the engineers behind Figma’s Vector Networks. Fascinatingly deep dive! ​“This post can be thought of as an introduction to a really interesting problem space, and as a resource for people interested in making use of some aspects of Vector Networks for future applications. I hope it succeeds in providing value to both developers being introduced to new concepts and ideas, and to designers interested in learning more about the tool they know and love.”

Erez Reznikov shows some examples of the divergence between how code and visual design tools treat interactive elements and components in general, then suggests an alternative to the handoff process. ​“Construct tools and processes for designers and developers that will make it much harder to not be on the same page. Suppose a design tool would be made out of real elements, with an already existing, verified structure, that is backed by code beneath it all. You mainly see web builders do it today, like Webflow and Framer. When you use an element like a checkbox in these apps, it’s a real, working checkbox.”

I keep seeing complaints about the removal of code generation from the free view-only mode, and want to point out this section of the ​“Dev Mode is out of beta: what admins need to know” article. CSS, iOS, and Android codegen is still available but now is in the copy/​paste menu when you right-click a layer and choose ​“Copy as code”. For an overview of the other collaboration features available on the free plan, see Use the right sidebar with view-only access help article.

Clara Ujiie led Workday’s migration to Figma in 2019. Now as a Designer Advocate at Figma, she helps other teams through similar transitions, sharing ways to work better together. Based on these experiences, she is offering a blueprint for teams adopting Figma.

I have a dedicated tag #Switching to Figma for this topic, but out of 60 shared stories only one was added in the last 2 years — a pretty good indicator of adoption.

Always love deep dives from people behind the features! Product Designer Oscar Nilsson explains how Annotations came to be — for both design and development. On why annotations are in the Dev Mode: ​“We wanted one dedicated space to curate a spec for developers and call out necessary details or areas of confusion, so we ultimately decided that designers should go to Dev Mode to annotate. In doing so, designers would see exactly what their developer counterpart sees while annotating, and they could share a link to Dev Mode when they’re done. Our goal is not for Dev Mode to silo developers once a designer’s work is done — but to engage the broader team in the product development process, with annotations being a first, crucial step.”

On positioning in context: ​“Testing and iterating on our positioning logic became an adventure on its own. We explored a direction in which annotations hide until you click on a corresponding frame. That felt right in theory, but once we actually tried it, we realized that it was still easy to miss out on important annotations if you were just looking at a frame without actively selecting it. We then iterated on different versions of automatically expanding annotations based on zoom level and position, and it immediately felt more intuitive.”

Dev Mode moved out of beta last week, and in this article, the Figma team talks about their product philosophy, how they’re improving the experience for developers and designers, and what’s coming next. There are new features that bring design and code closer together, including annotations in Dev Mode, along with improvements to compare changes, plugins, and the Figma for VS Code extension.

How it started: ​“We needed a team that lived and breathed development like we did design, so in 2021, we acquired Visly — a team of eight designers and engineers who built a tool for developing UI components in React. […] The Visly team brought with them years of hands-on experience and months of research on developer tooling — in other words, they had the developer ​“intuition” we were looking for.”

How it’s going: ​“Dev Mode aims to make you more productive by connecting the tools you use and your code components to the design file. There’s no one way to work, which is why we built Dev Mode to adapt to a variety of tools, processes, and workflows. Whether you’re looking to link design and code with Storybook, ensure accessibility with Stark, or streamline project management with Jira, Linear, and GitHub, plugins allow you to extend Figma’s functionality to flex however your team works.”

That might be 2 too many Adobe news for a single issue, but I’m glad they’re shipping something for the Apple Vision Pro on day 1! From The Verge: ​“Adobe’s Firefly AI, the text-to-image tool behind features like Photoshop’s generative fill, will be available on the Apple Vision Pro as a native app, alongside the company’s popular Lightroom photo editing software already demonstrated during the headset’s announcement.”

(Archive link without a Bloomberg paywall.) RIP Adobe XD. The writing was on the wall even back in 2022, but now I wonder if Adobe will just leave a big gap in a cohesive offering of the Creative Suite? Lively discussion at Hacker News.

“When it agreed to buy Figma, which helps users design app and website interfaces, Adobe put its competing program XD in ​“maintenance mode,” ceasing to launch new features or sell it individually. The deal to purchase Figma fell apart under regulatory pressure in December and the creative software giant hadn’t announced whether it would resurrect XD or attempt to build another competitor. ​“We have no plans to further invest in it,” a spokesperson said Tuesday of XD.”

Great observation and essay from Niki, with a beautiful roundup of historical examples.

An inspiring story from Corey Lee on becoming a Figma Designer Advocate in Japan through community work and advocacy. ​“I’d never heard of a Designer Advocate but after reading the role description I realized all the things I had been doing up until that point all related to the role: advocating for design, enabling designers, creating content, and building community. I already was a designer advocate.”

After being introduced at Config 2023 last June, Dev Mode will move out of free beta on Wednesday, January 31. Last week, Figma showed improvements and features they’ve been wrapping up before the release. Annotations are a big one — ​“designers can share additional context, specs, and measurements that are connected directly to designs, and developers can easily see designers’ notes as they work, ensuring that they don’t miss any crucial callouts during handoff.” Teams that did this manually will save a ton of time and effort. (As the top comment on Reddit suggests, flow arrows are a missing piece for annotations and something I’d love to see brought from FigJam.)

The compare changes modal was redesigned to show diffs both visually and in code. This is one of my favorite features, and I wish it wasn’t limited to the Dev Mode. I duplicate frames to riff on ideas all the time, and the compare view is an incredible tool for reconciling the differences between the two versions.

Enterprise customers can set plugins to run by default in Dev Mode for all files in their organization — ​“for example, you may want to check that you’re using a design system correctly, show links to design systems documentation, include information about internal APIs to use, or confirm whether a design uses components that already exist in your codebase.” Finally, the Figma for VS Code extension was redesigned to run plugins and improve the navigation and discoverability of design files. Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with a focused view.

Common keyboard shortcuts for developers to perform actions like zooming, dragging the canvas around, copying the link to a specific screen, selecting the parent of your selection, exporting selection, and toggling a layout grid.

Short but awesome tips from multiple creators to work faster in Figma.

Luis wonders whether variables scoping provides enough semantic modification to justify removing explicit ​“background”, ​“border”, and ​“text” color variables. ​“What’s stopping us from maintaining a single, primitive set of variables, named as such (e.g. red-300) to match your developer’s framework, relying on scoping alone to bridge this gap?” (See the discussion in this thread on X.)

I also like this take from Nate Baldwin — primitive color palettes are inherently semantic because every lightness stop is knowingly created to be used for specific use cases. He supports this idea with examples from his work on Adobe’s Spectrum color palette.

Figma sent a sample of its Creator Micro keypad to an Ars Technica reporter: ​“OK, it’s fun, I’m saying. It’s fun to have a little box for little computer tasks, rather than efficiently doing them all through one slab you must memorize under pain of being considered unoptimized. Sometimes I just twirl the volume knob up and down, with nothing playing, because it’s fun to twirl a knob.”

You can now select incompatible modes on layers, to make it easier to diagnose layers that aren’t able to use the mode (via Jacob Miller).

Speaking of books, I’m in the middle of a work project involving data visualization and felt like I needed a refresher and a solid reference. I’m reviewing Edward Tufte​’s books (how are they not on the above list?!), but also landed at ​“Fundamentals of Data Visualization” by Claus Wilke while looking for an answer to a specific question. Seems like a highly practical book with clear guidelines. An entire book is available online for free and seems to be out of print, but after skimming through a few chapters I ended up ordering a copy from AbeBooks.