Color spaces. Shortcuts game. Life post-Adobe.
What’s New
Okay, Color Spaces
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.
Design tool links sent to devs = frustration?
“For designers already using Figma, Dev Mode seems like a quick fix to the ongoing challenge of design-to-dev handoff. But Figma remains a designer-first platform, and the price of Dev Mode seats may not make sense for developers. The alternative: a platform specifically developed for bridging different design-dev workflows in a shared space.
If you’re not wowed with what Dev Mode offers for handoff, consider Zeplin. Zeplin was the first platform built to meet the needs of your whole product team — and it’s more mature and feature-rich than Dev Mode. Better still? It’s 25% off through March, which puts it at half the cost of Dev Mode seats.”
5 things designers need to know for a smooth handoff
Designer Advocate Lauren Andres shares tips on how to streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration. Her advice involves using annotations in Dev Mode, adopting a shared language, organizing your files with sections and “Ready for dev” statuses, archiving old designs, and leaning on components.
Announcing Design System Sync: A more seamless Figma to Webflow integration
Webflow announced Design System Sync, a more seamless integration between Figma and Webflow powered by the new companion Webflow App for the Figma to Webflow plugin. The new app allows instant synchronization of design components and variables: “This means that any change made in Figma can be directly reflected in Webflow, eliminating the need for manual updates and ensuring that the final website is always in sync with the latest designs.”
Using Figma
Figma Shortcut Master Game
“Figma Shortcut Master Game is a cool prototype made in Figma. It’s a fun way to learn Figma keyboard shortcuts or test what you already know.” There is a total of 11 levels but they’re pretty challenging! Impressive what you can achieve with just a Figma prototype.
7 Tips: Typography in Web Design
Tom Biskup shares practical tips on improving typography in your project — learning from others with a Chrome plugin, setting your type in Figma, keeping it simple by limiting choices, thinking in systems and setting a type scale, using ChatGPT for filler copy instead of “lorem ipsum”, and picking fonts from great foundries.
What interviewers look for in a Figma file
Paavan gives a few tips on organizing your Figma files if you include them as a part of your job application or portfolio review.
Made in Figma
Circuitry
Beautiful illustration by Pawel Olek. Ridd is spot on — we’re entering the “circuitry era of web design”.
Plugins
Curve Text
A new plugin by Lichin Lin to bend your text into a circle, square, or even arch shape.
Figma to Replit
Replit launched an experimental Figma plugin that converts designs into runnable React code. “Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.” Read more about this experiment in their blog post.
Trace
More Figma-to-code solutions: “Trace helps you convert your Figma designs to live SwiftUI prototypes within minutes. You can also preview, view code, edit, export, etc. on the fly. Trace uses AI to write SwiftUI code and compile the entire project within minutes.”
Resources
Microsoft Excel + Word
Mockups of Word and Excel interfaces, if you ever need them in your designs or demos.
Backstage
Figma’s CEO on life after the company’s failed sale to Adobe
(Archived link without a paywall.) The Verge sat down with Dylan Field for his first extended interview since the acquisition fell through. First, they discussed the impact on the team — Figma cut internal valuation in half to $10 billion and updated everyone’s comp packages to account for the lost value from the deal not happening. Also, they announced the severance program called Detach (get it?!) for anyone who wanted to leave — around 52 people or 4% of the employees took it.
The company is doing well: “The business has been cash-flow positive for a while, I’m told, and it finished 2023 with about $600 million in annual recurring revenue — a roughly 40 percent increase from the year before. […] And Figma is now flush with even more cash, thanks to Adobe having to pay it a hefty $1 billion breakup fee.” Dylan considers using this fee to do more strategic mergers and acquisitions in the future, and has an insightful way of thinking about what kind of products that could be: “Let’s figure out the value chain of what it takes to think about, get buy-in for, design, code, ship, and measure software. How do we complete that value chain?”
Love this take on the AI: “If you think about what it takes to create great design, there’s so much in that context window that’s emotional or thinking temporally about a brand experience or a user flow. I just don’t see how, in the near term, AI is able to have that as part of its context, which means that humans are providing that.”
After Its $20 Billion Windfall Evaporated, a Start-Up Picks Up the Pieces
Regarding the Adobe acquisition, The New York Times writes about a few things that I don’t remember being covered before: “In the spring of 2020, Scott Belsky, Adobe’s chief product officer, tried buying Figma, according to regulatory filings. Mr. Field said no. A year later, Shantanu Narayen, Adobe’s chief executive, tried again. Mr. Field declined. […] In June 2022, Adobe offered to buy Figma again, this time for $20 billion. Figma solicited another buyer and aimed for a higher price, according to a filing, but ultimately accepted the $20 billion. A week before the merger was announced that September, Adobe canceled work on “Project Spice,” a new product that regulators said would have put it in direct competition with Figma.”
Sounds like providing employee liquidity and IPO are on the table for the future: “Employees and early investors expect Figma to let them sell a portion of their shares this year in what is known as a tender offer, though no plans have been made. The company’s best option for a payout now is to go public, which could take years.”
Figma Offers Employees Shares And Buyouts After Collapsed Adobe Deal
The original reporting by Forbes from last month on employee equity packages refresh and severance program. “Under Figma’s compensation update, employees who joined the company in the 16 months since the announced Adobe deal will receive additional shares of Figma, up to 70% of the initial intended value of their pay packages negotiated under the higher $20 billion price tag.”
On the updated valuation: “Figma’s move comes as the company must readjust to a startup environment more austere than the one during which it raised $200 million at its original $10 billion valuation in June 2021. Over that period, many startup unicorns […] raised down-rounds or saw their prices in the secondary market slashed. In his messaging to staff reviewed by Forbes, Field admitted that he didn’t know exactly what shares of Figma […] were worth.”