| title | seoTitle | seoDescription | datePublished | cuid | slug | cover | tags |
|---|---|---|---|---|---|---|---|
On Design Tokens, Variables, and Penpot |
Design Tokens, Variables and Penpot |
Navigating design tokens, variables, and Penpot: Insights from transitioning between Figma and Penpot in Wikimedia's design system |
Mon Dec 30 2024 10:56:33 GMT+0000 (Coordinated Universal Time) |
cm5axchih000108l69gkd5prn |
on-design-tokens-variables-and-penpot |
design, figma, design-tokens, penpot, design-engineer, design-tools |
Working on Wikimedia’s Figma-based design system (Codex) means diving deep into Figma, Penpot, and all things product design. As a developer who has not spent enough time on the design side, I struggled with suddenly working with an entire design system and getting up to par with best design practices.
This is a reflection on the nuances and terms I learned thus far, and how I navigated overwhelm and anxiety as I got deeper into my project.
First is to acknowledge that everyone struggles. The pros started somewhere, and they are not equally competent in all areas. Seeking help and clarity is a sign of humility and an understanding of your constraints. There is no shame in needing help. The secret is to accept this and keep going.
To my surprise, it turned out that I did not understand what design tokens were, how they differed from Figma variables, and how semantic naming in design tied in. I spent some time reading on this, figuring out the differences, and researching how all this translated to Penpot.
I asked for help and tips in a public tweet and through it got to have an insightful discussion with Jonny Summers-Muir who does Product Design at Supabase. He also shared this resource which was a nice introduction to Figma-based design systems.
I frequented Penpot’s community forum and their docs whenever I was stuck and used the Figma YouTube channel.
Penpot’s variables and components do not map exactly with Figma, and Penpot does not yet support variants (in a similar way as Figma) and design tokens. This meant that the organization of Wikimedia’s design system also needed to be translated to Penpot in a way that made sense.
I had to take a step back and look at a component in Figma and pull out the different states and variants. Pick out the colors and relate them to their states. Then I had to organize this information in a way that would be simple to maintain going forward and that allowed for correction or rearrangement.
I used the existing naming of the Figma components to help guide this process.
Now, Penpot has a plugin that helps with migrating from Figma but that has its little nuances, for example, it does not pick out colors. This plugin is quite helpful and I used it to help streamline this process.
At some point, I could not access the icons, fonts, and typography. I played around and could not find them and had other questions, so I reached out to my mentor on the project and he promptly organized a meeting with another team member who cleared that up for me.
The whole thing was fast and straight to the point. And my mentor was available to offer assurance and guidance. From this, I felt confident to ask whenever I needed feedback or clarity.
Other than the technicalities, I felt another subtle resistance. This one lived in my mind. This design system is already complete, a work of beauty… what if I messed it up? What if I was moving too slowly to get to all the points I wanted during this contract period? It felt like I was standing at the feet of a mountain and wondering how on earth I was meant to get to the pinnacle in style and within schedule.
I employed my strategies for handling overwhelm, which is taking deep breaths and focusing on just the next step. I frequently reminded myself that it was NOT a life and death matter and to trust that the project mentor would alert me in case I needed to make adjustments. And that it was ok if somewhere along the journey I showed struggle.
Now that I’ve gotten into some routine and I’m comfortable translating between Figma and Penpot, I look forward to developing an understanding of accessibility in design and how that applies practically. I’m also looking forward to experimenting with the corresponding npm package and learning what the entire design-dev-opensource workflow looks like.
In case I sparked some curiosity in you, here are some resources about Penpot, Figma and Codex: