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

“Rolling out to Enterprise accounts over the next week: Org admins on enterprise accounts can now designate workspaces as ​“hidden” for more control over their sensitive content. Users who are not a member of the hidden workspace won’t be able to see it, but can still interact with individual documents they’ve been added to.”

Figma presents a 2023 Handoff, ​“a year-end celebration of the big plays and deep learnings we plan to carry into next season.” A beautiful collection of articles on diverse topics summing up this year — top 10 things the team shipped this year, what it takes to bring AI features to market, 36 questions to fall (back) in love with tech, a multiplayer guide to great meetings, a definition of what work looks and feels like right now, professional pivots, and the joy of mechanical keyboards.

This week, Figma dropped a few hints on the upcoming physical product they’re introducing in collaboration with Work Louder on December 12th. Took me a moment to connect the dots, but Work Louder actually shared a sneak peek of this collab over a year ago (!). The product seems to be a Figma-branded version of their Creator Micro mini-keyboard, and I even shared how it can be used with FigJam back in issue #110. If you’re curious why they’re building this, see a new article Tap into joy with mechanical keyboards.

As always, a fantastic annual report on the state of UX and our industry by the UX Collective: ​“Much like late-stage capitalism, late-stage UX is characterized by its market saturation, heavy focus on financial growth, commoditization, automation, and increased financialization. Corporations exert significant influence over the economy and society, and designers can only push so far when advocating for user needs. How can we navigate this landscape as designers in 2024?” 

The design systems app Supernova analyzed the responses from 100+ respondents to pull out trends and key takeaways about how designers and developers are using components. Some of the interesting takeaways — the majority of the respondents use the design tool (Figma!) as their source of truth instead of the documentation, test and validate design patterns by getting feedback from designers and developers on their team, and maintain their component library by documenting changes and version updates for all components.

Ridd interviewed Nikolas Klein and Garrett Miller from the prototyping team at Figma. Together, they provide a behind-the-scenes look at everything that led up to the advanced prototyping release at Config 2023. For a few takeaways on two types of prototypes and the use of variables, see this thread by Ridd.

In a follow-up to the above interview, Niko and Garrett share what it means to establish a ​“prototyping culture” in your company and why it matters. ​“Prototyping creates an interactive experience that brings the product to life, revealing interactions that might be overlooked in static designs. When integrated into the product development process early, it saves engineering time and streamlines workflows. Adopting a prototyping culture fosters innovation.”

Double Glitch presents the video tutorial on cursor tracking technique as the first part of his series on advanced prototyping in Figma. You might remember his demo of this effect from a few months ago. A smart way to achieve the effect with a grid of interactive components!

A super useful video from Akbar, a Developer Advocate at Figma: ​“Want to sync your Figma Variables with your codebase? In this video, we’ll show you how to use our Variables GitHub Action example repo to sync your Figma Variables to your codebase and vice versa.”

Ana Boyer with a tutorial on how to create a range slider with Auto Layout.

Anthony DiSpezio shares instructions and a script to see your most used keyboard shortcuts in Figma. (Can be a great starting point for setting up an upcoming Creator Micro keyboard!) On my personal computer, the top 5 are undo, deep-select, zoom-in, measure-to-selection, and escape.

I didn’t know Cmd-clicking on the nodes of the shape releases the handles — a slick tip from Miggi!

Huge Icons shows how to quickly create a few common icons using a standard grid.

Vijay took his old experimental prototype (see issue #89) further by teaching a head to talk! Smart use of video as audio and variables.

As of last Thursday, mind maps are now live in FigJam!

Miggi, Mal, and Lauren’s first reactions to using the new mind maps feature in FigJam.

A new FigJam icebreaker for the season — making snow friends from a set of accessories and snowball sizes.

“Lottielab’s editor offers the easiest, fastest and most robust way to create animations for your websites and apps, exported as Lotties, GIFs and MP4s and allows you and your team to manage all these assets in one place. And with the Lottie format being supported natively by almost all major design tools out there (Canva, AdobeXD, Origami, Webflow, Framer etc), we’ve become the most complete way for designers to create animations for all platforms.”

“Transform your plugin ideas into reality in just minutes! Featuring official Figma color variables, dynamic interactive components, ready-to-use promo material presets, and a live preview across 3 stunning themes.”

Stripe Press makes the most over-the-top, beautiful, intelligent, and delightful books and websites. I pre-ordered this edition after it was announced, and was saddened by the news of Charlie Munger’s death just a few days before the book came out and a few weeks away from his 100th birthday. Thanks to Stripe for making the web edition free and open to everyone.

“Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams.”