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
“Slots Components for Dummies” by Ridd, who is one of the biggest proponents of this approach. Great guide to one of Figma’s ultimate superpowers.
"Slots for dummies"
— Ridd 🏛 (@Ridderingand) January 15, 2022
The complete guide to @figmadesign 's ultimate super power 👇 pic.twitter.com/hhlkNVKuPl
A practical walkthrough by Ridd of how you can use slot components to build a scalable system in Figma that is efficient and flexible.
Ridd shares his approach to organizing files in Figma.
I'm constantly asked...
— Ridd 🏛 (@Ridderingand) November 26, 2021
"How do I organize my files?"
So here are my 7 goals for file organization in @figmadesign 👇 pic.twitter.com/NFuhHP3euu
Ridd shows how he automated a repetitive part of his workflow with Automator.
Ridd shows an unconventional approach of using Interactive Components from the very beginning of the design process. Also, love his tip on using a second Figma window for the real-size preview!
Interactive components are my favorite @figmadesign feature.
— Ridd 🏛 (@Ridderingand) November 13, 2021
So why wait to use them until the end?
They're even more powerful as the very first step in the process!
Here's how I use them to explore new ideas 👇 pic.twitter.com/zir1RzgF2i
Ridd with a step-by-step walkthrough to help you design form components that scale without drowning yourself in variants.