Design Tactics #3 — Advanced "Slots", Webflow tutorials, and more...
Hope you had a wonderful holiday season and are staying safe out there. There aren’t enough hours left in 2021 to waste any time, so let’s dive straight into the goods 👇
Advanced "Slots" walkthrough video 🎰
One of the most challenging features I’ve designed this year at Maven is the course landing page editor. Part of what makes the experience tricky is that we use a set of components that can display an almost infinite combination of UI within them.
As I got further into the design process though, I realized that this section of the product was the perfect use case for “slots”.
So this video walks you step by step through my setup and demonstrates how you can use slots at the subcomponent level as well as the parent layout level. And don’t worry… I’ve since bought a pop filter 🤦
How to leverage slot components in Figma
Creating gradient scroll animations 🎨
Part of the new redesign for the Figma Academy website involved creating a series of gradient scroll transitions. For example, in the .gif below, the section background transitions from a reddish-purple to more of a green as you move down the page.
Scrolling the Figma Academy testimonials section
Enough people asked me how I set that interaction up so I decided to make a quick video showing how easy it is for you to do something similar.
How to create a scrolling gradient transition in Figma + Webflow
I published a new Community walkthrough 🎁
Last week I released a new Figma community file demonstrating how to leverage `IconWrapper` components in your designs.
IconWrappers are an incredible tactic that allows you to automatically resize any nested icon using variants. That means you no longer have to create size variants at the icon level, add hidden icons in your components, etc.
If you’re not already using IconWrappers in your components, I highly recommend checking this one out 👇
IconWrapper—One of my favorite workflow enhancements for 2021
This is a walkthrough + video lesson demonstrating how you can use IconWrapper components to be able to easily resize every icon even when it’s nested in a component 💪
How to avoid the #1 mistake people make with interactive components 👇
Have you ever triggered an interactive component animation only to lose your overrides in a flash?
I’ve seen more than a few people experience issues in the last month so I made a holiday-themed lesson walking you through my strategy for naming layers in my variants to make sure that never happens again.
Top walkthroughs of 2021 ✨
I created a lot in 2021. So a few days ago I went through all of my Twitter threads and pulled out the best of the best so that you can access everything in one place. Hope it helps!
Official Figma Academy demo video 📼
We’re only 7 days away from open enrollment for Figma Academy 🎉 Not only did I celebrate with a new website, but I also published an official demo walkthrough video that gives a peek behind the scenes.
Figma Academy demo video
Have a blast this New Years Eve and stay safe out there!
— Ridd