Ridd published a crash course on advanced Figma prototyping with variables. He explains when to use variables instead of variants and shows how to streamline the prototyping process by using variables to update UI elements without requiring multiple frames. Additionally, he prepared a community resource with slides and examples.

Ridd runs a free advanced prototyping crash course on March 29^th.

Ridd with a step-by-step process for nailing dark and light modes in Figma. Love his way of thinking about counterpart colors on the opposite ends of the spectrum for specific use cases — texts, backgrounds, borders, and icons.

Jenny Wen is the founding designer at FigJam and the person who brought it to market. In this interview with Ridd, she shares invaluable insights about FigJam’s product strategy, adding delight to software, and attacking ambiguity early in the process.

Ridd goes deeper into one of the topics they’ve covered with Molly and suggests questions to ask yourself before committing to a new Figma feature or workflow. One common theme in all three of his ​“regrets” is complexity — just like in code, it can be considered a detectable ​“smell”.

So excited for this episode of Ridd’s Deep Dives podcast with Molly Hellmuth! They get into the nerdier side of Figma and discuss adopting variables, making sure you don’t invest in a Figma strategy that you’ll regret later, Molly’s favorite design systems plugins, and how she’s building components differently in v8 of her UI Prep design system.

Ridd recommends including little nav menus in high-fidelity prototypes so that viewers can easily inspect the different states of a page. Great advice and something I’m going to introduce to my prototypes!

How to preserve a button’s volume across multiple themes? Ridd suggests combining brand variables with a style wrapper for reusing gradients.

Ridd interviewed Nikolas Klein and Garrett Miller from the prototyping team at Figma. Together, they provide a behind-the-scenes look at everything that led up to the advanced prototyping release at Config 2023. For a few takeaways on two types of prototypes and the use of variables, see this thread by Ridd.

Ridd points out two common problems with UI kits (manual updates of shared attributes and maintaining multiple breakpoint variants) and shares a variable system to make your life way easier.

Ridd shares a few repeatable steps to start prototyping with variables — creating the variable you need, assigning the variable to the UI, testing the connection, and setting up your triggers.

Something must be (hovering) in the air, as Ridd also shared his thoughts on selecting a color for the hover state with the right amount of saturation.

Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.

Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.

Ridd interviews Luis Ouriach about using variables for his Deep Dives podcast. ​“Luis goes deep into strategies based on team size, provides naming guidance, and even breaks down how he thinks about structuring libraries with variables in Figma. Lastly, Luis shares a behind-the-scenes of his journey as a designer advocate and even gives a unique prediction for how AI will take shape inside of Figma.”

Ridd shares a free annotation components library to help designers communicate more effectively and nail down the handoff process. Comes with a video lesson on organizing Figma files using the helpers library.

Ridd just launched Deep Dives, ​“a new interview series full of stories and advice to help you take a huge leap forward in your career”. In the first episode, Joey Banks gives an in-depth look at what it’s like to lead design systems at Twitter and Webflow, shares his strategies for structuring component libraries, working efficiently in Figma, and even keeping up with all of the latest plugins and tooling.

Ridd came up with a new tutorial on how to use Kernel for designing in Figma 10× faster with real data. Kernel is a new product that ​“makes it easy to generate and access the content you need so you can design faster than ever”, and connects Figma to other services like Notion, Airtable, Google Sheets, and OpenAI.

Ridd just launched Dive with an amazing lineup of design educators. In this tutorial, he designs the new Dive website and shows how his use of components to speed up workflow in Figma, talks about visual design principles and his approach to UI design in Figma. Lastly, he shows how easy it is to go from Figma to Framer to a published website.

Ridd explains why it’s better to think of each container component as having a single slot instead of a bunch of individual slots.