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.
Came across these hover states today...
— Ridd ๐คฟ (@ridd_design) October 11, 2023
Notice how the grays feel kinda... off?
It's a mistake I see a lot ๐ฌ
Here's a better way๐ pic.twitter.com/BBVMB6Le9Z
Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.
By far my favorite use case for variables in @figma prototypes is being able to update the state of a component ๐ช
— Ridd ๐คฟ (@ridd_design) October 6, 2023
But it took me a bit to wrap my head around the feature...
So here's a ~1 min video walking you through how it works (more below)๐ pic.twitter.com/KUd8lUkY2e
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.
More Figma nerdery...
— Ridd ๐คฟ (@ridd_design) August 22, 2023
I want to account for optical balance when icons are hidden from my button (so ideally you'd have less padding when an icon is present)
Anyone have a better solution than wrapping icons in a smaller frame and attaching the boolean there? pic.twitter.com/wxTMQQ64n5
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.
Seeing a lot of people making the same mistake with slot components...
— Ridd ๐ (@Ridderingand) November 15, 2022
Here's what to avoid ๐ pic.twitter.com/vu0KxP7vMa
Ridd shows how to use the new beta to expose the subcomponent state, avoid breaking down components, and set preferred values for โโslotsโ.
The component properties beta is ๐ฅ
— Ridd ๐ (@Ridderingand) October 18, 2022
Here are 3 ways I'm using the new features to level up my Figma game ๐ pic.twitter.com/txBKz0F5Wz
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.
I'm constantly asked about .base components...
— Ridd ๐ (@Ridderingand) October 13, 2022
My answer: now that variant sets are smaller AND it's easier to make bulk changes...
The benefit (ease of updating) is no longer worth the cost (ease of use).
But there's one use case I still love ๐ pic.twitter.com/InfTH6Arm3
Ridd with a pro tip on using Variants. Good prep work for the design tokens in the future!
Variants pro tip incoming ๐
— Ridd ๐ (@Ridderingand) September 18, 2022
Create a single set of height variables.
And then apply them across all of your core "atoms" (buttons, inputs, etc.)
3 reasons why ๐ pic.twitter.com/McUW6B2Ua8
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.
These two components might LOOK the same...
— Ridd ๐ (@Ridderingand) July 6, 2022
But they couldn't be more different:
โข โ One crushes component props
โข โ One creates a nightmare
5 best practices for component props ๐ pic.twitter.com/x3ooMihZMp
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โ.
One of my favorite design tactics is creating "Switchboards" in Figma.
— Ridd ๐ (@Ridderingand) June 5, 2022
It's a waaaayy more efficient way of prototyping.
Here's how they work ๐ pic.twitter.com/SmU89pknwS
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.
By now youโve probably seen a few of these before/after screenshots like the one below:
— Ridd ๐ (@Ridderingand) May 31, 2022
Pretty incredible, right?
Yes, BUT... pic.twitter.com/wE1HVHY2yI
Ridd is rethinking his approach to content systems with the introduction of Component Properties.
Config was a gamechanger for "Slot" components...
— Ridd ๐ (@Ridderingand) May 19, 2022
They're now more powerful than ever and I'm starting to rethink how I approach content systems in Figma...
Time for a deep dive๐ pic.twitter.com/1mID6OkAwV
Ridd shows why the new Instance Swap component property โโblows the roof off of what we can do with componentsโ.
Wow, instance swapping is about to blow the roof off of what we can do with components ๐คฏ
— Ridd ๐ (@Ridderingand) May 10, 2022
Here's how ๐ #config2022 pic.twitter.com/PiO0DjB2g3
Nice trick on using โโafter delayโ animation in combination with a Lottie file to avoid an infinite animation loop and play it only once.
Ready for a @figma prototyping pro tip?
— Ridd ๐ (@Ridderingand) February 21, 2022
Use interactive components w/ @LottieFiles
It's the best way to add animations to your design system
Here's how it works ๐ pic.twitter.com/A4oxSfefJW
Ridd discusses a few key principles for using base components: How often are you iterating on the component? How complex is it? Avoiding problems with Interactive Components. Pairing primitives with slots. Bringing in base components early on to speed up the process.
I'm starting to believe we're thinking about .base components the wrong way...
— Ridd ๐ (@Ridderingand) March 6, 2022
They're extremely powerful but only when used correctly.
So here are 5 principles for using .base components the right way๐ pic.twitter.com/HjYKEy7nOX