Maturing a design system for the Dutch postal office
I joined PostNL's design system team in 2020 as an external collaborator. I familiarised myself with the design system by performing visual design reviews. Gradually, my responsibilities shifted to contributing to and maintaining the design system.
Migrating from Sketch to Figma
When I started, PostNL's designers worked with Sketch. Libraries were all set up before I joined the team. One of PostNL's feature teams successfully proved that Figma was an excellent tool for collaborative design. Plus, it could replace more software the design team relied on until then, such as Zeplin for hand-off, InVision for prototyping and Dropbox for versioning.
It was my task to migrate three design libraries from Sketch to Figma:
A Foundation library, which contained basic brand assets such as color, typography, icons and images.
A Web library, with generic components used in websites and web apps. All generic styles came directly from the Foundation library.
An App library. This library was similar to the web library, but (obviously) contained components to be used in native apps for iOS and Android.
The migration to Figma came as an opportunity to improve the way of working for designers, since its approach to components was different than Sketch's:
I applied Figma's auto layout to each component to ensure scalability.
We variants of component where possible to reduce the amount of assets the design team had to maintain. Moreover, I empowered PostNL's designers to learn how to work with variants.
I placed components on separate pages to make it easier to maintain libraries. Also, this greatly helped to order assets alphabetically, which was a tedious task in Sketch's single symbol page setup.
Working towards a single source of truth
While the shared libraries ensured consistency in design, PostNL's feature teams were structured as silos. A few exceptions aside, almost each team had implemented components in their own codebase. The design system team made every effort to achieve parity of design and development, but it was obvious that this wasn't a scalable approach.
When I took the initiative to identify design tokens based on our foundations and components, I created a proof of concept for connecting Github, Tokens Studio and PostNL's Figma libraries.
Github acted as the source of truth for tokens. In the same repository, the tokens were transformed to CSS variables to prove that designers and developers could rely on the same source.
The Tokens Studio plugin for Figma acted as a bridge between Github and Figma. I maintained the tokens within the plugin, while benefitting from its feature to translate the tokens to native Figma styles and such.
At the same time, a small number of developers worked on a similar concept to substantiate that a React component library could form the basis for other frontend frameworks used throughout PostNL's online ecosystem. Both initiatives ultimately came together in Stamp, PostNL's accessible and centralised design system. Next to myself and said developers, an accessibility expert and product owner formed a dedicated team that helped to grow Stamp to become a single source of truth.
My main responsibilities as part of Stamp's team were:
Making design tokens the understructure for the above-mentioned libraries and its own codebase.
Add support for theming —light and dark mode— through design tokens.
Performing (visual) design checks on components in React and several other frameworks to ensure parity between Figma and implementation.
Writing and maintaining documentation about components, patterns and more on zeroheight.
Embracing new branding
In my final months as a contributor to Stamp, our team worked hard to embrace PostNL's refreshed corporate branding in the design system. The preconditions were good, since we already had tokenised design and code. We could heavily rely on the system we had up until that point, and make iterations on tokens for new design decisions.
Figma had already introduced its Variables feature (in beta) and I advocated to use variables in new design libraries that were created in the process of rebranding. In my opinion, there was no real disadvantage to being an early adopter. On the other hand, this feature could result in a stronger connection between design and code. I setup the new Foundation library by converting Stamp's design tokens to Figma variables for things such as color, spacing, and sizing. Because our tokens already consisted of a semantic color palette for different themes, variables now enabled us to seamlessly switch between light and dark mode within Figma as well.
All in all, I am most proud that all this work resulted in a higher adoption of Stamp within PostNL as an organisation.
Maturing a design system for the Dutch postal office
I joined PostNL's design system team in 2020 as an external collaborator. I familiarised myself with the design system by performing visual design reviews. Gradually, my responsibilities shifted to contributing to and maintaining the design system.
Migrating from Sketch to Figma
When I started, PostNL's designers worked with Sketch. Libraries were all set up before I joined the team. One of PostNL's feature teams successfully proved that Figma was an excellent tool for collaborative design. Plus, it could replace more software the design team relied on until then, such as Zeplin for hand-off, InVision for prototyping and Dropbox for versioning.
It was my task to migrate three design libraries from Sketch to Figma:
A Foundation library, which contained basic brand assets such as color, typography, icons and images.
A Web library, with generic components used in websites and web apps. All generic styles came directly from the Foundation library.
An App library. This library was similar to the web library, but (obviously) contained components to be used in native apps for iOS and Android.
The migration to Figma came as an opportunity to improve the way of working for designers, since its approach to components was different than Sketch's:
I applied Figma's auto layout to each component to ensure scalability.
We variants of component where possible to reduce the amount of assets the design team had to maintain. Moreover, I empowered PostNL's designers to learn how to work with variants.
I placed components on separate pages to make it easier to maintain libraries. Also, this greatly helped to order assets alphabetically, which was a tedious task in Sketch's single symbol page setup.
Working towards a single source of truth
While the shared libraries ensured consistency in design, PostNL's feature teams were structured as silos. A few exceptions aside, almost each team had implemented components in their own codebase. The design system team made every effort to achieve parity of design and development, but it was obvious that this wasn't a scalable approach.
When I took the initiative to identify design tokens based on our foundations and components, I created a proof of concept for connecting Github, Tokens Studio and PostNL's Figma libraries.
Github acted as the source of truth for tokens. In the same repository, the tokens were transformed to CSS variables to prove that designers and developers could rely on the same source.
The Tokens Studio plugin for Figma acted as a bridge between Github and Figma. I maintained the tokens within the plugin, while benefitting from its feature to translate the tokens to native Figma styles and such.
At the same time, a small number of developers worked on a similar concept to substantiate that a React component library could form the basis for other frontend frameworks used throughout PostNL's online ecosystem. Both initiatives ultimately came together in Stamp, PostNL's accessible and centralised design system. Next to myself and said developers, an accessibility expert and product owner formed a dedicated team that helped to grow Stamp to become a single source of truth.
My main responsibilities as part of Stamp's team were:
Making design tokens the understructure for the above-mentioned libraries and its own codebase.
Add support for theming —light and dark mode— through design tokens.
Performing (visual) design checks on components in React and several other frameworks to ensure parity between Figma and implementation.
Writing and maintaining documentation about components, patterns and more on zeroheight.
Embracing new branding
In my final months as a contributor to Stamp, our team worked hard to embrace PostNL's refreshed corporate branding in the design system. The preconditions were good, since we already had tokenised design and code. We could heavily rely on the system we had up until that point, and make iterations on tokens for new design decisions.
Figma had already introduced its Variables feature (in beta) and I advocated to use variables in new design libraries that were created in the process of rebranding. In my opinion, there was no real disadvantage to being an early adopter. On the other hand, this feature could result in a stronger connection between design and code. I setup the new Foundation library by converting Stamp's design tokens to Figma variables for things such as color, spacing, and sizing. Because our tokens already consisted of a semantic color palette for different themes, variables now enabled us to seamlessly switch between light and dark mode within Figma as well.
All in all, I am most proud that all this work resulted in a higher adoption of Stamp within PostNL as an organisation.
Maturing a design system for the Dutch postal office
I joined PostNL's design system team in 2020 as an external collaborator. I familiarised myself with the design system by performing visual design reviews. Gradually, my responsibilities shifted to contributing to and maintaining the design system.
Migrating from Sketch to Figma
When I started, PostNL's designers worked with Sketch. Libraries were all set up before I joined the team. One of PostNL's feature teams successfully proved that Figma was an excellent tool for collaborative design. Plus, it could replace more software the design team relied on until then, such as Zeplin for hand-off, InVision for prototyping and Dropbox for versioning.
It was my task to migrate three design libraries from Sketch to Figma:
A Foundation library, which contained basic brand assets such as color, typography, icons and images.
A Web library, with generic components used in websites and web apps. All generic styles came directly from the Foundation library.
An App library. This library was similar to the web library, but (obviously) contained components to be used in native apps for iOS and Android.
The migration to Figma came as an opportunity to improve the way of working for designers, since its approach to components was different than Sketch's:
I applied Figma's auto layout to each component to ensure scalability.
We variants of component where possible to reduce the amount of assets the design team had to maintain. Moreover, I empowered PostNL's designers to learn how to work with variants.
I placed components on separate pages to make it easier to maintain libraries. Also, this greatly helped to order assets alphabetically, which was a tedious task in Sketch's single symbol page setup.
Working towards a single source of truth
While the shared libraries ensured consistency in design, PostNL's feature teams were structured as silos. A few exceptions aside, almost each team had implemented components in their own codebase. The design system team made every effort to achieve parity of design and development, but it was obvious that this wasn't a scalable approach.
When I took the initiative to identify design tokens based on our foundations and components, I created a proof of concept for connecting Github, Tokens Studio and PostNL's Figma libraries.
Github acted as the source of truth for tokens. In the same repository, the tokens were transformed to CSS variables to prove that designers and developers could rely on the same source.
The Tokens Studio plugin for Figma acted as a bridge between Github and Figma. I maintained the tokens within the plugin, while benefitting from its feature to translate the tokens to native Figma styles and such.
At the same time, a small number of developers worked on a similar concept to substantiate that a React component library could form the basis for other frontend frameworks used throughout PostNL's online ecosystem. Both initiatives ultimately came together in Stamp, PostNL's accessible and centralised design system. Next to myself and said developers, an accessibility expert and product owner formed a dedicated team that helped to grow Stamp to become a single source of truth.
My main responsibilities as part of Stamp's team were:
Making design tokens the understructure for the above-mentioned libraries and its own codebase.
Add support for theming —light and dark mode— through design tokens.
Performing (visual) design checks on components in React and several other frameworks to ensure parity between Figma and implementation.
Writing and maintaining documentation about components, patterns and more on zeroheight.
Embracing new branding
In my final months as a contributor to Stamp, our team worked hard to embrace PostNL's refreshed corporate branding in the design system. The preconditions were good, since we already had tokenised design and code. We could heavily rely on the system we had up until that point, and make iterations on tokens for new design decisions.
Figma had already introduced its Variables feature (in beta) and I advocated to use variables in new design libraries that were created in the process of rebranding. In my opinion, there was no real disadvantage to being an early adopter. On the other hand, this feature could result in a stronger connection between design and code. I setup the new Foundation library by converting Stamp's design tokens to Figma variables for things such as color, spacing, and sizing. Because our tokens already consisted of a semantic color palette for different themes, variables now enabled us to seamlessly switch between light and dark mode within Figma as well.
All in all, I am most proud that all this work resulted in a higher adoption of Stamp within PostNL as an organisation.