Joey Banks explains how to use constraints to create responsive components that work with nearly endless screen widths and heights. One hidden feature he didn’t mention is a special relationship between constraints and layout grids — see my old article ​“Using Constraints with Layout Grids in Figma” from 2020.

“Improvements to the admin console are rolling out for admins on Pro, Organization, and Enterprise. The admin console will now open in a new space with a dedicated sidebar navigation. There will also be a new interaction in the members table for managing a given user. Additionally, for Pro Teams, we have removed the Team permissions column from the Members table. Moving forward, Pro Team admins can adjust seats from the admin console and member permissions from the Team settings page.”

“Code Connect Version 1.2 launched this week and includes support for design systems written in Angular, Vue, and HTML, an improved getting started wizard for the command line tool, and expanded configuration options for React icons.”

“Figma is making it easier for admins to find and manage draft folders of members and guests who have been removed from their organization, now known as ​”unassigned drafts.” Organization admins on Organization and Enterprise plans can now access unassigned drafts directly from the admin console. Starting today, Pro team admins can also manage them from a new tab in the Pro team admin console.”

I came across this wildly popular plugin as I dabbled into Tailwind CSS this week. Seeing a free (supported by Creator Fund) open-source plugin for generating code in a few common formats (HTML, JSX, Tailwind, Flutter, and SwiftUI) is refreshing.

Impressive lightsaber loader effect by Vijay.

Kudos to Oğuz for his patience while creating such a sleek and advanced animation with just a Figma prototype. That’s a lot of frames to connect.

In this workshop, Miggi explores approaches to Advanced prototyping in Figma: ​“We‘ll walk through examples using variables and component sets to create dynamic prototypes that are easy to manage and iterate upon. This is an intermediate level workshop and builds on a basic understanding of prototyping in Figma Design.”

Joey Banks with a deep dive on applying and organizing variables in Figma: “…if there’s one thing I’ve learned about variables, it’s that nearly every team takes a slightly different approach when it comes to creating and keeping them organized in Figma. I’d love to recap the many ways I use variables within the components and libraries I make, as well as some of the techniques and decision frameworks that have helped me most, and share with you how I approach creating and keeping them all organized, too.”

James McDonald shared a design file of his recent project with a few cool effects.

Turns out, you can copy text styles from the selected text!

Smart technique and a cool effect! Blur is a power tool in capable hands.

The beta of UI3 is now available to everyone. Check out this list of changes made after hearing the feedback.

Tailwind Sync is a free plugin for Figma that synchronizes variables to Tailwind code, enhancing the design-to-dev handoff with speed, consistency, and scalability.

Mizko explains how to use Sections when prototyping in Figma: ​“When presenting your final output with Sections, Figma remembers the user’s last viewed frame. This ensures that when the user returns, it will show the previously viewed frame first. This creates a more comprehensible transition of your prototype.”

Jenny Xie interviewed Marcin Wichary, Joel Miller, Ryhan Hassan, and KC Oh about the new Figma UI: ​“Our goal with UI3 is to keep designers in the flow by minimizing distractions and placing their work center stage. With that north star in mind, our team worked for over two years, iterating on myriad approaches — even reversing some core design decisions, like the floating navigation and properties panels, after launch.”

In the past, the file browser and the community files required different thumbnail aspect ratios. Now, it’s standardized at 16:9 across Figma files, FigJam, and Figma Slides.

Figma added iPhone 16 (including Pro, Pro Max, and Plus), Apple Watch Series 10 (42mm and 46mm), and Android (Compact, Medium, Expanded) to the Frames menu. If you need vector iPhone 16 device frames for the prototyping, Keeyen published the community file with different models and colors.

Joey Banks shows one of the newly announced features. When objects are duplicated, rotated, and then duplicated again, Figma will continue that rotation with subsequent copies of your object.

Kaitie Chambers and Miggi kicked off the first episode of monthly Release Notes, where they dropped new features and recapped everything shipped in September. Readers of this newsletter will be already familiar with most of the changes, but there are some new things worth covering. 

UI3 rolls out for everyone on October 10th. The biggest change in the final version is the return of fixed panels — Figma listened to the feedback from the design community and closed the gaps. The panels still float when the Minimize UI (Shift-\) mode is turned on. Other changes include the always visible Auto Layout pixel values along the resize modes, the layer header showing 3 reorganized actions by default and one more when the panel is wider on larger screens, and showing the component library info in the component properties panel. It’s now even easier to set the Auto Layout object’s width and height to Fill Container or Hug Contents via the quick actions menu (Cmd-K) or a custom macOS shortcut.

After research or brainstorming sessions, FigJam stickies can now be sorted by color, author, stamp count, or stamp type in addition to the previously announced FigJam AI. Figma Slides now supports custom slide deck templates, which can even be published in the community. Slides are now viewable on your mobile device, so you can view and join a presentation from anywhere.