Not a new article, but a good one by Josh Comeau. ​“Scope cuts are generally decided by product managers, but they don’t make that decision alone. It often starts with a conversation between the designer and the developer. If these two people trust each other, the process is collaborative, cordial, and productive. They figure out the best solution under the current constraints, taking development time and user experience into account, and then pitch it to the PM. If the PM trusts the designer and developer, and their proposed solution works from a product perspective, it’s typically approved without any fuss.”

Minor but helpful change to the color picker — limit the options only to the current page.

“We are starting to roll out an easier way to mark frames ready for dev. Select a frame to see the </> icon appear at the top right, then click. You’ll see the ready for dev status also reflected in your selection actions.”

Changes to sharing and access settings ​“to create a more consistent sharing experience and give you clearer visibility into and control over content permissions,” being released through mid-June. New team access terminology, clarified UI for inheriting project access by the team members and child file access by the project members, a dedicated prototype share dialog, a branch’s audience and role, and a central place for sharing other forms, views, and artifacts of the file. (Pre-Config cleanup for something new?)

33% faster file loading and 33% fewer memory issues! ​“To ensure even the largest Figma design files can be used as efficiently as possible, Figma dynamically loads pages. When a file is opened, only the page that you land on is loaded (usually the first page in a file). This means a file with hundreds of pages can open as quickly as a file with just a few! Figma loads additional pages as you navigate to them. If an unloaded page is particularly complex, you may experience a brief pause when you navigate to the page.” Certain actions like searching across all pages, reviewing updates, or running a plugin or widget that needs the whole file may cause the file to load all pages.

Huge performance boost. See this Twitter thread from Bersabel Tadesse, Director of Product at Figma, on the journey to shipping this release: ​“Our architecture was built around files being the atomic unit of work, but users were treating pages as their atomic unit of work. So it didn’t make sense to keep optimizing within the current architecture—or worse, try and change how our users work.”

Throughout May, drafts are being moved into teams on the Starter and Professional plans. This change was poorly communicated and caused a public outcry, but I don’t actually think it’s unfair or a big deal. Historically, drafts haven’t been associated with a team. This made work ownership unclear, and teams couldn’t use advanced paid features like Dev Mode while working on drafts. Moving forward, drafts will be associated with a team, and existing files will need to be moved. Drafts stay private and can be shared view-only for free, but users will need paid seats to share drafts with others and to edit other teammates’ drafts. The free plan still includes 3 collaborative design files. This change puts a limit on teams collaborating in drafts but feels more like closing a loophole than a dark pattern.

“In this two part series, we’re using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we’re going to set up the foundation of our interaction.”

Christine Vallaure’s talk at last year’s SmashingConf on CSS Container Queries and how designers can tackle them using Figma. If videos are not your jam, see her article on Why UI designers should understand Flexbox and CSS Grid.

A new video in Luis Ouriach’s ​“My First Variable” series on the typography support within variables. He explains using string and number variables to set font weights, combining weights with styles such as italics, grouping text variables, aliasing font families, naming conventions, and more.

That’s not all! Now, you can also select multiple pages by holding Shift to rename, delete, or move them in bulk.

I fully expected all big product announcements to be saved for Config, but we have an unexpected treat! Jokes aside, this is a very elegant solution based on how people already organize their files. Reminds me of how Twitter came up with retweets and the book The Best Interface is No Interface.

“When you name a page in Figma using only hyphens, en/​em dashes, asterisks or spaces, that page will now automatically convert into a page divider.”

Elliot Tu from Zeplin interviewed me for their Design-to-Dev community interview series last week. We chatted about working on Figmalion, my new role, collaborating with developers, the future of design-to-dev tools, and how I use AI in my work.

Use the new ​“Set variable mode” prototype action to change the variable mode of the current page. See the new section in the help article or try it out in an updated Advanced prototyping playground file.

“The Library Analytics API, part of the Figma REST API, lets you fetch analytics data about how your organization’s design system libraries are being used. The API provides similar information to the in-product library analytics feature, but in a format that you can use to do more fine-grained, custom analysis. In this video Gerard shows how to get started with the API, and shows how you might use the data.”

Gerard walks us through the Variables API, showing how it can keep values in sync with your code base and how applications such as StyleDictionary can transform them into usable code for multiple platforms. See the repository with GitHub Actions workflow examples.

Even while the new Dev Mode replaced the old Inspect panel, all information is still available regardless of your plan, seat type, or file access. This tutorial covers inspecting designs in Figma, depending on your plan and access level.

Niki Tonsky claims that ​“we, as a civilization, forgot how to center things.” As always, his essay gets into nitty-gritty design details in the most hilarious way. He explains how CSS, font metrics, and icons get in the way of centering things and what designers and developers can do about them.

Confusingly enough, this new plugin by Anh is unrelated to another plugin with the same name I shared in issue #160. See examples on Twitter and choose which one works best for your needs.

Scan local text styles, convert their properties into typographic variables, and bind them back to the text styles. Christine Vallaure recommends this plugin in her recent video and shows how to use it.

New plugin from Meng To: ​“AI Text Generator is a super handy Figma plug-in made for designers who want to rewrite their text in a couple of clicks. It uses OpenAI GPT‑4 to give you smart, creative text suggestions—think names, titles, or even Lorem Ipsum dummy text—right where you need them. It automatically detects the selected text’s length and generates the perfect amount of words for your alternatives. You can also add custom prompts, which is useful for more control, generate any type of text, in different languages and amount of words.”