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.