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.

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

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

“Rolling out to Enterprise accounts over the next week: Org admins on enterprise accounts can now designate workspaces as ​“hidden” for more control over their sensitive content. Users who are not a member of the hidden workspace won’t be able to see it, but can still interact with individual documents they’ve been added to.”

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.

Nice update to the Community resource pages — a new image gallery, plugin videos, and picking a relevant category to better showcase what kind of resource it is and what it can do. Also, remixes can no longer be published as they were misleading when it came to the authorship of the original resources.

If you have a paid resource in the Community, monthly payout statements are now available in your Community profile. Just click ​“View payout statements” under the ​“Metrics” tab to download a CSV of your earnings on Community.

“In this livestream, Figma designer advocates, product managers, engineers, and designers will take you through everything we launched — from new on-canvas previews for the font picker, to fun new ways to collaborate in FigJam and time-saving prototyping updates.”

Users on Professional and Organization plans now can use a password that’s been autogenerated by Figma when setting a password on a file. Org admins in Enterprise organizations can choose whether to allow users to create custom passwords or require Figma-autogenerated passwords for greater security.

Vice President of Product, Sho Kuwamoto, explains why quality-of-life improvements are at the core of Figma: ​“I don’t want to be at a company that only invests in things that will make headlines. I want to make a product that I feel proud of. The truth is, people do resonate with little changes, and we know that because we pay attention to our users’ individual stories. Plus, when you celebrate the small things and give each one their moment, it gives people a chance to recognize how important each one is.”

The final week of LBU includes a number of quality-of-life updates.

The design editor. #22: On-canvas previews for the font picker (yay!) #23: Press Tab on a misspelled word to autocorrect the typo. #24: SF Symbols icons now render correctly. #25 and #26: Text boxes and containers (like frames and sections) can be used as snap targets. #27: Select text from the canvas in View-only mode. #28: A bug fix for the text shifts caused by changes in colors or text properties. #29: Nested component properties are visible in the playground and Dev Mode.

Collaboration tools. #30: Media in comments (yay!) #31: The full gamut of emoji reactions in comments. #32: Nominate someone to spotlight. #33: Mind maps in FigJam (whoa!) #34: Mobile app makes browsing files easier. #35 and #36: Importing Asana and Jira projects.

Prototyping experience. #37: A fix to ​“mouse enter” and ​“mouse leave” interactions. #38: The prototyping modal now pops up right when you need it. #39: Temporarily hide the edit modal by holding Shift. #40: Making it clear when you have multiple actions tucked into an interaction. #41: The inline preview can follow the current frame. #42: Sticky scrolling improvements (see more on this below).

On Enterprise plans, workspace and team admins now can set default modes for a variable collection. This allows new files to open with the default variables modes set by the admin.

Updated corner radius UI makes it easier to bind a variable to each individual corner.

“Org Admins on the Enterprise plan can set a public link sharing policy for Design and FigJam files at the workspace level. This allows customers to have different policies for different workspaces, thereby unlocking user testing and external collaboration in some areas of the business without sacrificing security in other areas.”

Admins in Enterprise organizations can now make workspaces feel distinct with customized icons, header colors, and descriptions.

Organizations can require approval for using plugins and widgets, and now Akbar shows a new way to request it straight from the plugin’s popup. They’ve also made it easier for admins to review the requests. (If you’re a plugin author, consider specifying networkAccess in the manifest.)

In addition to setting the default role, admins can get email notifications to keep track of who has upgraded and what action led to their upgrade.

A new setting for more control over billing in Figma — admins can set the default role for anyone joining their Figma account to be editor, viewer, or viewer-restricted.

New ways to manipulate colors and glyphs in Figma, coming directly from the team. #18: Two new blend modes that are most applicable to designing for iOS, as explained by Rogie — plus darker (linear burn) and plus lighter (linear dodge). Now we can do a classic dodge and burn! #19: Scrubbable inputs in color pickers. Use your mouse to drag or ​“scrub” individual fields to get precise control over your colors. #20: Alpha values in color inputs will be applied to the color’s opacity. #21: When outlining a stroke within a text node, the text is now converted into a group of vector nodes, one per text glyph.