Back to Portfolio

Leveraging slots to build better consistency into our digital real estate

2023

Me - (Senior Product Designer)Me - (Senior Product Designer)
Paul (Design System Manager)Paul (Design System Manager)
Dan (Tech Lead)Dan (Tech Lead)
James (Developer)James (Developer)
Ken (Lead QA)Ken (Lead QA)

TLDR

  • Designers were detaching design system components to customise them, breaking the single source of truth and future updates
  • We implemented "slots" into our Figma workflow - a way to maintain component consistency while allowing flexible content insertion, similar to web components
  • This resulted in better design consistency, closer alignment between design and development, and adoption across BA product teams

A bit of background

People were using instances of components in our design system but detaching them to add custom elements - especially in components with open/closed states (accordions, details)

Detached components prevented inheritance from future updates

We needed a way to ensure consistency but also give designers flexibility. This was mostly an issue in components that had open/closed states like accordions, but also happened with things like cards, where we’d see inconsistencies in UI.

We named this FAgel (Fake BAgel)!
A BAgel card vs FAgel card A BAgel card vs FAgel card

The problem with business logic...

We tried building more complex components with lots of business logic. From a design and a code perspective it turned into a nightmare trying to keep heavily business logic’d components up to date constantly in lots of different products. It actually made our detachment woes worse, people were detaching components in their own products to customise them as they felt the included props didn't serve their use cases. Image of some complex flight cards

Slots to the rescue!

Slots are a feature of web components that allow you to pass in markup as a prop. This means that instead of having a hardcoded UI, you can pass in your own markup to be used instead. We were already doing a similar thing in the codebase and a similar functionality had recently been released by Figma, in the form of "Instance swapping"..

Applying slots to other components

We started applying slots to other areas of our design system where we saw they could work. This included things like cards, details and our main navigation component. We also made sure to remove all business logic from these components to make them as flexible as possible. When updating these components, we also made sure that all slot components had at least 2 different examples of how they could be used.

Image of other components with slots

Uptake and Education

Through a series of lunch ‘n’ learns and adhoc tutorials we encouraged this new way of working when dealing with slot based components. Lots of 1:1 help via office hours for implementation. We also reworked a lot of our Figma structure to allow a space for local components.
Airframe cover photo Recording a tutorial on how to use slots for other designers

Where we're at

Some good

We had lots of qualitative feedback from the team about the usage of slots. Once people got it, they got it! The level of consistency issues that we observed in design crits dropped significantly. We knowledge shared across the IAG group, sharing our experience across devs and design teams, they ended up adopting this too. This also our code and design workflow closer together

Some so so

This took a WHILE for designers to understand this new workflow.

We didn’t consistently track Figma analytics to see how much detaching instances went down. I think next time we make a larger workflow change, we’d definitely look at this more closely.