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

Lilibeth Bustos Linares interviews Miguel Cardona at the SoulDoodles podcast, where they trace his inspiring journey from being an assistant professor at RIT, to leading product design at Imgix, and to joining Figma as a Designer Advocate for Education.

A new tutorial from Vijay Verma on creating an animation for a loader indicator shaped like a glass filled with liquid. The prototype uses a few variables and conditions, and he shares them in the cheat sheet in the thread.

Christine Vallaure wrote about one of the most under-the-radar new features of the Dev Mode — units conversion. Now, you can design with pixels and then translate them to rem or other relative units in code. (Thanks for sharing the friend link with Figmalion, Christine!)

Luis Ouriach with an introduction to variables and a primer on how to structure your variable collections for single and multi-brand systems.

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.

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

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

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.

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.

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

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

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

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

A new plugin by Jan Toman: ​“Export variables from one file and import them to another. It’s great for migrating libraries, or when you downloaded a library from the community and you’d like to import variables to your existing design system.”

As always, Double Glitch is pushing the limits of Figma prototypes — this time by rendering a rectangular cuboid in 3D using variables and advanced prototyping. See his demo on Twitter and thoughts on the intricacies of this project.

Miggi covers the different ways that variables can be added when creating prototypes, and how you can use them to make them more dynamic and with fewer frames. We cover all of the currently available variable types: booleans, numbers, strings, colors, and even discuss how to bind string variables to interactive components.

Designer Advocate Mal shares a few handy shortcuts that are worth memorizing — quick actions search, hide the layers panel, insert components, and zoom to selection.

MDS experiments with swapping variant instances between modes using boolean variables, and Johan Netzler suggests an alternative solution.