Jacob Miller, a Product Manager on the Design Systems team, unpacks the new features and answers questions about variables: ​“Our latest updates to variables in Figma allow for even more flexibility with updates to stroke weight, effects, layout grid, and layer opacity, along with nested instance variant binding. These upgrades not only boost design customization, they help align design and code like never before. Here, we share an overview of what we’re shipping with variables, how to use them in your current workflow, and where we’re going next with typography.”

Not mentioned in the article, but my favorite update is that now the variables authoring window can be resized! See also this thread by Luis, and Hugo’s accurate summary of the community’s reaction.

Sho Kuwamoto on variables and simplicity: ​“The obvious way to make things simpler is to remove things. Or maybe hide things. But one of the surprising aspects of simplicity is that sometimes, in order to make things feel more simple, you have to add more stuff.”

“Rolling out to all Enterprise accounts over the next week, org admins can now sort users by cost center into a new container called billing groups. This allows them to track costs while using workspaces for content organization and collaboration. As part of this roll out, license management will transition from workspace admins to billing group admins. Workspace admins will no longer upgrade and downgrade users in their workspace or participate in true up.”

Nice update to the Community resource pages — a new image gallery, plugin videos, and picking a relevant category to better showcase what kind of resource it is and what it can do. Also, remixes can no longer be published as they were misleading when it came to the authorship of the original resources.

If you have a paid resource in the Community, monthly payout statements are now available in your Community profile. Just click ​“View payout statements” under the ​“Metrics” tab to download a CSV of your earnings on Community.

Fons Mans partnered with Framer again this year for a new advent calendar of design gifts — everything from heavily discounted apps to free icon and wallpaper packs.

Users on Professional and Organization plans now can use a password that’s been autogenerated by Figma when setting a password on a file. Org admins in Enterprise organizations can choose whether to allow users to create custom passwords or require Figma-autogenerated passwords for greater security.

The Dev Mode team shares their early pivot away from a codegen-first approach, the acquisition of Visly that accelerated their efforts, and what it means to break down the handoff wall.

A prototype of what page dividers in Figma might look like — considering this tweet’s engagement, it’s clearly something many of us would love to see!

The final week of LBU includes a number of quality-of-life updates.

The design editor. #22: On-canvas previews for the font picker (yay!) #23: Press Tab on a misspelled word to autocorrect the typo. #24: SF Symbols icons now render correctly. #25 and #26: Text boxes and containers (like frames and sections) can be used as snap targets. #27: Select text from the canvas in View-only mode. #28: A bug fix for the text shifts caused by changes in colors or text properties. #29: Nested component properties are visible in the playground and Dev Mode.

Collaboration tools. #30: Media in comments (yay!) #31: The full gamut of emoji reactions in comments. #32: Nominate someone to spotlight. #33: Mind maps in FigJam (whoa!) #34: Mobile app makes browsing files easier. #35 and #36: Importing Asana and Jira projects.

Prototyping experience. #37: A fix to ​“mouse enter” and ​“mouse leave” interactions. #38: The prototyping modal now pops up right when you need it. #39: Temporarily hide the edit modal by holding Shift. #40: Making it clear when you have multiple actions tucked into an interaction. #41: The inline preview can follow the current frame. #42: Sticky scrolling improvements (see more on this below).

Vice President of Product, Sho Kuwamoto, explains why quality-of-life improvements are at the core of Figma: ​“I don’t want to be at a company that only invests in things that will make headlines. I want to make a product that I feel proud of. The truth is, people do resonate with little changes, and we know that because we pay attention to our users’ individual stories. Plus, when you celebrate the small things and give each one their moment, it gives people a chance to recognize how important each one is.”

Config is back in Moscone Center, San Francisco on June 26–27, 2024 — save the date! Earliest bird tickets cost $175 (75% off!) and save you a guaranteed seat. Config 2023 was an incredible event, so I’ve already got my ticket and hope to make it back next year. The call for speakers is open until the end of this year and the next event will be focused on the five themes — building products, design craft, design systems, development and code, and innovation.

The AI is now integrated into FigJam to ​“help you instantly visualize ideas and plans, suggest best practices, and, of course, automate tedious tasks, so you can focus on the bigger picture.” What started as an experimental widget Jambot is now a first-class part of the product using GPT‑4. I used it this week to create a structure for a presentation which was a useful 0 to 0.1 progression. You can give it a try at the playground or check out how Zander Whitehurst uses it to create crazy flow charts.

Peter Yang interviewed Yuhki Yamashita about building FigJam AI, creating a culture where PMs and designers love their craft, making design accessible to everyone, and balancing new and power user needs. Most of Yuhki’s advice in this interview is for PMs, but it still applies to any product designer. (The interview is paywalled, but there is a lot of good stuff in the preview.)

Love this story about FigJam’s early days: ​“We had a meeting with our board two months before we were going to launch FigJam. The board asked us what our differentiator was since there were many other whiteboard tools. And Dylan said, ​“Well, it’s fun!” But then we realized that the product wasn’t fun enough. So the FigJam team ran a sprint called ​“FunJam” to come up with all the playful features that you see today like cursor chat, emotes, and more. So you’re absolutely right – fun was a core principle. Most workplace tools are a little boring and confine you in a box. We want to give you an inviting canvas with many lightweight ways to express yourself.”

Finally a solid improvement to detaching instances.

On Enterprise plans, workspace and team admins now can set default modes for a variable collection. This allows new files to open with the default variables modes set by the admin.

Harry McCracken published a big story about Figma and Dylan Field at Fast Company. It talks about Adobe’s acquisition and what it could mean for both companies, the future of design in the era of AI, the origin story of Figma, and their big ambition to ​“make creativity the new productivity”. 

The new page from Figma nicely explains different ways to build a color scheme (see also the book ​“Interaction of Color” by Josef Albers) but falls flat when it comes to color models and contrast — I wish this discussion didn’t stop at physics and involved human perception and modern tools. The generator also exists as a plugin, and that’s where it comes handy.

Updated corner radius UI makes it easier to bind a variable to each individual corner.

“Org Admins on the Enterprise plan can set a public link sharing policy for Design and FigJam files at the workspace level. This allows customers to have different policies for different workspaces, thereby unlocking user testing and external collaboration in some areas of the business without sacrificing security in other areas.”

Figma collaborated with Adobe on a video exploring some of the ideas for the post-acquisition future — Firefly in FigJam and Figma, linked assets between Figma and Creative Suit, multiplayer in Adobe apps, Figma prototypes + After Effects, shared design systems, and more. For more ideas, see threads from Noah Levin, Tom Lowry, Sho Kuwamoto, and Luis.

I’m a generalist and occasionally do different kinds of design work, so having a tighter integration between Figma and Adobe apps would be pretty neat. Adobe Fonts would be my #1, but I wish I could reuse a color palette and assets from Figma while working on my book layout in InDesign. While designing a photo-heavy website, I went back and forth between Figma and Lightroom experimenting with post-processing. The new Photoshop on the web also makes so much sense as a native integration. Count me in as a Figma × Adobe optimist.

Admins in Enterprise organizations can now make workspaces feel distinct with customized icons, header colors, and descriptions.

Karri Saarinen shares how their team is building one of the best-designed products out there: ​“The main point is that the design is only a reference, never any kind of deliverable itself, so the way it’s constructed doesn’t really matter.“ Don’t miss a follow-up on this approach and tech debt, as well as an older thread on their simple design system. Last but not least, his recent interview with Lenny Rachitsky on how Linear builds product was just fantastic (a good chunk is behind a paywall, but a podcast version is free.)

Great thread explaining the ​“weirdness” of OkLCH by one of the authors of the new Harmony color palette. Here is something I never thought about: ​“In electronic displays, yellow, cyan, and magenta are products of shining two lamps – subpixels. The more light is emitted, the brighter we perceive the color. It means the max lightness of the yellow is much higher than the blue’s.”

In August, Figma rolled out the ability for users to rate and review community resources. Social features are tricky, and many plugin developers (including myself) felt discouraged by the unexpected side effect of receiving one-star ratings without any comments or feedback. Figma is listening and iterating, and this week will be rolling out more changes — ratings are gone and ​“likes” are being brought back as a way for users to tell that they’re enjoying a resource. Users will still be able to leave comments to share their feedback and authors could directly reply to them. Great to see this level of care and involvement with the community!

A new setting for more control over billing in Figma — admins can set the default role for anyone joining their Figma account to be editor, viewer, or viewer-restricted.

In addition to setting the default role, admins can get email notifications to keep track of who has upgraded and what action led to their upgrade.

New ways to manipulate colors and glyphs in Figma, coming directly from the team. #18: Two new blend modes that are most applicable to designing for iOS, as explained by Rogie — plus darker (linear burn) and plus lighter (linear dodge). Now we can do a classic dodge and burn! #19: Scrubbable inputs in color pickers. Use your mouse to drag or ​“scrub” individual fields to get precise control over your colors. #20: Alpha values in color inputs will be applied to the color’s opacity. #21: When outlining a stroke within a text node, the text is now converted into a group of vector nodes, one per text glyph.

New in-product workflows for requesting and approving plugins and widgets within Figma on the Organization and Enterprise plans. 

New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.