Anthony DiSpezio shows how merge reviews now ignore top-level sections, allowing you to review changes at the frame or component level.

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.

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

“Some Figma features require users to upload or retrieve content from our servers (e.g. publishing a library, adding media to comments), but customers might have strict firewall settings that block these actions. Searching for ​“Check network settings” in quick actions will open a network settings modal, which indicates whether any of these services are blocked. IT admins can update their firewall’s allowlist to restore access. This modal is also accessible via a visual bell if users run into errors trying to use features blocked by their firewall settings.”

The new Figma for Jira app is now generally available, with a couple of new features — searching for linked Figma designs in Jira issues using Jira Query Language, and creating design automations in Jira to notify you of changes to designs, transition issue statuses, and easily add labels to issues with designs.

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.

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

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

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

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.

Loved Tom Lowry’s thoughts on designer-developer collaboration in this thread. I think most teams agree that the traditional process of throwing designs over the wall to engineers is broken and we need better tools, but I’m also cautiously skeptical of designers working directly with the source within the design tools. While this is already possible for marketing websites (hello, Webflow and Framer!), products and design systems bring a whole new level of complexity and challenges. This iteration of the Dev Mode seems like a first step in the right direction to me, but the road ahead is lengthy but bright.

An interesting take from Jacob, a co-founder of Pierre — one of the dev tools I’m most curious about. ​“Figma is where I go to approximate a finished product. World-class Product teams collaborate here on rough sketches with components built to track their perfectly engineered counterparts. […] Instead would love to see Figma start building their creative suite. Specifically, imagine a Figma engineering tool? Built from the ground up? With the same Figma principles? And built to be interoperable with their design tool…”

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

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

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 is changing how they refer to paid seats across all of the products (Figma Design, Dev Mode, and FigJam). The paid seats are used to be ​“Editor” seats, and now they are ​“Full” seats.

A cool technique of using randomizer plugins like Random Swap Variants and Variants Randomizer to generate a set of unique illustrations from predefined components.

The Designer Advocate team recently hosted another Office Hours AMA focused on the use of variables in Figma. Watch Lauren Andres, Luis Ouriach, Chad Bergman, and Shana Hu discuss nested instance variant binding, applying boolean variables, and a few related questions.

Jenny Wen ​“templatized” some of the frameworks she’s been using over and over again in her role as a design manager and pillar lead of FigJam. There are 11 FigJam (no surprise!) templates for strategy, managing, and meetings.

A large profile of FigJam AI in Fast Company. ​“Figma’s AI ambitions are clear. Singer noted that ​‘we really do think of AI as playing a central role across the entirety of the platform.’ In theory, that could mean not just better meetings, but more capable coworkers. ​‘In a collaborative environment where you’re working with many people on a project,’ Singer says, ​‘AI really up-levels everyone.’”

That’s a pretty useful desk mat! It’s still worth investing in learning shortcuts while we’re waiting for the Figma Creator Micro keyboard. Made by Ratsuns.

On Tuesday, Work Louder opened preorders for the Figma edition of their Creator Micro keyboard that ships in Q2 2024. I never got into mechanical keyboards, but their other products look incredible and might be a tipping point for me — preordered the Figma mini-keyboard right away. See a sneak peek by Nolan Perkins, the unboxing stream from Miggi, and a behind-the-scenes thread from Robert Bye. The Verge and Fast Company have also covered it.

A new podcast by Figma?! ​“The biggest topics in the design and digital product industry, discussed with a bit of humor.” In the first 3 episodes Andrew Hogan, Head of Insights at Figma, interviews an Industry Analyst Rob Koplowitz, a lecturer at Bentley University Janelle Estes, and a design lead Dan Makoski.

A new long-read from Luis Ouriach published in the Smashing Magazine: ​“Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls, starting from how to make designers on your team adopt the complex and well-built system that you created to what are the best naming conventions and how to handle the auto-layout of components, indexing/​search, and more.”

Jacob Miller, a Product Manager on the Design Systems team, unpacks the new features and answers questions about variables: ​“Our latest updates to variables in Figma allow for even more flexibility with updates to stroke weight, effects, layout grid, and layer opacity, along with nested instance variant binding. These upgrades not only boost design customization, they help align design and code like never before. Here, we share an overview of what we’re shipping with variables, how to use them in your current workflow, and where we’re going next with typography.”

Not mentioned in the article, but my favorite update is that now the variables authoring window can be resized! See also this thread by Luis, and Hugo’s accurate summary of the community’s reaction.

Sho Kuwamoto on variables and simplicity: ​“The obvious way to make things simpler is to remove things. Or maybe hide things. But one of the surprising aspects of simplicity is that sometimes, in order to make things feel more simple, you have to add more stuff.”

“Rolling out to all Enterprise accounts over the next week, org admins can now sort users by cost center into a new container called billing groups. This allows them to track costs while using workspaces for content organization and collaboration. As part of this roll out, license management will transition from workspace admins to billing group admins. Workspace admins will no longer upgrade and downgrade users in their workspace or participate in true up.”