Afi Design System — Building design infrastructure for a fintech consultancy
Afi is a financial consultancy that added a digital team during the dot-com boom and grew it as engineers: 40 programmers hired for math and CS, no dedicated designers until 2021, and no design system. Afi runs three brands; this is the system for Afi web, the internal and client-facing sites that carry the Afi brand. It's what someone reaches for to mock up a concept before committing time to real UI and internal solutions.
Role: Design Systems Lead
Contribution: Design systems, Token architecture, Component library, AI tooling, White-label strategy
Programmers have different permissions to Figma, so handoffs were inconsistent because they saw different things. They also wouldn't use the components in Figma, just the flows, but then would ask me component-specific questions. It was because we didn't have time to properly document the Figma for them.
Now I made the component playground to look at states, interactions, tokens in an isolated place.
Figmas were made one at a time. Designers were always being rushed, so there was never time to define anything or build components, and the workflow that came out of it was inefficient for everyone.
We started on PrimeNG but with the white-label objective it became too many layers to build without a headache. So we built a color token strategy.
Swapping tokens is good for quick changes when a concept has to go out to a client, but the patterns and the visual essence get lost.
We're working with some of our clients now on a more cohesive white-labeling in code.
A designer makes a million decisions across a project, big and small. As the only full-time designer, my attention splits across forty programmers, so insights land with one team and never reach the others, and in a preference-first culture that means defending the same call repeatedly.
A shared design language only exists if everyone has the same access to it. So, I documented everything and made assets like token sets and skills downloadable.
When showing the team the first version the feedback was: “How do we give you feedback?” They mentioned they liked Figma because of how they can stay up to date with comments.
Now the user can pin a specific component or element and leave a comment. Once the comment lands I can generate an MD file for the changes. We make the iteration and document it in our change log.
Programmers don’t use primitives. They say color-main and the hex. A mid/senior teammate, looking at the inspector: “We know we are doing it wrong but the team won’t change.”
So the inspector answers in their vocabulary, not mine. In Figma the team has different permissions, so some people had more features than others. Here everyone sees the same thing, which evens the playing field.
