Leverage the power of auto layout!
I led the thoughtful deprecation of nested components from the Figma component library at NCR. This enabled cleaner library files for designers and led to quicker, consistent, and flexible wire-framing.
The older version
The older version of the component library contained:
– 72 tab component pieces
– 90 tab group components
Zoom in to see all the details! The parts highlighted in yellow existed in the older version, but are deprecated in the updated version. Continue reading to see the benefits of a slimmer design system.
The updated version
Tab groups utilizing auto layout are available in a grab and go UI kit file. They are not components themselves, but rather a flexible pattern that consists of component pieces. Along with the auto layout update, we also removed the “aesthetic only” variants.
The updated tab component
The updated version of the component library contains:
– 16 tab component pieces
The UI kit with auto layout tab groups
The UI kit related to the updated version contains:
– 16 configurable auto layout patterns
Enabling faster tab rearrangement
In the example of rearranging items within a tab group, the design time decreased
from 27.99 seconds to 2.73 seconds, improving the time by 90.2%.
“Rearranging tabs” in the older version required both icon and label updates. In order to change the order, the content had to be updated. This workflow is even more catastrophic if you consider having to update prototype pointers.
The updated design system allows the designer to simply use the arrow keys to rearrange the tabs! This solution is quicker and more flexible.
Efficiently removing a tab from the tab group
In the example of removing the fourth item from a five item tab group, the design time decreased
from 34.19 seconds to 3.81 seconds, improving the time by 88.9%, and also enabled consistent results.
The old version supported multiple inconsistent methods to that has the potential for unforeseen symptoms in the future. The old version solved short-term goals well enough, but is difficult to maintain long-term, especially considering multiple designers supporting the same design files.
- On the right sidebar, if the designer changed the variable from four to five items, the last item is removed and the designer is required to update the content. It technically reaches the design goal, but there is a more consistent setup.
- On the left sidebar, if the designer deleted or hid the tab, the tab group component would still claim to contain five items. It technically reaches the design goal, but there is a more consistent setup.
The updated version allows the designer to use the delete key to remove the tab. This provides consistent and quicker updates to designs.
Utilizing components for pieces, and auto layout groups for patterns is a seamless way to build a flexible design system.
Amy M Street 