Slot components for dummies

•

"Slots for dummies" The complete guide to @figmadesign 's ultimate super power 👇

WHAT ARE SLOTS? ⇨ They are placeholder components ⇨ When you insert them into a normal component (like a card)...they allow you to replace the slot with any other component that you'd like! ⇨ This allows you to have maximum flexibility in your components 💪

WHY ARE SLOTS VALUABLE? ⇨ They minimize your sources of truth by making your components more versatile (less detaching instances) ⇨ They decrease the amount of UI that you have to design ⇨ They work like code, so you can share the same mental models as the engineering team

USE CASE 01 👇 When you have a piece of content that can be displayed in different types of containers. For example: ⇨ You have a single source of truth for "Content" ⇨ But you can insert it into both your "Modal" and your "Card" w/o requiring you to make new components

USE CASE 02 👇 When you have a consistent container that can display many different types of content inside ⇨ Now you can maintain a single source of truth for the container UI ⇨ And design an infinite amount of content components without increasing your sources of truth

USE CASE 03 👇 When you have a consistent page template that can display many different variations of content. ⇨ Slots allow you to create a single source of truth for the core layout (ex: spacing) ⇨ Then you can focus on designing only what changes within the page content

There are countless examples that fit into these three use cases. Slots make your components infinitely more powerful and are the ultimate bridge between component libraries. Here are 3 practical tips for using "Slots" effectively 👇

TIP 01 👇 If you're using slots to display many different types of content within a standardized card component... ⇨ Make the "Slot" component the first variant in a larger "Card Content" component. ⇨ Then all your content options are available in the variants dropdown

TIP 02 👇 Build with auto layout whenever possible and make "fill container" your default for everything ⇨ This way the components you're inserting are 100% flexible and can inherit the width of the parent component like the modal content in this .gif

TIP 03 👇 Write descriptions to help people understand how each slot is intended to be used ⇨ One way I'll do this is by adding a description within the slot itself ⇨ I also like to add descriptions to the component which help others find the right components to swap in

If you like going deep into Figma land make sure to follow @Ridderingand I also share the best/most practical design tactics I learn each month in a no-fluff email 👇 getrevue.co/profile/ridd