Articles

“We’ve expanded our EU file hosting capabilities to support localization of videos and images in addition to previously supported assets. For Figma Enterprise accounts that are configured for EU file hosting, this upgrade will be applied to your account automatically with no action required on your part.”

Org and Workspace admins on the Enterprise plan can now mark libraries as approved for the organization or workspaces they manage. ​“Approved libraries are badged with a checkmark and pinned to the top wherever they appear — be it in the assets panel, the properties panel, the admin console, etc. Approved libraries help users know which libraries are sanctioned by their admins and help them find them more easily.”

A few updates to granting or managing access to teams and projects (currently being rolled out). These include improved UI for the teams and projects share dialog, roles for team members on a project, and audience setting on teams and users will have the ability to directly control the audience setting on projects.

A big release of ​“squeaky stairs” fixes to the prototyping! First, the inline preview now shows mobile prototypes in draggable and resizable device frames. For a deep dive on this, see the article Behind the feature: Inline device frames.

Second, there are multiple improvements to the editing speed — copy and paste noodles and interactions to a different element; delete noodles and associated interactions; delete a starting point by dragging the ​“flow label” outside of the frame; disable all shortcuts on a prototype; enable multiple ​“After Delay” events on every node; use the ​“Change to” interaction on a nested variant; auto-exit the Scale tool when switching to the Prototype tab; copy a link to the selected flow; resize the inline preview to the actual size of the prototype, and auto-focus on the input when creating a new flow.

Third, improvements to prototyping with variables — when copying and pasting an element with a local variable bound to it, Figma will create a new collection with the copied variable; overlays now inherit the mode of the frame linking to them; negative numbers support in the expression builder; support for ! or not in a boolean conditional check (yay!), and string values ​“true” or ​“false” can be bound to instance visibility in addition to booleans. Prototyping performance has also improved, cutting down loading spinners by 22%.

Finally, the width and height values can now be set to zero, so we don’t need to rely on the 0.001 hack anymore! For a nice roundup of the above improvements, see threads by prototyping PM Garrett Miller and designer Niko Klein.

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.”

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.”

(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.”

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.”

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.

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.”