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

A great practical guide showcases the principles of transition animation with examples that are basic, compact, and can be used immediately by anyone in their design process. These insights are not rules set in stone, but rather guiding considerations for new product creation.

Updated corner radius UI makes it easier to bind a variable to each individual corner.

“Org Admins on the Enterprise plan can set a public link sharing policy for Design and FigJam files at the workspace level. This allows customers to have different policies for different workspaces, thereby unlocking user testing and external collaboration in some areas of the business without sacrificing security in other areas.”

Great idea, but I wish this plugin would suggest the nearest color for a fill of the selected object and not just for the hex value. With some polish, this could be an essential linting step before handing mockups off to a developer.

Nate Baldwin works on design systems at Intuit and writes about his experience of using Figma’s REST API to tie design tokens directly to design resources and integrate Figma as part of a CI/CD pipeline for their multi-product setup. The article is quite technical, but he explains every step of the process.

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.

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.

Admins in Enterprise organizations can now make workspaces feel distinct with customized icons, header colors, and descriptions.

Great update to the OkColor plugin letting you specify both absolute and relative chroma in colors.

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.

Dave Williames made a next-level prototype using variables. The experimental pixel art editor uses over 40 variables to draw on a 16×16 grid with 16 colors, add frames, and play them with adjustable speed! Absolutely mind-blowing.

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.

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.

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.

Organizations can require approval for using plugins and widgets, and now Akbar shows a new way to request it straight from the plugin’s popup. They’ve also made it easier for admins to review the requests. (If you’re a plugin author, consider specifying networkAccess in the manifest.)

I shared the teaser in issue #132, but last week Builder​.io introduced Visual Copilot, ​“a completely reimagined version of the Builder Figma-to-code plugin that will save developers 50–80% of the time they spend turning Figma designs into clean code.” The major difference between Visual Copilot and previous design-to-code tools is a specialized AI model that was trained to solve this problem. The features include one-click conversion, automatic responsiveness, extensive framework and library support, customizable code structures, and easy integration with the existing codebase.

One of the most exciting parts of this announcement is still in private beta and targeted at teams with well-maintained design systems. This feature in Visual Copilot uses AI to map reusable components in your Figma file to those in your code repository and generates code using your existing components when you have them. This could be genuinely useful to get the first rough version ready in no time.

In addition to setting the default role, admins can get email notifications to keep track of who has upgraded and what action led to their upgrade.