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.

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

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

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

Meng To shows a website made entirely in Figma and exported to React with Loco​fy​.ai, which I wrote about in issue #155. Responsive layout, breakpoints, pages, animations — everything just works. He gives a few tips on preparing your design for the seamless export to code.

MDS launched a free course that teaches the basics of Figma in one hour with 12 fast-paced videos. The production quality is totally bonkers, and Matt’s knowledge is so deep that even Figma experts might pick up something new.

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.

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.

Split tabs are now available in the desktop app! Miggi shows how to get the most out of them. Keeping split tabs with raw materials in FigJam while designing in Figma is surprisingly convenient and something I’ve been doing a lot this week.

The second edition of the UI Battle! Watch as Miggi from Figgi aka The Notorious PNG, Pablo Stanley aka The Layer Slayer, and Mariana Pedroza aka Da Design Thunder take on design challenges, shit-talk, and throw a fantastic performance. This is the only live sport I need!

Developer Advocate Jake explains some of the reasons why product experience can be misaligned between design and development. He points out that the source of truth can vary depending on the scenario, from the design system to the code in production to the design files. To find the truth, we have to ask a few questions: ​“What do we want?”, ​“What do we have?” and ​“What is the difference?”

“Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.” Currently in beta. Available on Enterprise or Organization plans only.

Developer Advocate Jake shows Jason Lengstorf how to bring your code into Figma with Code Connect.

The String and Number type variables can now be bound to typography fields and saved as a style. Included fields are font family, font weight (numeric or named alias) and style, font size, line height (no percentages support yet), letter spacing, paragraph spacing and indent. Use Modes to create responsive typography scales for different screen sizes.