A new take on Little Big Updates from Figma — every Thursday this fall they’re releasing some of the 30+ updates designed to make day-to-day life a little easier. This week it’s four improvements to the Assets panel. #1 is filtering assets by a specific library file, recently viewed, default libraries, and more. #2 is larger and more visible thumbnails. #3 is showing component names by default, with variant counts on hover. #4 is my favorite — clicking on an asset opens up a new component modal that displays a larger preview and a link to the main component file, plus a component playground on the paid plans where you can preview and interact with any variants, variable modes, or component properties.
“Our new Community Libraries Beta offers the building blocks you need to start designing, right at your fingertips. As part of the Beta, users on free plans will have access to a special selection of community wireframing, UI, and icon kits. Just click into the Assets panel and Library modal to browse through the featured libraries and design faster than ever.”
A few improvements to variables: 1) in addition to scoping number variables, you can now also scope color variables, 2) select multiple variables with Shift or Cmd for the bulk edit, 3) code syntax for defining different names for multiple platforms, and 4) modes for instance sublayers. Variables are still in beta and it’s great to see how fast the team iterates on them.
In the last 2 months Figma quietly shipped more than 200 updates to the Dev Mode workspace 🤯 This article goes through the most important 35 changes and improvements.
“Saving” and “liking” resources are now combined to make Community simpler to use. Your saved resources are available from your Community profile or the Resources dropdown in a Figma file.
You can now embed videos in FigJam. MP4 and MOV files are both supported.
The number of installs or downloads used to be the only metric in the Community, but over time it was replaced with how many times a resource was used. Now you can also rate and review Community resources. It’ll be interesting to see which of the most used resources are also the most loved ones.
“On the Enterprise plan, workspace admins can now brand the workspaces they manage to reflect their group by adding custom icons to workspaces. Organization admins can do this for any workspace in the organization as well.”
That’s pretty cool, especially if your team has multiple products with distinct color palettes! “Introducing custom color palettes in FigJam: you can now create custom color palettes for your team, so your files can match your team’s own aesthetic or company branding (Organization and Enterprise plans only).”
So excited about this release! I spent a good chunk of my Config talk discussing workarounds for using wide gamut colors in Figma, and this update addresses them all. See this thread by Qi Linzhi on the engineering challenges of implementing support for Display P3.
The next thing I hope for is a more precise way to select colors. Figma relies on hex values in the UI, but they’re supposed to be limited to sRGB and aren’t representative of what you’ll see in the browser. The Dev Mode uses the correct color(display-p3 R G B)
syntax as an output, but that doesn’t help much with input. Besides that, I’d like to see when the color is outside of the sRGB range and what is its closest fallback. OkLCH isn’t the easiest color space to use, but OkLCH picker gets that part right.
Security improvements to public links — auto-generated passwords on all plans and expiring public links on the Enterprise plan.
Starting July 6th, Figma Enterprise customers have the option to host key parts of their Figma and FigJam files in the EU. This feature is designed to give Figma customers in the EU greater flexibility to meet local compliance and data privacy requirements.
“For added security, organization admins on the Enterprise plan can set an idle session timeout to log out users as soon as 12 hours after they become inactive. By default, Figma automatically logs users out when they are inactive for 21 days.”
Small improvement, but I know it will make many people excited!
We need to talk about this hidden gem of an update: rich text component descriptions 😍 pic.twitter.com/V9BRHnquJv
— Kyle Hyams (@kylehyams) June 23, 2023
A refresh to the file browser, so you can spend less time searching, and more time creating. New shared projects and files tabs help you easily find files that others have shared with you. Search, Recents, and notifications now include content across your entire account.
Lauren Budorick explains how the new text truncation works: “Now, whenever we can, we figure out at line layout time whether the next line will fit. If it won’t, we’ll override our line breaking engine to say that, if this is the last line before truncation, every glyph pair is breakable.” She also points to where the new “Max lines” truncation feature can be found.
In today's @figma #Config2023 auto layout launch, we're shipping an upgrade to how you can truncate text—truncating with "Max lines" rather than a fixed height. But while we were at it, we snuck in a change to the core text layout engine where we decide exactly how to trunca…🧵
— Lauren Budorick (@lbudorick) June 21, 2023
Oh my, this one was long in the making! Font previews were first announced at Config 2020, but now they’re finally live along with other improvements to the font picker. See this feature tour from KC Oh.
With the latest round of auto layout updates, learn how you can wrap objects to a new line, set minimum and maximum widths and heights, and truncate text based on a set number of lines.
Dylan’s recap of all the updates from the keynote, in a brand-new blog. “Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”
If you have time for only one thing this week, this should be it. First, Figma CEO Dylan Field introduces new features — variables, auto layout updates, and advanced prototyping. Then, CTO Kris Rasmussen talks about rethinking product building from the ground up and how the new Dev Mode is bringing design and engineering closer together. In the end, Dylan talks about file browser refresh, font previews, and what AI could look like in Figma — wrapping things up by announcing the acquisition of Diagram.
I watched every Config keynote over the years, and this year’s announcements were the most anticipated and ambitious ever. It’s incredible to see how Figma is growing in depth and breadth at the same time, now providing incredibly advanced tools while covering an entire product-building process from brainstorming to design to development. Exciting time to be a maker.