#018: Figma Slot Components are here!

Very exciting news. Figma released Slot Components last week, and they should now be available on any Pro account once you accept the latest update. Here’s a quick intro to what they are and why they matter below.

Besides the Free Figma Sessions, I’m also adding some free sessions introducing how to build with AI for absolute beginners. I’ll also soon launch a “Build Real Products with AI” cohort-based workshop.
You can already add your name to the waiting list. The first test cohort will be small with limited spots.

Slot Components

Figma introduced Slots, a new way to make components more flexible without breaking your design system.

Instead of creating endless variants or detaching instances, slots let you swap content inside a fixed component structure. This brings design components much closer to how components actually work in code.

I’m currently adding slot examples to all moonlearning.io Figma courses. A full tutorial is arriving on -> moonlearning.io/Figma-components

Below is a short free YouTube preview on how to set up slot components. Download the Figma file to follow along here.

Note: Figma is rolling this feature out gradually, so it may not appear in your account yet.

What is a Slot?

A slot is a defined area inside a component where content can change while the structure stays the same.

Think of it as a flexible placeholder inside a component.

Example

Imagine a Card component. Instead of locking everything into the component, you create slots:

Media slot
Content slot
Actions slot

Now the layout stays consistent, but the content can change.

Media slot
→ image
→ icon
→ avatar

Actions slot
→ one button
→ two buttons
→ link

Same structure but flexible content.

Why this matters

Slots help design systems scale without creating hundreds of variants.

They also mirror how components work in code, which makes handoff clearer for developers.

In short:

More flexibility without breaking the system.
More advanced Slot topics and how to align all of this with code coming soon! 

🚨 Last Call! Figma Masterclass Starting 18th of March 🚨

If you already know the basics but want to design responsively, build scalable components, work faster, and finally understand variables, auto layout, dev mode, and proper handoff, this one's for you.

We’ll cover (full schedule here):

• Components, variants, and properties

• Variables and modes

• Responsive design with auto layout

• Logic-based prototyping

• Dev mode and smoother collaboration

Schedule:
5 live sessions · 2.5h each + Q&A
March 18th to 24th 2026
09:00–11:30 PT / 18:00–20:30 CET

Miss a session? Recordings and materials are included — and you keep them forever.

Info & Booking

Moonlearning upcoming:

Fix Your Figma Auto Layout Confusion FREE 
Sign up now – Online, March 12th 2026 / 30 min  🖥️

Figma Masterclass, 5x2,5h
Sign up now – Online, March 18th - 24th 2026 🖥️

Why Your Figma Files Fall Apart FREE 
Sign up now – Online, April 7th 2026 / 30min 🖥️

Smashing Conference, April 2026
Conference Talk & Workshop – Amsterdam, Netherlands 🇳🇱

AI Basics: Where to Start. Explained in 30 min  FREE
Sign up now – Online, April 30th 2026 / 30min 🖥️

Build Scalable UI in Figma, 4-week cohort NEW
Sign up now – Online, May 4 to June 3, 2026 🖥️

Build Your First Product with Lovable AI FREE
Sign up now – Online, May 21st 2026 / 30min 🖥️

Pixel Pioneers, June 2026
Conference Talk – Bristol, UK 🇬🇧

Freelance Unlocked, June 2026
Conference Talk – Berlin, Germany 🇩🇪

See all workshops -->
See all video courses -->
See all free events -->

Want to learn more about Figma, UI and Building?

Get a moonlearning.io membership today and access all courses, from beginner to pro, covering Figma, UI and UX principles, and how to not only design but also build your own websites and products. 

View all courses 

This newsletter reaches designers building modern products with Figma and AI tools. If you'd like to sponsor an issue, just reply to this email.