tl;dr
Project: Redesign of a digital interface following token implementation
Role: UI Designer involved in component and layout assembly
Problem: Old components lacked scalability, many variations, and bugs during updates
Solution: Implemented the slot system in Figma, rebuilt components and layouts
Result: Flexible components, faster workflow, improved UX
Bonus: Discovered and fixed bugs, identified limitations of the slot approach — lessons learned for the future
>
Background
The primary objective was to refresh the portal’s appearance, making it more modern and youthful, while maintaining all existing functionality.
To achieve this, the design team decided to adopt the Slot system in Figma — a flexible approach to building components that allows designers to easily swap out parts of a component without creating numerous variations or complicating the design system. This method aimed to streamline the redesign process and ensure consistency across the interface.
>
The Problem
Large volume of work across many screens and user flows
Numerous component variations make it hard to maintain consistency
Manual layout updates were time-consuming and prone to errors
Needed to quickly refresh the interface without losing quality, and simplify handoff to development
//
example of scenarios
//
slot system example
>
my contribution
I actively participated in transforming the design system: from rebuilding components to cleaning up layouts and flows using the new slot-based approach.
Helped optimise components for the slot system: identified universal blocks, defined their behaviour and styles
Rebuilt dozens of layouts and user flows, replacing outdated blocks with new universal slot components
Tested Figma’s stability during different types of swaps and identified bugs
Contributed to bug fixing: resolved issues with layout, lost styles, and broken hierarchies
//
example of component redesign
//
example of portal redesign
//
example of handoff file
>
outcome & reflection
The slot approach significantly simplified interface work:
Layouts became faster to adapt to various scenarios
Updates became easier: one fix reflected in dozens of places
Components became more predictable and scalable
Manual work time was greatly reduced
However, I noticed that Figma doesn’t always handle complex component swaps with slots perfectly — some content can be lost, and cause auto-layout breaks. To avoid this, it’s crucial to plan component structure and possible variations in advance.
This approach significantly improves scalability, maintainability, and brand adaptation across platforms. I implemented this structure in the following AI project, where it proved to be much more resilient and reusable.
Thanks for checking!
>
More projects
