Figma Sans. Linear’s color system. Shadcn UI Kit.
Sponsor
Email Love → Cut your email production time in half
The Email Love Figma plugin takes the headache out of the email development process by enabling you to export responsive, production-ready email HTML or MJML directly from Figma. Easily customize over 50 pre-built components and templates – Designed by the experts at Email Love.
Release Notes
Flides.new
Delighted to see the internal name sneaking into a shortcut for creating a new Slides deck! BTW, both figjam.new and figma.new have also been around for a while.
Inline constraints and blend mode in UI3
Constraints and a blend mode now display inline when toggled on, or the default is changed.
Google Fonts update
Figma just added 450 new Google Fonts to the app. Select “Google Fonts (8÷24 update)” from the font picker dropdown to access them.
Improved file move enhancements
“We’ve improved the experience for moving files. Now you can bulk move a group of files and find the right destination more easily.”
Google SAML/SCIM
“Org admins on Organization and Enterprise plans can now use Figma’s pre-integrated Google SSO app to configure SAML SSO for their org. Customers on the Enterprise plan can also use the pre-integrated app to enable SCIM provisioning.”
What’s New
Just our type: The story of creating Figma Sans
In the first article in the series on Figma’s brand evolution, editor Jenny Xie takes us behind the scenes of the new custom typeface, Figma Sans, designed by Swiss and American type foundry Grilli Type. Don’t miss the Figma Sans page on the foundry’s website.
Innovator Grotesk
Speaking of new typefaces, I’ve been enjoying a highly versatile Innovator Grotesk lately. Unlike some of the traditional typefaces from the print era, this one is made with UI design in mind — its well-balanced vertical metrics make it a breeze to center text vertically inside elements or next to icons. It works well as a drop-in replacement for Inter or San Francisco, and I like a slightly wider width and less ubiquitous look. Highly recommend checking out its beautiful specimens and a simple license.
Using Figma
In the file: From code to design to code
It was a great episode of the “In the File” series, where Luis Ouriach talks to the designer Yann-Edern Gillet and engineer Andreas Eldh from Linear about the recent update of their design system. I love their use of the LCH color space to generate a consistent palette and tight collaboration between design and engineering.
Sections are a great way to organize your components
Molly recommends organizing components with sections to provide a hierarchy in the Assets panel and allow viewing components with a specific background color. Pro tip: set a background to a “danger” color for deprecated components.
Component organization and documentation
In this clip of the Sneak Peek episode, Dion Chooi shows how LottieFiles organizes and uses components in Figma.
In the file: Building a business case for accessibility
Luis Ouriach: “No one can deny the importance of accessibility, but successfully embedding accessibility into the heart of a business is no simple task. So where do you start?”
Resources
Shadcn UI Kit for Figma
For a recent project at work, I reviewed popular UI libraries, and it was clear that shadcn/ui is one of the most comprehensive, customizable, and common choices. I had only a few concerns, one being a lack of a modern Figma library companion — the community file hadn’t been updated in 2 years, didn’t support variables or customization, and missed new components and properties.
I braced myself to spend a week recreating all components in Figma from scratch when Matt Wierzbicki announced his commercial Figma library of shadcn/ui components. Matt spent years developing Ant Design System, so he is not new to projects of this scale. We licensed the library for our team, and so far, it seems to be very well-made and highly customizable. The product is very new and doesn’t even have a website yet, but it came out at such a perfect moment for me that I still want to shout it out.
Backstage
The Diagram team leaves Figma
Last June, Figma acquired Diagram — one of the most promising startups building at the intersection of design and AI. Their small team of five joined Figma to build the AI features announced at this year’s Config.
During the last few weeks, 3 out of 5 ex-Diagram teammates left Figma. Founding Engineer Sidd announced his departure first and soon joined Vercel to work on v0. Founder & CEO Jordan Singer and Founding Product Designer Marco Cornacchia announced their resignations on the same day. I’ll be keeping an eye on Design Engineer Vincent van der Meulen and ML Engineer Andrew Pouliot.
Cool Thing
Interactions
A collection of fun interactions made by Nitish Khagwal.