3 / S C
Designing complex components like cards, modal dialog boxess, & bottom sheets can be more challenging than creating simple atomic components like buttons or form elements.
Simplifying the design and maintenance of complex components using Slots
complex components like modals, cards, & bottom sheets need flexibility for the kind of content they need to be able to contain
For instance, a bottom sheet can contain various types of content, ranging from selection widgets to input forms, which makes creating a pre-designed version with all the possible variants quite time-consuming. Besides, such a component would restrict the ability to introduce new layouts and end up with instance properties as complicated as control panel of a commercial flight.
component slots
A more efficient approach would be to create an empty shell for the bottom sheet, with ”Slot” components that can be swapped with appropriate content using Figma's instance swap property. This way, local content components can be swapped in for each use case, whether it is an existing or new one.
A Slot is essentially an empty placeholder component that can be replaced with relevant content or modules.
this bottom sheet is constructed with slots which can be replaced with more contextual components, modules, or content.
By defining the bottom sheet's internal spacing and surface styling within the component, it can help maintain consistency, while keeping the component itself simple and easy to maintain. Moreover, since the content components are created independently, they can be updated, extended, or modified anytime to meet new design requirements without having to detach or rebuild the components.
Here’s an ultra customisable search component built following using slots and with variable-based themability. Download it from Figma community. You will find more awesome resources on our website.
What are some of your favourite Figma tricks? Tweet to us, tell us in Insta DM — we are always up for a quick chat. 😃
