<aside> 💡 For the best experience, view this on a desktop device due to detailed case.
</aside>
Components snapshots from the Figma library
The challenge
Result:
This case study focuses on the later stages of the Pollen Design System project but does not include the foundation. Weeks of discovering, creating concepts and shaping the design system team in the first phases.
I was responsible for creating and maintain the design system in Figma, for the design team. And ensure parity with Storybook.
Result
Feedback:
"I have never worked with designs that are so thought-through from a development perspective. Having the entire scope and grid laid out in front of me, I can stop over-engineering when I am developing. I am blown away by the level of details and am really happy about the design system."
— Front end developer from Templafy
Documentation
Learnings
Start creating a unified design system to improve consistency and collaboration. Develop a solid foundation in Figma that engineers can easily replicate and use. Aim to reduce UI bugs by ensuring the design system eliminates common issues before they become tickets.
When I joined the team, they were transitioning design files to Figma. After experimenting with Sketch and other tools, design management decided on Figma around the same time I started in 2020.
With my prior experience from Sitecore, I helped establish what would become a design system structure using Figma for Templafy. They wanted a central design hub for the organization, including product managers and developers to be able to check it. This is how I ended up structuring. The structure included UI components but also guidelines about how to design for responsive or how to work with Storybook and Figma.
Design tokens
In the initial phase, I developed multiple tailored structures and pitched them to the design and engineering teams. Ultimately, we decided the best approach was to align the structure and naming conventions in Figma with Storybook, which the front-end team was already using.
As the project progressed, I fully joined the front-end team as the sole designer, ensuring consistency between Storybook and Figma while maintaining both systems in sync.
Templafy lacked design tokens or a proper design foundation. As I started building the design system from scratch, I analysed older design source files to identify these tokens. Over time, they evolved into the Foundation file in Figma, covering the basic essentials of an every day design system. The real challenge was then how should we name this design tokens that I found through old code files or older design files.
Learnings:
Firstly, I need to ensure that the hex codes I found are part of the style guide set up by the brand. Then I had to make sure they meet the contrast rule of 3:1 for a web app. I had to cut some hex codes that I did not find fit and ask to be replaced with some other hex codes that were more common. As I was approaching this clean-up I went to front end team to help me set naming convention and start structuring in a foundational file in code and Figma.
Secondly, it is important to establish a process for maintaining and updating the style guide(brand department) and design tokens (me, design system guy). Design systems are dynamic and continuously evolving, same as the style guide of a brand, and so I needed to find a mechanism in place to ensure that updates and changes are communicated effectively and that the style guide remains up-to-date. I learned that Brand department and Product Design department have to work hand in hand to not create inconsistency.
Color documentation and accessibility on Storybook
Color documentation and accessibility on Storybook