Damien Correll, Creative Director at Figma, shares some thoughts on the Config brand. Creating an identity for a brief event is an interesting challenge, and Figma’s brand studio does an incredible job every time. The pictograms were my favorite part — they are in lively motion on the screen but feel monumental IRL as wooden cutouts or a statue at Moscone, almost at odds with the temporal nature of the brand.

Joey Banks’ recap of everything announced at Config. (I was lucky to meet Joey and share the scene with him at Config, and his deep knowledge of Figma and expertise in design systems are second to none. Highly recommend subscribing to his Baseline newsletter.)

Dan Mall is an expert in design systems and a fellow designer from Philadelphia. Dan organized a post-Config basketball game, hosted a special dinner, and even captained the winning team at the Figmatch design competition. His recap focuses on what makes in-person conferences really special.

Lilibeth Bustos Linares is a teacher at Memorisely and co-organizer of a wonderful morning hike with Zander Whitehurst a day before the Config. Thanks to jet lag I was able to get up at 5:30 am and join the group at 6:30 am. It was wonderful to walk the Historic Trail of San Francisco and chat with so many designers from around the world! 

It almost feels like FigJam with its endless board was made for large spatial recaps like this! Great idea and a fun format made by Juarez Filho.

Great summary of Brian Chesky’s conversation with Dylan Field on approaching everything at Airbnb through a design lens.

A few new plugins for converting styles to variables came out last week, and I’m still trying to pick a favorite. The best part of Styles to Variables Converter is that after creating variables it updates existing styles to use them, so if you delete or detach styles objects will fall back to variables. A slightly more popular Styles to Variables plugin doesn’t seem to do this yet. I also wish these plugins let me map styles to existing variables, or at least specify a target collection.

Great video from Chad on a conversion technique I described above. Recommend watching this video before you embark on a journey to update your color system.

Find Variables plugin by Daniel Destefanis helps you find what variables are being used in your file and easily select the layers using them.

Luis shares good tips and thoughts on using, naming, and organizing color variables, as well as setting up modes for themes. Additionally, he summed up all of the above into a Variable starter kit on the Figma Community.

Good thread by W3C’s Design Tokens Community Group on Figma variables, and how they differ from the spec. Great to see that Figma is actively collaborating with the community group on adding modes to the specification, and already built sample plugins for importing and exporting DTCG-compliant JSON files. (BTW, if you ever wondered what the variables icon was based on — now you know.)

Vijay Verma won’t miss a chance to build something fun with a new Figma feature. Here, he made a fun personalized avatars constructor using different combinations of components and variables.

A deep dive into variables by Thalion.

Occasionally someone builds something in Figma that just melts my brain: ​“Figma-OS is the first Turing-complete 8‑bit computer built using Figma prototyping tools. Figma-OS has state-of-the-art specs with 512 bits of RAM, 16 bytes program memory, 10 Hz clock speed, and a MISC instruction set of 16 OPCODEs.” See the thread from Will DePue on how it works.

While Will was working on Figma-OS, Willy Wu from Figma was also building his own version with a Figma plugin to help compile small C programs using ELVM. Don’t miss a thread on his journey.

Realistic typing is finally possible in Figma prototypes using variables.

Anthony DiSpezio shares a community file and a quick tutorial for creating a cute blooming flower effect.

Vijay is building a game using variables with new advanced prototyping features and explains how it works along the way.

Double Glitch made the Space Invaders game and turned Figma into a game engine.

Great roundup of 7 games made with variables and advanced prototyping. Quite impressive to see how far designers have pushed new features just a week after they were announced.

Molly Hellmuth shares five updates you can make with the new min/​max sizing and auto layout wrap that will make a big difference in your designs. Tip #5 on having text grow in both directions is my favorite!

Zander is showing how to quickly create a responsive card grid.

CSS Evangelist Kevin Powell made a video walkthrough of the new Dev Mode specifically for other developers. Share it with your team!

Jan Toman made an unofficial Figma library of variables and styles that use the default Tailwind CSS configuration.

Library with all colors from Radix Colors, an open-source color system for designing beautiful, accessible websites and apps. Also made by Jan using variables and light/​dark modes.

Flowbite Icons is a collection of 437 free and open-source SVG icons built for the Flowbite Ecosystem.

Great collection of UI elements and patterns organized by the function like login, empty state, wizard, etc. A great resource for gathering ideas and analyzing the best practices.

Figma, but for architects: ​“Arcol is a design and documentation tool that helps AEC teams create better buildings, faster.” Backed by Dylan Field as one of the investors. (Hat tip to Jon Moore.)