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.

Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. ​“We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”

Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?

This April Fun Day, Figma had some fun with cursors. ​“What better way to celebrate this icon of interaction than with a look back at digital eras through the decades? For one week starting this April Fun Day, you’ll be able to choose throwback cursors inspired by four aesthetics from internet history: We’re calling them 8‑bit, Y2K, Skeuomorphic, and Aero. Here, we reminisce about bygone trends and reveal how we brought these vintages back to life.”

Andrew Hogan, Head of Insights at Figma, talks to Bob Baxley, SVP of Design at ThoughtSpot, about his view on AI’s impact, why it’s so important to design tools well, and what we can learn from history and huge projects like the Apollo Mission.

Now you can use the power of AI to generate and expand mindmaps and create visual timelines in FigJam. See examples in the gallery of ready-made FigJam AI prompts.

On April 1st, Figma makes URLs shorter and easier to read. If you call Figma’s REST APIs, embed files in your websites or apps, or use these URLs in your plugin or widget, you may need to make a few tweaks to your code.

Not the acquisition we had in mind: ​“Canva, the world’s only all-in-one visual communication platform, today announced the acquisition of Affinity, the award-winning creative software suite for professional photo editing, illustration, graphic design and page layout.”

Use the scroll wheel on your mouse to zoom in and out. Right-click and drag to pan around a file.

“Over the next few weeks, we are replacing the bottom right notification button for library updates and replacing with a new library icon for faster entry to library management.”

Figma shared the Config 2024 lineup with more than 75 speakers from around the globe — it’s absolutely bonkers this year, with folks from Teenage Engineering, The Browser Company, Humane, GitHub, Perplexity, Not Boring Software, Artifact, Ableton, Cron, Linear, Work Louder, Vercel, and many many more. This year’s conference tracks will be organized in a few stages, with separate conversations hosted around design systems, development and code, quality, leadership, etc. Can’t wait!

An update to file search — now you can filter results by owner, type, or organization/​team/​project.

There were hints about split tabs for a while, and now they’re available in the beta version of the desktop app. Luis highlights some of the use cases in this thread, including keeping a prototype on the side, managing variables, iterating on designs at different zoom levels, updating local components, and many more.

Dylan Field joins Sarah and Elad at No Priors podcast to discuss what’s next for an independent Figma, how AI can augment design and speed up the iteration loop, and how Figma is expanding beyond design with products that help the entire product team’s workflow.