This is a short but comprehensive checklist. Worth reviewing before sharing your next file!

Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.

Richard Ekwonye made an interactive guide on how Bézier curves work in CSS animations and SVG paths of illustrations and icons. Such a beautiful and hands-down way to learn!

A good-to-remember shortcut! Hold the Spacebar while dragging elements to maintain the hierarchy of the elements.

An in-depth walkthrough of how to use Figma’s Auto Layout to quickly add padding and alignment rules to standardize your design elements from the Noun Project.

Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.

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

A short video on using the bezier curve tool to make an S‑shaped curve.

Miggi shows how to make a notification badge that expands to fill its contents with Auto Layout.

“Good typography is good design. This collection of plugins for Figma will help you to improve the typography in your design.” Font Fascia and Fonts Changer are two of my favorites on this list!

Lottielab is a new tool for creating and managing Lottie animations that won Product of the Day at ProductHunt this week. Images can be imported from Figma, SVGs, or Lottie files, and exported as Lottie, GIF, or MP4 to any platform. From Drew, a co-founder of Lottielab: ​“We are streamlining this cluttered process into a simple, seamleass, all-in-one workflow, with all the benefits of modern design tooling fit for today’s product development teams — being web-based, collaborative and easy to use — no After Effects knowledge needed.”

“In this Study Hall, learn how to apply the use of variables in your prototypes with the assistance of variable modes and conditional logic to create a more realistic shopping cart prototype that uses real math.”

Dan Hollick explains the science behind making realistic shadows and recommends the Beautiful Shadows plugin that takes care of this for you.

Ridd interviews Luis Ouriach about using variables for his Deep Dives podcast. ​“Luis goes deep into strategies based on team size, provides naming guidance, and even breaks down how he thinks about structuring libraries with variables in Figma. Lastly, Luis shares a behind-the-scenes of his journey as a designer advocate and even gives a unique prediction for how AI will take shape inside of Figma.”

According to Corey Lee, the copy-pasting of collections is coming soon!

The introduction of wide gamut Display P3 colors to the design tools ​“broke” the familiar hex notation that all of them have been relying on. The transition to modern notations will be painful and take time. I share some context in this thread, but the main takeaway is to NOT use the #RRGGBB values for hand-off or external tools when working with P3 colors.

Andrey Sitnik (author of PostCSS and Autoprefixer, used on pretty much every website) goes a little deeper into platform-independent (CSS) vs. platform-specific (Figma, Photoshop) implementation of P3. He also added ​“Figma P3 hex” as one of the accepted formats to OkLCH Color Picker, which makes using Figma values in OkLCH much easier.

During Maker Week, Rogie built a handy plugin for attaching files to the Figma document for hand-off. Great tool for sharing fonts, high-resolution pictures, or other assets with developers.