Slots pattern for flexible components in Figma - Cell-by-Cell Formula Trace

Concept Flow

Component: Card
  ├─ Slot: Header
  ├─ Slot: Body
  └─ Slot: Footer

Component: Modal
  ├─ Slot: Header
  ├─ Slot: Body
  └─ Slot: Footer

This diagram shows two UI components, Card and Modal, each having three named slots: Header, Body, and Footer. The slots pattern allows placing different content into these named areas flexibly.

Formula

RenderComponent('Card', {Header: 'Title Text', Body: 'Description Text', Footer: 'Action Buttons'})

This command renders the Card component by filling its Header, Body, and Footer slots with the specified content.

Step-by-Step Trace

Step	Expression	Evaluates To	Explanation
1	Identify component type 'Card'	Card component structure with slots Header, Body, Footer	Select the Card component which has three slots.
2	Assign content to slots: Header='Title Text', Body='Description Text', Footer='Action Buttons'	Slots filled with provided content	Each slot receives the specified content.
3	Render Header slot with 'Title Text'	Header area shows 'Title Text'	Header slot displays the title text.
4	Render Body slot with 'Description Text'	Body area shows 'Description Text'	Body slot displays the description text.
5	Render Footer slot with 'Action Buttons'	Footer area shows 'Action Buttons'	Footer slot displays the action buttons.
6	Combine all slots into final Card component render	Complete Card component with Header, Body, Footer content	All slots combined to produce the final rendered component.

The final output is a Card component with its three slots filled and rendered.

Variable Tracker

Variable	Value	Description
ComponentType	Card	The UI component being rendered
Slots	{Header, Body, Footer}	Named areas inside the component
HeaderContent	Title Text	Content assigned to Header slot
BodyContent	Description Text	Content assigned to Body slot
FooterContent	Action Buttons	Content assigned to Footer slot

Key Moments

What slots does the Card component have?

What content is assigned to the Body slot in this example?

Why use the slots pattern in components?

Sheet Trace Quiz - 1 Questions

Which content is rendered in the Card component's Footer slot?

A Action Buttons

B Title Text

C Description Text

D Modal Title

Key Result

Slots pattern lets components have named areas where different content can be placed dynamically, making UI components flexible and reusable.

Transcript

We start by choosing the Card component which has three slots: Header, Body, and Footer. Then, we assign content to each slot: 'Title Text' to Header, 'Description Text' to Body, and 'Action Buttons' to Footer. Each slot is rendered with its content, and finally, all slots combine to form the complete Card component. This pattern helps build flexible UI components by allowing dynamic content placement.