Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.

This one is a more practical and hands-on guide to Figma variables, with detailed instructions on implementing, organizing, applying modes, publishing to the library, and transferring them to code.

New research from the Figma’s Insights team: “In a recent study we commissioned from Forrester Consulting, researchers found almost 9 out of 10 respondents experienced some type of barrier in the product development process, with 60% reporting either a lack of alignment across teams, difficulty making decisions, or lengthy development cycles. These barriers aren’t necessarily new, but have been amplified by three major forces at work: 1) More people involved, 2) More distributed work, and 3) More work in progress.”

On collaboration: “One striking finding from Forrester’s study was that the most successful teams collaborate more and also see improving this collaboration as critical. According to the study, successful teams want to improve feedback on work in progress, get more people involved earlier, and increase cross-team collaboration.” On that note, see upcoming events by Friends of Figma for anyone who regularly facilitates meetings and cross-functional collaborations.

You can now collaborate on Figma and FigJam files directly in Google Meet.

A cool bunch of improvements to Figma this week! #10: Select and copy items on the canvas while viewing version history. #11: Copy the URL of a file via Quick Actions. #12: When pasting links over existing selected text, you can now paste and match style so the text you’ve selected will be replaced by the URL or email address you want to paste in, rather than auto-link-ifying the selected text. #13: Exporting objects with a multiplier applied no longer occasionally adds an extra pixel to width and/or height.

Export icons from Figma straight to React, Vue, or Svelte components.

Something new is coming up in October 👀 The landing page is a smart way to give a peek! “Builder.io is the only headless CMS that gives developers, marketers, and product managers the freedom they need to ship fast, flexible, multi-channel experiences without overwhelming your backlog.”

Rad product and home page! “ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It's available on your favorite tools, like Framer, Figma, and React.”

In this video, Sam walks through the features in the Tokens Studio plugin for Figma that allow the creation of variables that are synced to design tokens.

Mini-series showing how to use variables for advanced prototyping on a few example projects by the Design Pilot YouTube channel.

A new video from Lauren with a deep dive on when to use variants vs. variables with modes.

The second guide introduces the concept of “container queries”, which are slowly gaining adoption in CSS and will fundamentally change the way we approach responsive design. Christine compares the current approach of using media query breakpoints with container queries and investigates how to imitate them with the current Figma features.

Two new articles in the UX Collective from Christine Vallaure, who graciously shared free “friend links” with Figmalion readers. The first one explores a new approach to creating responsive designs with variables and modes, whereby components automatically adapt to the screen size they are placed on and only resize within the provided breakpoints. In this case, variables automate which component gets displayed and set stops at certain minimum and maximum points to stay inside your breakpoint range. I had no idea that string variables can be used to select a variant of the component 🤯

Week 2 of the Little Big Updates is all about collaborating more creatively. #5: Embedding MP4 and MOV video files directly in FigJam. #6: A new look for the embedded content in FigJam. #7: Camera selection and better audio/video effects in the Photo Booth widget. #8: 300+ new emojis in the emoji picker after upgrading to Unicode 14.0. #9: When you stop following a spotlight in a Figma or FigJam file, a new reminder will appear prompting you to rejoin your teammates while the spotlight is still active.

New plugin for working with perceptual color and OKLCH color space! This initial release allows inspecting and manipulating color stops in gradients using the OKLCH color space — pretty useful if you have an existing gradient that needs a little tweaking. Bonus point for providing precise control over color stop positions!

A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.

Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!

Luis shows that if your styles have multi-mode variables as their values, Swap Libraries still works for managing theme swapping in a multi-brand setup.

Bjango, the maker of the popular apps iStat Menus and Snowflake, tests how various design tools utilize memory, what’s their baseline usage with no documents open, and how memory grows with lots of large documents open. Not surprisingly, Figma has the highest memory usage as an Electron app. “I believe Figma loads a full copy of the application per tab, which may be part of the cause for its high memory usage. Each tab is also limited to 2GB of RAM, leaving around 1.75 GB for the largest possible document. Put another way, if you purchased a Mac Studio with 192 GB of RAM, you could only open documents that use less than 1% of it. This is different from the other applications tested, which have access to the Mac Studio’s full 192 GB, minus whatever the system is using. Figma simultaneously uses the most overall memory of all the tools tested, while also being the most constrained.”

In Recovery Mode, you temporarily regain access to the file and can take limited actions to reduce content and restore edit access. Once you have reduced file memory below 90%, you can exit recovery mode and regain full edit access to your file.