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.

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

Tokenbase is a free tool for creating, managing, and distributing design tokens. Easily create your design systems and export tokens to code in a few clicks. It’s currently in beta, and I wonder if importing from Figma is on the roadmap?

Jason Lengstorf from Learn with Jason talks to Figma Developer Advocate Jake Albaugh about how Dev Mode improves the design handoff and how the Figma plugins API enables more powerful customization.

Ridd published a crash course on advanced Figma prototyping with variables. He explains when to use variables instead of variants and shows how to streamline the prototyping process by using variables to update UI elements without requiring multiple frames. Additionally, he prepared a community resource with slides and examples.

“The Washington Post’s inclusive process for creating new design system components bridges the gap between design and development to make features that help navigate the news online.”

Sam shares math equations she used in Token Studio to build all sorts of dimension tokens and even a proportional scale that snaps to a 4 or 8 pixel grid. This guide uses typography as an example, but the same ideas apply to sizing and spacing. There is even a free playground in the Community.

A reminder that Framework is happening on Tuesday, April 16th. Figma published the schedule for this 3‑hour-long event, which will be a great fit for anyone interested in variables, design systems, and design-to-code handoff.

“Managing your team’s community resources just got simpler. Now you can save, approve, and manage resources for your entire organization without switching profiles or ​‘browsing as admin.’”

Tom Lowry walks through recent updates to branches — the default zoom level of previews is increased to 150%, the full branch name is now visible on hover, better text legibility, transparent backgrounds for effects, a few changes to improve review of variables, and bug fixes.

Easily generate a frame with progressive blur, controllable by a set of parameters.

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?

Lauri makes a strong case for introducing responsiveness to the prototype mode. Luis hints that something is cooking, and we’ll hear more at Config 2024.

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.

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.

The new Dev Mode plugin for instantly generating React components from selected nodes. See how it works and why Vijay made it in the Twitter thread.

Free plugin for generating linear, radial, and conic gradients interpolated in a variety of color spaces, yielding richer, more brilliant gradients. Live updating so you can easily view and tweak the results.

Designer Advocate Mal reminds us that it’s crucial to consider the discoverability of components when building a set and points to a new feature of the Assets library that shows a number of component variants and a playground for exploring them.

I often rely on the Spread value in shadows but forget why it is disabled. Handy reminder from Ilya Miskov.

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