Go to Fox Pass home

Flexible Figma components with slots

Simplifying the design and maintenance of complex components using Slots in Figma

design systems — figma

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.

We are your team!

We are taking up new engagements across user research, product, & editorial design.

Do you or someone you know needs amazing digital experiences researched and designed? Write in now.