Christine Vallaure with timeless advice of using percentages instead of pixels for specifying line height in Figma. There are very few cases when pixels make sense, and more often than not they cause inconvenience.

Whoa, I didn’t know that selections can be moved! Great for getting to the tricky areas.

Designer Advocate Ana Boyer shares some common questions, answers, and resources that she came across when learning about design systems, tokens, and variables. 

Luis shows how to descope and unpublish primitive variables from the design system.

Designer Advocate Anthony DiSpezio recommends the best approach for defining variables for theming: primitive variable → semantic variable → semantic style. The core advice is to keep using styles: ​“Styles represent a group of properties that should be applied to a layer or part of a layer. Variables represent individual values within that style.”

(Years ago, I noticed that when Apple announces a change at WWDC it’s better to go with it even if it doesn’t make sense at the moment — they see the roadmap much further. I wonder if it’s the same case with Figma and styles. At the moment they often feel redundant, but Figma made it very clear that they’re not going anywhere — hopefully something will make it clear soon why it was worth keeping them around.)

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.

Christine Vallaure just published a free 1‑hour course on YouTube. Topics include Figma’s file structure, creating files and frames, shapes, text, components, and general design setup. A fantastic resource for beginners, and it even comes with an exercise file.

A quick how-to video from Zander on creating a glowing animation inspired by the Disney logo. (And one more with a hover scale effect.)

Step 2: Learn from Vijay Verma how to create a cute animation using variables and conditions.

Step 1: Learn from Miggi how to create a ghost icon just in time for Spooky Season.

Ridd points out two common problems with UI kits (manual updates of shared attributes and maintaining multiple breakpoint variants) and shares a variable system to make your life way easier.

What a great idea! Figma Designer Advocate Lauren will be teaching FigJam Advocate Kaitie how to use Figma one concept at a time, in less than 15 minutes a day. So far they’ve covered file management and creation, structuring your files, libraries, and components.

Ridd shares a few repeatable steps to start prototyping with variables — creating the variable you need, assigning the variable to the UI, testing the connection, and setting up your triggers.

I rely on Luis for thought-provoking organization and design systems insights. In this thread, he discusses a way to translate brand colors into primitive and semantic color scales. At work, I use two design systems — one made by a smaller team where the same designers control the brand, design system, and product, and another from a larger organization with these are separate functions. I can see how his approach of explicitly using brand colors in primitives can work well in larger orgs.

Have ​“ghost” variables in your file and need to get rid of them easily? Here is how to easily detach deleted variables still lurking in your file, as explained by Miggi.

Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100.

Molly Hellmuth shares a few tips from her recent talk ​“Design System Traps & Pitfalls” at Smashing Conference. Here are the five ways to de-risk variable adoption for your design system — create a map for your token structure, start using variables with numbers only, use variables and color styles together, stress-test new features, and roll out changes gradually.

Something must be (hovering) in the air, as Ridd also shared his thoughts on selecting a color for the hover state with the right amount of saturation.

An interesting idea on using a composite style with an alpha channel for a hover state instead of creating variables for every variant. Won’t work in every case, but it was interesting to learn that the same overlay approach is used in Material 2.

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!