# Create flexible components with slots Source: https://www.youtube.com/watch?v=UjOVRUSdO14 Recap page: https://rapidrecap.app/video/UjOVRUSdO14 Generated: 2026-03-06T15:04:12.802+00:00 --- ## Quick Overview Figma's new Slot component property allows designers to create highly flexible and adaptive components by designating specific areas within a main component instance where other components or content can be freely added, modified, or organized, eliminating the need for tedious detaching or workarounds when handling variable content layouts. **Key Points:** - Slots are a new component property type in Figma designed to function as customizable container areas within a main component instance (01:17). - Designers convert existing frames within a component to slots, which retain properties like fills, effects, and Auto Layout settings (02:33). - Slot properties allow setting 'Preferred Instances' to curate a list of assets users can choose from when inserting content into that slot, reducing guesswork (02:03, 02:14). - The demo shows using a slot to replace placeholder content in a 'Sheet' component, allowing for dynamic content like lists or other components (00:04, 03:00). - When content is added to a slot that has Auto Layout applied, the parent container automatically adjusts its size and layout, maintaining design integrity (03:49). - The functionality supports complex component sets, allowing designers to manage variations across different layouts without breaking the component structure (03:57). ![Screenshot at 00:01: A cursor selects the 'Convert to slot' option from the right-click menu on a frame element within the 'Sheet' component, initiating the process of defining a flexible content area.](https://ss.rapidrecap.app/screens/UjOVRUSdO14/00-00-01.jpg) **Context:** This video tutorial demonstrates the use of the new 'Slot' property type recently introduced in Figma, which enhances component flexibility. The demonstration centers on a 'Sheet' component designed to house variable content, showing how designers can define specific areas within that component where users can insert, swap, or organize other design assets or text dynamically, thus streamlining design system workflows. ## Detailed Analysis The video explains and demonstrates the Figma Slot component property, which enables designers to create highly flexible component structures. Slots are defined by converting an existing frame inside a main component into a slot property (01:17). This conversion preserves the frame's existing properties, such as Auto Layout, fills, and effects (02:33). When an instance of this component is used, designers can insert content—be it other components or raw assets—directly into the designated slot area (04:04). The key advantage shown is that because the slot is tied to Auto Layout, adding or removing content dynamically causes the component instance to adjust its layout predictably (03:49). Furthermore, designers can specify 'Preferred Instances' for a slot, which limits the selection menu shown to users to only the intended assets, reducing guesswork while still allowing flexibility (02:03). The demonstration covers converting a placeholder frame in a 'Sheet' component to a slot, deleting the old instructions layer, and then instantiating various 'List Item' components into that slot to easily create different content configurations for the sheet while maintaining the overall component structure (03:06, 03:43). ### Creating and Identifying Slots - Slots are created by right-clicking a frame within a component and selecting 'Convert to slot' (00:01). Identified slots appear in the Layers panel with a specific icon (02:27). ### Configuring Slot Properties - When creating a slot, designers name it (e.g., 'Sheet content') and can add a description (01:55). Crucially, designers can define 'Preferred Instances'—a curated list of components users can choose from when filling the slot (02:00). ### Using Slots in Instances - When editing an instance with a slot, an 'Add instances' button appears, opening a menu displaying the preferred assets (03:18, 03:21). Designers select an asset, like a 'List Item' component, to populate the slot (03:27). ### Dynamic Layout Handling - Because slots retain Auto Layout properties, adding multiple instances or content of varying sizes into a slot causes the parent component to scale and adjust its layout automatically, ensuring design consistency across different content scenarios (03:49, 04:07). ![Screenshot at 00:00: A visual representation of the 'Sheet' component being designed, showing a title, list items with checkboxes, and a primary button, all contained within a frame selected for modification.](https://ss.rapidrecap.app/screens/UjOVRUSdO14/00-00-00.jpg) ![Screenshot at 00:05: The demonstration shows the sheet component being dynamically inserted into a larger mobile screen context, illustrating how the component is used in a flow.](https://ss.rapidrecap.app/screens/UjOVRUSdO14/00-00-05.jpg) ![Screenshot at 02:22: The 'Create property' modal is open, showing the selection of 'Slot' as the property type, with fields for Name \('Sheet content'\) and Description being filled out.](https://ss.rapidrecap.app/screens/UjOVRUSdO14/00-02-22.jpg) ![Screenshot at 03:54: A side-by-side comparison showing two variations of a 'Challenge' component: the base component on the left and an instance on the right where the slot area has been populated with dynamic content.](https://ss.rapidrecap.app/screens/UjOVRUSdO14/00-03-54.jpg)