Zander Whitehurst shows how to switch color modes with new variables, supafast!

Developer Advocates Jake and Akbar made a couple of sample plugins for importing/​exporting variables and converting existing color styles to variables. (Also, Ryhan provides an interesting insight into how Figma migrated from color styles to variables in their internal design system.)

Confused by how variables are different from styles? Design Systems Product Manager Jacob Miller explains: ​“Styles can contain multiple fills as well as blend modes, and that restricts their use case for design-code alignment and where we can apply them. […] Variables are a single value. They’re more atomic. This means we will be able to use color variables anywhere you see a hex code.” This is my favorite way to think about it: ​“One way to think of it is a style is a CSS class (a group of values), whereas a variable is like a CSS variable.” 

An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.

An in-depth session with practical perspectives on how designers and developers can leverage brand new Figma capabilities to unlock tighter collaboration with one another, prepared by four Figmates — Developer Advocate Jake Albaugh, Group Product Manager Avantika Gomes, Designer Advocate Lauren Andres, and Software Engineer Jenny Lea.

Dylan’s recap of all the updates from the keynote, in a brand-new blog. ​“Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”

If you have time for only one thing this week, this should be it. First, Figma CEO Dylan Field introduces new features — variables, auto layout updates, and advanced prototyping. Then, CTO Kris Rasmussen talks about rethinking product building from the ground up and how the new Dev Mode is bringing design and engineering closer together. In the end, Dylan talks about file browser refresh, font previews, and what AI could look like in Figma — wrapping things up by announcing the acquisition of Diagram.

I watched every Config keynote over the years, and this year’s announcements were the most anticipated and ambitious ever. It’s incredible to see how Figma is growing in depth and breadth at the same time, now providing incredibly advanced tools while covering an entire product-building process from brainstorming to design to development. Exciting time to be a maker.

Evan Wallace, a co-founder of Figma, made this niche plugin 4 years ago, and I just discovered it?! ​“This plugin lets you edit the fill rules of a vector object. Fill rules determine which parts of a vector outline are filled. The fill rules have different behavior when a vector outline overlaps. Why is this useful? Certain export formats (e.g. TrueType fonts, Android VectorDrawable) only support the non-zero fill rule. You can use this plugin to manually convert even-odd to non-zero to make the exporters for these formats work.”

A new workshop from Miggi and Alex on making icons in Figma. ​“In this workshop, we will explore various ways to leverage vector shapes, boolean operations, the pen tool, and more to create reusable icons. These skills can also be applied to producing graphics, illustrations, logos, and other designs that can be used across different platforms.”

Double Glitch pushes Figma’s prototyping limits with this cool mouse tracking effect.

Molly Hellmuth points to five places where her students often get stuck when building component sets in Figma. Matching names of the layers across variants, ordering and grouping properties, rearranging a component set for the most common variant, and breaking down large component sets are all great tips for getting unstuck.

Mal shows hot updates to the new FigJam app for the iPad! It got the new native toolbar with a fresh look and feel. The app was optimized for Apple Pencil, and now it supports a responsive experience for multitasking.

Vijay Verma is killing it with another movie-inspired artwork. Don’t miss the closeup details.

Christine Vallaure recorded a comprehensive guide to setting up, connecting, and updating libraries.

Zander with just-in-time tips on creating a spatial UI for Vision Pro, supafast!

This tip (and the fact that this feature exists) made me irrationally happy. Thanks, Miggi!

Charli Marie with ten tips on how you can get the most out of FigJam.

Luis Ouriach made a starter kit for documenting your components and tokens on the Figma canvas. ​“With this method, we take a set of core styles (primitive tokens), and then ​“alias” them into tokens specific to components. It’s worth noting that aliasing is not technically happening, we are using the hyperlink feature within Figma to link from our semantic, component tokens back to the primitive styles within the same file.” Love seeing a Designer Advocate publishing a token starter kit a few weeks before Config 👀

Bruno Figueiredo, a Community Advocate for Figma in Portugal, came up with a fun community project — ​“lets all record our journeys from all across the globe heading into San Francisco. It doesn’t need to be perfect or look cinematic. Just grab your phone or camera and record the fun moments, the packing, the ride to the airport or the flight, the registration… all the little bits up until the moment the conference is about to start.” Can’t wait to see the end result!

A guest post in Lenny Rachitsky’s newsletter by Figma VP of Product Sho Kuwamoto on the importance of feel, service, and staying close to customers. ​“Fast-forward to 2023, and Figma has grown beyond what I could have imagined. It’s gotten to the point where people often ask me for advice on how to prioritize features or how to run a product process. These questions are hard for me to answer, because I don’t think we do anything special. Our process is messy and we make mistakes. We create designs and then throw them away. We miscommunicate all the time and forget to write things down.”