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.

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 🤯

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.

A new take on Little Big Updates from Figma — every Thursday this fall they’re releasing some of the 30+ updates designed to make day-to-day life a little easier. This week it’s four improvements to the Assets panel. #1 is filtering assets by a specific library file, recently viewed, default libraries, and more. #2 is larger and more visible thumbnails. #3 is showing component names by default, with variant counts on hover. #4 is my favorite — clicking on an asset opens up a new component modal that displays a larger preview and a link to the main component file, plus a component playground on the paid plans where you can preview and interact with any variants, variable modes, or component properties.

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.

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

Behind-the-scenes story on how Figma scaled their performance testing system from a single laptop running in the office to a dream setup built for scale: ​“After considering a few different approaches, we ultimately decided to ship two systems: A cloud-based system would handle mass testing, covering our bases for the majority of situations, and a hardware system would be highly targeted, tackling situations that required more precision. They would be connected by the same CI system, and engineers across product teams would run the same suite of performance test scenarios across them.”

“Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.”

“The problem with Figma plugins is that the market is really not that big. If you look closely on the Figma marketplace, you can probably tell pretty fast there are relatively few plugins making money. There are some UI kits listed where, if you divide the views/​uses between 100 to get a sense of the revenue, you end up with something like €20-€400 which is frankly not worth the effort.”

I don’t think that’s necessarily true, and know that some creators make significantly more. That said, I wish it was easier to guesstimate the market size for the idea on the Figma marketplace. I love how Etsy shows the number of sales in every shop, and in combination with the number of ratings, it can give a rough estimate of the item’s success.

Jambot is a free widget from Figma to interact with ChatGPT right in FigJam. Use it to create visual mindmaps, take a multi-threaded approach to brainstorming, or generate ideas with teammates and ChatGPT on the same canvas. Quite amazing that it was born during last month’s Maker Week and is already live!

Amber Bravo sat down with Jambot engineers and a designer to learn what inspired them to make the widget, and why they’re so excited to see ChatGPT go multiplayer. As a power user of Logseq, I loved this bit from Daniel Mejia on where the inspiration came from: ​“I’ve been a heavy user of these tools called Networked Thought — especially Roam Research and Logseq — which basically allow you to create pages that link between each other, so you can connect, organize, and trace ideas. More recently, I also found this tool called Albus, which adds a visual feel to interacting with AI, and so I thought there should be a way to connect these concepts to create a potentially useful alternative to ChatGPT.”

Miggi causes the ​“figception” by using Jambot to come up with ideas for making Figma content. Quite amazing to see how it can be used as a tool for thought (or even programming, FWIW).

Five industry leaders discuss leading products through design and ​“getting rid of the classic product management function”, as told by Brian Chesky during his fireside chat with Dylan Field at Config. A very impressive lineup of contributors to this piece — Lenny Rachitsky, Julie Zhuo (Facebook), Steve Johnson (Netflix), Sho Kuwamoto and Yuhki Yamashita from Figma.

“Adobe Inc.’s $20 billion takeover of Figma Inc. is set for an in-depth European Union investigation over concerns the deal could harm global competition for software used by designers.” The EU’s in-depth probe is set to run until December 14^th, so the future of the deal will stay unclear until then.

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

Last week Figma had their version of a company hackathon, Maker Week. I love everything about this — from dope branding to the inclusion of all teams. In this thread, they go through some of the past projects, but for the last 3 years, I’ve been collecting a (much longer!) list of my own. (Two years later, I’m still jealous of this keyboard by Robert Bye.)

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.

Luis updated Figma’s public UI2 design system file with all the features and elements introduced since its last update in 2019. His process is fascinating to follow and shows how much work went into this little update! Also has some great tips on plugins and the organization of a large design system.

So excited about this release! I spent a good chunk of my Config talk discussing workarounds for using wide gamut colors in Figma, and this update addresses them all. See this thread by Qi Linzhi on the engineering challenges of implementing support for Display P3.

The next thing I hope for is a more precise way to select colors. Figma relies on hex values in the UI, but they’re supposed to be limited to sRGB and aren’t representative of what you’ll see in the browser. The Dev Mode uses the correct color(display-p3 R G B) syntax as an output, but that doesn’t help much with input. Besides that, I’d like to see when the color is outside of the sRGB range and what is its closest fallback. OkLCH isn’t the easiest color space to use, but OkLCH picker gets that part right.

“On the Enterprise plan, workspace admins can now brand the workspaces they manage to reflect their group by adding custom icons to workspaces. Organization admins can do this for any workspace in the organization as well.”

That’s pretty cool, especially if your team has multiple products with distinct color palettes! ​“Introducing custom color palettes in FigJam: you can now create custom color palettes for your team, so your files can match your team’s own aesthetic or company branding (Organization and Enterprise plans only).”

Security improvements to public links — auto-generated passwords on all plans and expiring public links on the Enterprise plan.

Friends of Figma, Portugal community organizes a full-day hybrid event on September 25, 2023. 

Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.

Fantastic post by Developer Advocate Jake Albaugh on how component properties can be translated and aligned between design files and coding frameworks to help designers and developers work better together. ​“Implementing components as a designer in Figma differs from implementing as a developer in a codebase. When you optimize for the developer or designer experience with a component, it is tailor-fit for that specific purpose — even if it shares a name with a component in another environment.”

It was really cool to relive the conference through Charli’s vlog. I’ve been covering her work for years, and we briefly met in person at Zeplin’s after-party. Now I have a huge FOMO from missing the Design Life podcast meetup, as I headed out to the airport. (Fun fact: I discovered Femke’s work through her vlog from the first Config in 2020, and she is Charli’s co-host of the podcast.)

Niko shares how advanced prototyping came from a vision in June 2022 to reality at Config 2023. The team had to ship variables, multiple actions, expressions, and conditionals simultaneously to make it happen. This release is a huge achievement and the team should be celebrated for it.

In-person attendees of Config 2023 found a copy of a playful zine in their swag bags. Figma collaborated with It’s Nice That on The Playbook to showcase the benefits of spontaneous thinking and curiosity through design. Inside, there is a piece on ​“how to embrace (and enjoy) endless iteration” by Chief Product Officer Yuhki Yamashita, as well as an investigation into what it truly means to be a collaborative engineer by Chief Technology Officer Kris Rasmussen. If you prefer getting hands-on rather than sitting down with an essay, there are also a host of activities to tackle.

“There is a cohort of world-renowned graphic designers whose work people know whether they’re into design or not, and Paula Scher’s name sits squarely on that list. With this in mind, we invited the Pentagram partner to share her ​“10 rules for play” noted down over a formidable and long-lasting career.”

Joey Banks spent a lot of time after Config adjusting component libraries to use the new Figma features. In this issue of Baseline, he dives deep into variables and wrote an epic guide on what they are, how he is using them, and a few shortcuts to help make workflows and creation more efficient. My favorite tip on using the number variables: ​“With your cursor inside an input, tap the equal = key on your keyboard to launch the variable list quickly, or hold Shift + click. To remove a variable, click into the input and tap Backspace twice.” (Note that the = shortcut may go away in the future.)

This part of his conclusion brought back the topic of usability vs. visibility started by component properties: ​“One thing I still find to be a little challenging within this new way of building and viewing components in Figma is that so much of the previous on-canvas visual representation is now absent using variables. Previously, if there were two density sizes used or if a layer was toggled as hidden within a particular situation, that was easy to see, as we had to build it out as a visual variant. With variables, much of that information, such as sizing, booleans, and color adjustments, is all within the Variables modal and not on the canvas.”