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

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

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!

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.

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

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

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.

Tutorial Tim dissects a beautiful Fey website and shows how to leverage developer tools in the web browser to extract CSS values and implement them in Figma.

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.

“Prototyping in Figma allows us to create realistic designs to test on real users, but there’s a lot that goes into taking designs from static to something that looks functional. Join our team for a Q&A focused on bring your designs to life with prototyping and user testing.”

“In this livestream, Figma designer advocates, product managers, engineers, and designers will take you through everything we launched — from new on-canvas previews for the font picker, to fun new ways to collaborate in FigJam and time-saving prototyping updates.”

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.

Luis shows how to make slot components more useful by ​“outsourcing” the component composition to a main component, whilst still allowing for completely flexible content within.

“In Figma, scroll position defines how individual objects behave when you scroll past them. There are three types of scroll positions: scroll with parent, fixed, and sticky. In this tutorial, we’ll focus on sticky scroll and see how we can use it make our prototypes even more dynamic.”

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

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