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.

Ridd shows how to use the new beta to expose the subcomponent state, avoid breaking down components, and set preferred values for “slots”.

With the recent improvements to variants and components, Ridd makes a point that the benefits of using base components are no longer worth the cost for the design systems work. That said, they’re still great for exploratory work.

Ridd with a pro tip on using Variants. Good prep work for the design tokens in the future!

Ridd finally launched his YouTube channel! That’s an instant-subscribe. There are already a bunch of great videos, including the latest on building a product design inspiration database in Notion. See also his best practices for component properties.

Ridd shares five awesome strategies for using component properties: strategic nesting, progressive disclosure, minimizing decisions, emojis, and streamlining the instance swap.

Ridd: “Switchboards are main components that have been pulled out of a chunk of UI so as to function as a single place to control all of the prototyping connections”.

Ridd warns that using component properties introduces a new type of responsibility for designers and explores what the most effective handoff deliverable actually looks like.

Ridd is rethinking his approach to content systems with the introduction of Component Properties.

Ridd shows why the new Instance Swap component property “blows the roof off of what we can do with components”.