Go to Fox Pass home

Flexible Figma components with slots

Learn how Slots in Figma simplify the design and maintenance of complex components, enhancing your workflow and efficiency.

karthik
Learn how Slots in Figma simplify the design and maintenance of complex components, enhancing your workflow and efficiency.

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

screen showing modals, cards, & bottom sheets 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.

screen showing component slots 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.

bottom sheet made with slots 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.


What are some of your favourite Figma tricks? Tweet to us, tell us in Insta DM — we are always up for a quick chat. 😃

We are your team!

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

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

image of a letterbox with fox pass sticker