Variants & Tokens: Building Design Systems  ## Metadata - Author: [[Penpot]] - Full Title: Variants & Tokens: Building Design Systems - Category: #articles - Document Note: --- tags: [Design systems, Variants, Design tokens] author: [MISSING] source: [YouTube] reference: [https://www.youtube.com/watch?v=RrNDrzP4V6s] date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} --- # 🏷️ Title: Variants & Tokens: building design systems ## 🧰 Action Inbox - [H1] Draft migration checklist for variants — context/https://www.youtube.com/watch?v=RrNDrzP4V6s#t=16 #articleseed - [H3] Open RFC for interactions via variants — context/https://www.youtube.com/watch?v=RrNDrzP4V6s#t=96 #xref - [H4] Map Penpot tokens to CSS variables — context/https://www.youtube.com/watch?v=RrNDrzP4V6s#t=150 #articleseed - [H5] Verify W3C token alignment claims — context/https://www.smashingmagazine.com/2025/02/design-tokens-adoption-standardization/ #xref - [H6] Pilot composite typography tokens in a theme — context/https://www.youtube.com/watch?v=RrNDrzP4V6s#t=270 #articleseed - [H7] Add tokens to developer Inspect workflows — context/https://www.youtube.com/watch?v=RrNDrzP4V6s#t=312 #share - [H8] Explore Tokens Studio sync options — context/https://community.penpot.app/t/penpot-and-tokens-studio-how-they-collaborate/4129 #xref - [H2] Create example variant sets for buttons — context/https://www.youtube.com/watch?v=RrNDrzP4V6s#t=72 #articleseed - [H5] Track design tokens releases by cycle — context/https://blog.penpot.app/how-to-create-an-intuitive-design-token-system/ #addendum - [H1] Write migration case study for GoDaddy — context/https://joinpeertube.org/video-channels/penpot_video_channel #share ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - Penpot outlines variants and design tokens progress. - Variants drive migrations and daily use across teams. - Tokens aim for cross-tool portability and API access. - Composite tokens and sync with providers are upcoming. - The plan strengthens design-dev workflows and governance. ## 📖 Main Content - Variants group similar components across states. Teams request interactions within variants. The feature roadmap acknowledges this demand. [oai_citation:0‡Penpot Community](https://community.penpot.app/t/design-tokens-integration/3048?utm_source=chatgpt.com) - Penpot positions tokens as standardized, cross-disciplinary units. The team cites alignment with the W3C community effort. [oai_citation:1‡help.penpot.app](https://help.penpot.app/user-guide/components/?utm_source=chatgpt.com) - The W3C Design Tokens Community Group maintains the draft. It targets interoperable token formats across tools. - Penpot has public posts on tokens practice and cycles. These describe exports, imports, and design guidance. [oai_citation:2‡help.penpot.app](https://help.penpot.app/user-guide/components/?utm_source=chatgpt.com) - The project announced variants availability publicly. Official videos confirm shipping progress. [oai_citation:3‡Penpot Community](https://community.penpot.app/t/design-tokens-integration/3048?utm_source=chatgpt.com) - Tokens Studio collaboration appears in community updates. These describe synchronization and shared workflows. - MCP context helps LLMs act on design artifacts. Anthropic documents the protocol goals. [oai_citation:4‡Penpot Peertube](https://peertube.kaleidos.net/w/hv9f5VJEsvrK5qApySSKSs?utm_source=chatgpt.com) - Claims about “only tool” status require date scoping. Other tools may adopt standards later. [oai_citation:5‡help.penpot.app](https://help.penpot.app/user-guide/components/?utm_source=chatgpt.com) ### 🗒️ Notes #### ⏱️ [00:16](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=16) Variants adoption and migrations ### [H1] Variants adoption drives team migrations > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “we already have extremely uh positive feedback… teams that are migrating their design systems” Signals strong demand for variants. Capture case studies and metrics. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=16) #articleseed #share ID:rw_[MISSING] #### ⏱️ [01:12](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=72) Variants basics and states ### [H2] Variants manage component states and versions > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “You can group similar components… switch between your different versions, your different states” Document canonical variant patterns for WordPress UI. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=72) #xref ID:rw_[MISSING] #### ⏱️ [01:36](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=96) Interactions request ### [H3] Users request interactions through variants > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “why can't I build interactions through variants… we are working on it” Start an RFC for interaction states within variants. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=96) #articleseed ID:rw_[MISSING] #### ⏱️ [02:24](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=144) Tokens concept ### [H4] Tokens standardize styles across tools > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “building blocks… expressed in a way that can be shared across technologies” Plan token dictionaries for themes and blocks. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=150) #articleseed ID:rw_[MISSING] #### ⏱️ [03:39](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=219) Standards alignment ### [H5] Penpot emphasizes standard-aligned token support > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “PMPOT is the only design tool that natively support design tokens… that are the standard.” Qualify by date; track other tools’ adoption. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=219) #addendum #xref ID:rw_[MISSING] #### ⏱️ [04:30](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=270) Composite tokens ### [H6] Composite tokens reduce property sprawl > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “Composite token is… a token that can hold many properties more than one.” Prototype composite typography and shadows in a theme repo. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=270) #articleseed ID:rw_[MISSING] #### ⏱️ [05:22](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=322) UX and Inspect ### [H7] Tokens surface across UI and Inspect tab > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “adding tokens to the inspect tab… retrieved by the developers alongside… code.” Update developer docs with token retrieval steps. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=322) #share #xref ID:rw_[MISSING] #### ⏱️ [06:13](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=373) API and sync ### [H8] API and sync integrate external providers > [!quote] [Variants & Tokens: building design systems](https://www.youtube.com/watch?v=RrNDrzP4V6s) > “add the tokens to the API… synchronize different providers and different repositories” Evaluate Tokens Studio sync for enterprise teams. [view highlight](https://www.youtube.com/watch?v=RrNDrzP4V6s&t=373) #xref ID:rw_[MISSING] ## 📚 References - [W3C Design Tokens Community Group](https://www.w3.org/community/design-tokens/) - [How To - Summary: Andrés González, Product Owner at Penpot, shared how native Design Tokens and Variants are already making a tangible impact for teams working with complex Design Systems. He also outlined what upcoming releases will bring, including prototyping interactions with variants, composite Tokens, and token synchronization. Penpot Fest 2025 | Better, together: Refining the designer-developer workflow. -- Penpot is the free open-source design tool for Design & Code collaboration. https://design.penpot.app​​ Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more. Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect. Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster. Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available. Penpot Community: https://community.penpot.app App: https://design.penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *Bluesky: https://bsky.app/profile/penpot.app *X: https://x.com/penpotapp *LinkedIn: https://www.linkedin.com/company/penpotdesign *Instagram: https://www.instagram.com/penpot.app/ *Github: https://github.com/penpot Penpot: Design as code. - URL: https://www.youtube.com/watch?v=RrNDrzP4V6s Hi, I'm Andy, Head of Product at Penpot, Darmoth, or Mosaic. I'm going to very briefly talk, I promise, about variants and tokens, our plans for that. Only two weeks ago, we released PenPot variants. Since then, we already have extremely positive feedback, but like tons of positive feedback. We also know already about teams that are migrating, their design systems from other tools to PenPot because they were waiting for this very specific feature. And we also have data that shows that variants are already being used in a daily basis by a great percentage of our users. Alvaro, by the way, you might need to update your graph. We have new data in town. Okay, variants, I guess most of you know how they work. You can similar components and manage them so you can switch between your different versions, your different states, like for the button, things like that. So they have become something essential for today's design systems. And we also have one request from one user about one specific thing. Okay, why can't I build interactions through variants, using variants? It wasn't long. We got like thousands of these already. We are drowning from requests for this. We know it. We get it. And we are actually building it. We are working on it. So you will get it soon. I hope for it. By the way, we are really grateful for feedback like this. This kind of feedback from people like this and the other thousands help us a lot to prioritise, to understand what are the current user needs. So thank you for everyone who is contributing to the project with feedback like this. And yeah, we are working on prototyping through variants, but we have more plans to improve the feature, like offering predefined states, like the ones that you can actually find in websites and applications typically, so you don't have to design all of them to use the variants. And we also are exploring things. Some of them are connections, direct connections between design tokens and variants. This is actually a discussion that we have internally because we have people that really don't think that is a good idea and other people that think that this is part of the process. And we have more plans, more features, like waste disposal, the properties of the variants from the parent components to the nested ones. So a lot of plans. Like Pablo mentioned before, we released the design tokens on April. It was a great milestone for us. Design tokens are basically the building blocks of your science, and the cool thing is that they can be expressed in a way that can be shared across technologies, across tools, and across disciplines. This is very important. When I talk about building blocks, I'm talking about things like typography, spacing, colors. We know that many people that use tokens only use colors, and that's fine. We don't judge, but you have many more options. Pablo mentioned before also that right now, Penpot is the only design tool that natively supports design tokens that are the standard. And at some point on the Domebo Fest, we will have some sort of announcement from Keiler, the leader of the design tokens community group, which is sort of important for us. But yeah, I don't know when. You will see. And the thing is that we already hit five consecutive releases with improvements and new features for design tokens. As Clara mentioned, we have this six-week cycle, so this is something important. We added a lot of new tokens. We doubled the number of tokens, in fact. And we also added new ways to export import tokens, but we have more in the oven. Right now, Composite Token is one of our main priorities. Composite Token is basically a token that can hold many properties, more than one. Imagine that you could handle all your typography tokens, all your typography properties in only one token. We intend to release this, the typography token, in a matter of weeks, fingers crossed. And the next one will be the shadow token. We are also massively improving the user experience for tokens. We believe that tokens should be wherever they are needed, and this means that these tokens should be in many contexts. This is not a promotional piece. This is not in policy. This is just a video that a friend of mine told us. Hi, folks. Look what I got already. Look what we got already. She's playing with tokens at the color picker and at the design sidebar, and we are also adding tokens to the inspect tab. So these tokens are going to be able to be retrieved by the developers alongside the rest of the code. But last and not least, we are also working on synchronization of properly synchronized tokens. So we are about to add the tokens to the API so people are going to be able to use them on their plugins, but this is just the tip of the iceberg. We are also building a system that will allow to synchronize different providers and different repositories to your The thing is that we are not doing this alone. We are not doing this alone. We are doing this with super nice people from Token Studio, and they have helped us to make this a reality, and representing them, representing the nice people from Token Studio, we have here the one and only Mike that is going to come to the stage. So yeah. An applause to him., Variants & Tokens: Building Design Systems, Penpot, 01k88j4s6q89cbjaqq2twf1xtv.