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

Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).

Great help article if you’re still struggling with understanding the difference between variables and styles, or questioning if styles are becoming obsolete.

Staff Software Engineer Daniel O’Connor peels back the layers of the Thumbtack​’s design system, Thumbprint, to show how they built it for flexibility and efficiency: ​“Our current approach is one of layers, dividing our design system up into three levels: Thumbprint Tokens, Thumbprint Atomic, and Thumbprint Components. This approach has transformed the way we build and maintain our design system, and made it easier to deliver a great experience to our consumers and end users.”

Fons Mans shows how to create a dreamy multi-color gradient with Figma without relying on any plugins.

One more tutorial from Fons! This one is on how to create a glossy app icon.

Miggi with a tip on using the new auto layout wrap to handle elements beyond just a single row. Love that Shift-A automatically puts elements into a wrapped auto layout when you have multiple rows of elements selected.

Learn how to use min and max values when working with the auto layout in your designs, with a bonus of updated text truncation and max lines feature for paragraph text.

Designer advocate Ana Boyer demonstrates the new advanced prototyping features by building an e‑commerce experience.

Three different methods of building an interactive Tab Group with variables, presented with their pros and cons.

A preview of the new ray tracer plugin currently in development by Yi Shen. Some of the examples are pretty wild!

Codejet converts designs to production-ready code. Create a project in Figma, and Codejet will convert it into React and TypeScript code. Was voted Product Hunt’s Product of the Day on July 13th.

Rauno Freiberg is trying to deconstruct and dig out the ​“why” behind great displays of interaction design: ​“This essay is not a tutorial nor a collection of guidelines. But rather an observation on the invisible details of a few interactions that I use often but rarely think about. Besides recreating interfaces, I found this exercise in reflection to be another great way to build a stronger design intuition and vocabulary.”

Missed that piece at Forbes a few weeks ago: ​“If you ask me, the antitrust environment right now is kind of nuts. […] I’m going to apply similar thinking to Adobe’s proposed $20 billion acquisition of Figma. The short version: I believe this deal is a sound one, and that regulators who are dubious about it are looking at the wrong things if they really want to promote innovation and protect customers.”

Interesting note on Adobe XD: ​“At one point, XD had 200 people working on it, but the product lacked the real-time collaborative element that drives Figma’s success, and sales never took off. Adobe ultimately reassigned more than 90% of the people working on XD; fewer than 20 work on the app now, and their job is just to keep it running smoothly to fulfill existing contracts.”