Scalable UI design tokens, components & variants Penpot Hands-On Demo

Scalable UI design: tokens, components & variants | Penpot Hands-On Demo 🔗 **Source:** [Scalable UI design: tokens, components & variants | Penpot Hands-On Demo](https://www.youtube.com/watch?v=aeqcJHnsj_o) > [!note]+ Document Notes > tags: [penpot, ui-design, design-system] > author: Laura > source: Penpot > reference: https://www.youtube.com/watch?v=aeqcJHnsj_o > date created: 2025-01-27 22:00 > > # 🏷️ Title: Scalable UI design: tokens, components & variants | Penpot Hands-On Demo >  ## 🧰 Action Inbox - [H1] Create reusable navigation component with flex layout — prototyping template update #component - [H2] Implement design token system for consistent spacing and colors — typography and button tokens #design-tokens - [H3] Set up light/dark mode themes using token sets — theme switching demo #themes ## 🧭 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 - [Penpot Libraries & Templates](https://penpot.app/templates) - [Penpot Community](https://community.penpot.app) ## 📝 Summary - Laura demonstrates updating Penpot's prototyping template with modern design system practices - Covers creating reusable components, component variants, and comprehensive design token systems - Shows implementation of light/dark mode themes using design token sets - Target audience is UI designers learning scalable design practices in Penpot - Bottom line: Design systems in Penpot enable consistent, maintainable UI through components and tokens ## 📖 Main Content This hands-on demo focuses on modernizing UI design workflows in Penpot through systematic design patterns. Components serve as reusable design elements that can be updated once and applied everywhere, while variants provide predefined options for different component states. Design tokens represent the smallest design decisions (colors, spacing, typography) that can be referenced across components and easily maintained. The demonstration culminates in theme implementation, showing how token sets can switch between light and dark modes programmatically. Penpot's adherence to design token standards ensures compatibility with development workflows and other design tools. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/aeqcJHnsj_o?t=0) — [H1] Introduction and session overview - Key idea: Live demo updating prototyping template with modern design system features - Evidence: "Today, we're going to be updating the prototyping template... adding components, adding component variants, adding design tokens" #### ⏱️ [03:15](https://youtu.be/aeqcJHnsj_o?t=195) — [H2] Why create components - Key idea: Components are reusable design patterns that save time and ensure consistency - Evidence: "Components are valuable because they're essentially reusable design patterns... save us a huge amount of time particularly if we want to update all of the uses" #### ⏱️ [05:30](https://youtu.be/aeqcJHnsj_o?t=330) — [H2] Identifying component candidates - Key idea: Look for repeating design elements like navigation headers, product cards, and links - Evidence: "Good candidates for components in this design... navigation links... product posters... even the link itself could be a component" #### ⏱️ [08:45](https://youtu.be/aeqcJHnsj_o?t=525) — [H2] Creating navigation components with flex layout - Key idea: Modern components use flex layouts for responsive behavior instead of static groups - Evidence: "I want them to always flow side by side with an equal amount of space in between them. And for that I can use flex layout" #### ⏱️ [15:20](https://youtu.be/aeqcJHnsj_o?t=920) — [H2] Component variants for different states - Key idea: Variants provide predefined options for the same component type - Evidence: "Variants are basically predefined options for your component... active and default, these are different types of the same component" #### ⏱️ [18:30](https://youtu.be/aeqcJHnsj_o?t=1110) — [H2] Combining components as variants - Key idea: Existing components can be combined into variant sets for easier management - Evidence: "If I've already created components for each of these link states, I can select those main components and I can choose to combine them as variants" #### ⏱️ [25:40](https://youtu.be/aeqcJHnsj_o?t=1540) — [H1] Introduction to design tokens - Key idea: Design tokens are standardized, reusable design values that work across platforms - Evidence: "Design tokens are a relatively new feature... there is a design tokens standard and Penpot follows that which means that you can import your design tokens" #### ⏱️ [30:15](https://youtu.be/aeqcJHnsj_o?t=1815) — [H2] Creating semantic token names - Key idea: Use meaningful, descriptive names for tokens rather than literal color names - Evidence: "What is helpful is to give your tokens meaningful names. Semantic is a word we often use... button.background rather than just blue" #### ⏱️ [35:50](https://youtu.be/aeqcJHnsj_o?t=2150) — [H2] Token naming conventions and standards - Key idea: No single standard exists, but consistency and team agreement matter most - Evidence: "There are a few sort of standards emerging, but really it's down to what suits you and your team the best" #### ⏱️ [42:30](https://youtu.be/aeqcJHnsj_o?t=2550) — [H1] Typography tokens as composite tokens - Key idea: Typography tokens store multiple text properties in one reusable token - Evidence: "Typography tokens... are a very specific special new type of token... a composite token... doesn't just have one value. It has all these different values" #### ⏱️ [48:20](https://youtu.be/aeqcJHnsj_o?t=2900) — [H2] Token referencing system - Key idea: Tokens can reference other tokens, creating maintainable design systems - Evidence: "I could reference the token that I've previously created... using curly brackets... if I then want to update that font family across the entirety of my design, I only have to update family.sans" #### ⏱️ [52:45](https://youtu.be/aeqcJHnsj_o?t=3165) — [H1] Design token themes for light/dark mode - Key idea: Themes enable switching between different token sets for mode variations - Evidence: "You can do that for your light mode and dark mode inside of Penpot as well... enable and disable different sets" #### ⏱️ [58:30](https://youtu.be/aeqcJHnsj_o?t=3510) — [H2] Creating theme-based token sets - Key idea: Organize tokens into sets that can be toggled for different design themes - Evidence: "I'm going to create another set... light... enable and disable a light set and a dark set" #### ⏱️ [62:15](https://youtu.be/aeqcJHnsj_o?t=3735) — [H2] Demonstrating live theme switching - Key idea: Completed theme system allows instant switching between light and dark modes - Evidence: "Now I've created those themes... gives me the option to choose between light... and dark mode. Yes. So now we can switch between light mode and dark mode" ## 📚 References - [Penpot Design Platform](https://penpot.app) - [Penpot Community](https://community.penpot.app) - [Design Tokens Standard](https://design-tokens.github.io/community-group/) - [Penpot UI Design Course](https://penpot.app/courses) ## 🗣️ Paraphrase - Components in Penpot are reusable design elements that can be updated once and applied everywhere, similar to symbols in other design tools but with better flexibility through variants - Design tokens represent the atomic design decisions like colors, spacing, and typography that can be systematically managed and referenced throughout a design system - Themes in Penpot allow designers to create multiple versions of their designs by toggling different token sets, enabling features like light/dark mode switching ## 📰 Newsletter **Level Up Your Design Systems with Penpot's Latest Features** Penpot's design system capabilities have matured significantly, offering component variants and design tokens that rival premium tools. Laura's latest hands-on demo showcases how to build scalable UI designs using these features effectively. Key takeaways: Start with components for reusable elements, add variants for different states, and implement design tokens for consistent values across your system. The new typography tokens are particularly powerful as composite tokens that store multiple text properties. The theme system enables impressive light/dark mode switching by organizing tokens into sets. This approach creates maintainable designs that can adapt to different contexts without rebuilding components. Resources: [Penpot Community](https://community.penpot.app), [UI Design Course](https://penpot.app/courses), [Templates Library](https://penpot.app/templates) ## ✅ Action Items #### DevRel - Developer advocacy: Create tutorials bridging Penpot tokens to development workflows - Education: Develop workshops on design system implementation in Penpot - Developer experience: Document token export/import processes for dev handoff - Developer marketing: Showcase Penpot's standards-compliant token system - Community management: Curate design system examples in community forums #### OSPO - Policy & Governance: Establish design token naming conventions for open source projects - License Compliance: Ensure design asset licensing clarity in shared libraries - Software Inventory: Track design system components in project SBOMs - Developer Support: Provide guidance on design token integration patterns - Community Engagement: Support design system contributions to open source projects - Strategic Alignment: Measure design system adoption across portfolio #### Community - Maintainers: Provide component library templates for project branding - Contributors: Create onboarding kits using consistent design language - Sponsors: Develop branded theme variations for sponsor recognition - Ecosystem: Coordinate design standards across related projects #### WordPress - Core: Implement consistent spacing tokens in Gutenberg components - Core Performance: Establish design token budgets for component variations - Core AI: Design consistent UI patterns for AI feature integration - Mobile: Sync design tokens between web and mobile app interfaces - Playground: Create educational design system examples for workshops - Community: Develop branded templates for WordCamp materials - Training: Build design system curriculum for WordPress designers - Marketing: Establish brand token system for campaign consistency - Design: Implement Figma-to-Penpot design system migration guides - Documentation: Create design system guidelines for theme developers - Accessibility: Establish color contrast tokens meeting WCAG standards - Meta: Implement design token system across wordpress.org properties ## 🧪 Hypotheses - Component-based design systems reduce development handoff friction by providing consistent, documented patterns - Design tokens create more maintainable designs than hard-coded values, especially for multi-theme applications - Semantic token naming improves design system adoption compared to descriptive naming - Theme-based token organization enables faster design iteration than component-level overrides ### 📊 Methodology - Measure design-to-development handoff time before and after token implementation - Compare maintenance effort between token-based and traditional design approaches - Survey designer productivity with semantic vs descriptive token naming - Track theme switching implementation time across different design tools ### ❓ Questions - How does Penpot's token system compare to Figma's variables for complex design systems? - What's the optimal token granularity for balancing flexibility and maintenance overhead? - How can design token validation prevent inconsistent component implementations? ### 🔮 Future Research - Integration patterns between Penpot tokens and popular development frameworks - Automated testing approaches for design token consistency across platforms - Multi-brand design system management using token inheritance patterns ### 💡 Implications - Practice: Design systems require upfront investment but reduce long-term maintenance - Policy: Token naming conventions need team agreement before implementation begins - Education: Designers need training on systematic thinking beyond individual components - Funding: Design system tooling costs should factor in cross-platform compatibility ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade (accessible technical content with clear examples) #### 👀 Visual learners - Present: Extensive screen recordings showing token creation and component building - Improve: Static diagrams showing token hierarchy and component relationships #### 🔊 Aural learners - Present: Full narrated walkthrough with step-by-step explanations - Improve: Audio-only summary of key concepts for review #### 🗣️ Verbal learners - Present: Clear definitions of technical terms, analogies for component concepts - Improve: Glossary of design system terminology with examples #### 🧩 Kinesthetic learners - Present: Hands-on demo format encouraging follow-along practice - Improve: Downloadable practice files with guided exercises #### 🧠 Logical learners - Present: Systematic progression from simple components to complex themes - Improve: Decision trees for when to create tokens vs components vs variants #### 🧑‍🤝‍🧑 Social learners - Present: Community file sharing and live Q&A interaction - Improve: Peer review templates for design system critique #### 🧘‍♀️ Solitary learners - Present: Self-paced video format with pause-friendly segments - Improve: Self-assessment checklist for design system implementation #### 🌿 Naturalistic learners - Present: Organic progression from identifying patterns to systematizing them - Improve: Real-world project examples showing system evolution ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure in video content, descriptive file names - Improve: Transcript with proper heading markup, alt text for visual examples #### Keyboard navigation - Present: Keyboard shortcuts demonstrated throughout interface - Improve: Complete keyboard-only workflow documentation #### Contrast and readability - Present: High contrast examples in dark/light mode demonstration - Improve: Specific contrast ratio callouts for token values #### Text resizing and reflow - Present: Responsive design principles shown in flex layout examples - Improve: Token-based text scaling demonstrations #### Media and captions - Present: Full transcript available, clear narration - Improve: Captions with speaker identification and sound descriptions #### Forms and interactions - Present: Clear interaction feedback in component demonstrations - Improve: Accessible component examples in template library ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global design system thinking, platform-agnostic approaches - Improve: Examples from diverse design traditions and cultural contexts #### Inclusive language - Present: Gender-neutral technical terms, defined jargon consistently - Improve: Plain language summaries for complex technical concepts #### Neurodiversity support - Present: Clear structure with consistent pacing and organized content - Improve: Content warnings for flashing animations, processing time allowances #### Representation - Present: Single presenter format limits representation visibility - Improve: Guest experts from diverse backgrounds, varied use case examples #### Psychological safety - Present: Encouraging tone, acknowledgment of learning curve challenges - Improve: Explicit celebration of different approaches and skill levels ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear progression from design system principles to specific implementation - Inductive strength: Examples generalize well to broader design system practices - Causal reasoning: Demonstrates how token changes propagate through design systems - Analogical strength: Component-to-code analogies help explain systematic thinking #### Fallacies - Appeal to novelty: Slight emphasis on "latest features" without comparing to alternatives - False dilemma: Could better acknowledge valid approaches beyond token-based systems #### Tone of voice - Overall tone: Encouraging and educational with appropriate technical depth, self- --- ## Full Transcript [01:17] [music] [01:23] [music] [01:30] [music] [01:36] [music] [01:42] [music] [01:47] Heat. Hey, Heat. [music] [01:55] Hello my friends and welcome to our 14th [01:59] hands on demo. This is a session where I [02:02] show you how to design in pimpot live [02:04] and that means you can ask questions [02:06] live and uh you can say hello as well uh [02:09] just so I know that I'm not here by [02:11] myself. I can say hi Pablo. I can [02:13] already see that you're here and I don't [02:15] know let me know who you are and where [02:17] you are. I'm Laura and I'm in Ireland. [02:21] Um, I'm not Irish. Um, some people might [02:24] have guessed that. So, Pempot is the [02:27] webbased opensource design platform in [02:31] case you didn't know already. And if you [02:33] want to keep up with these hands-on [02:35] sessions in the future, you can [02:37] subscribe to whatever platform you are [02:39] currently watching this on and you will [02:41] be the first to find out about these [02:43] demos. And of course, you can also give [02:45] me a nice little reaction if you find [02:47] these videos useful. Or you can leave a [02:50] comment if you have any feedback about [02:51] what you want me to demo in the future. [02:54] Today, we're going to be updating the [02:57] prototyping template. So I am just in [03:01] penmp in my dashboard here and um let me [03:06] show you if you want to get hold of the [03:09] template yourself as it currently is in [03:11] its current state you can go to penmpot [03:14] libraries and templates if you haven't [03:16] been there before it's full of loads of [03:19] really valuable templates and libraries [03:21] that you can use for free with pimpot [03:23] and this is the prototype examples [03:25] template here uh so it was last updated [03:27] in August 2024 before and this was the [03:30] first ever template I made for PenPot. [03:33] So, there's a lot to be updated. Now, we [03:36] won't be focusing on the prototyping [03:38] aspect of the template today. There's [03:41] already a hands-on demo for that. That [03:43] was maybe about a year ago. Um, we're [03:46] just going to review the template and [03:47] look at areas we will be improving. So, [03:51] that includes adding components, adding [03:54] component variants, adding design [03:56] tokens. So, are we ready to jump in? [04:00] Let's start on creating components. [04:06] [music] [04:13] So, this is just the how-to page for the [04:14] template. So, that's not particularly [04:16] relevant right now. So, I'm going to [04:18] jump to this little navigation example. [04:22] So, this is an example of how you can [04:24] prototype navigation in penot. So, these [04:27] are little links and you can click them [04:29] when you're in view mode and navigate [04:32] between these different views. But we're [04:35] going to look at the designs themselves. [04:37] So, first of all, why do we even want to [04:40] make components? So, components are [04:42] valuable because they're essentially [04:44] reusable design patterns. We want to be [04:48] able to take a bit of our design and [04:50] save it so we can use it again in the [04:52] future. And that can save us a huge [04:55] amount of time particularly if we want [04:56] to update all of the uses of that [04:58] component across our design and we just [05:01] need to update it once. So let's have a [05:03] look at it. What are good candidates for [05:06] components in this design? Now [05:09] components can contain other components. [05:11] It's worth bearing that in mind. So for [05:13] example here we have a lot of these [05:15] little posters or these little product [05:18] if you include the text and the little [05:20] price information. So that could be a [05:22] component. Uh the top of each page we [05:25] have a heading header and we have [05:28] navigation. The header contains a logo. [05:30] We have a couple of navigation links. I [05:32] think that's a prime candidate for a [05:35] component. I mean even the link itself [05:38] could be a component. So let's uh first [05:41] of all let's make one for our heading. [05:43] Header. I keep confusing heading and [05:45] header. I know the difference. Heading [05:48] is the title text. A header is the thing [05:50] at the top of the page. Um, I'm I'm not [05:54] just trying to convince myself. So, we [05:56] have our navigation here. [05:58] It's usually common practice to put your [06:01] components on a different page because [06:03] it just makes it everything a bit neater [06:05] and tidier, but I might just make it on [06:07] this current page just for ease of use [06:09] right now. So, I want to create a [06:11] navigation component. I have all the [06:13] things I need in my component here. So, [06:16] I'm just going to copy that and paste it [06:19] over here. [06:21] And this is going to be a component. But [06:23] maybe I might make the link. I'm [06:25] thinking ahead and I'm thinking this [06:28] link here, it has two different options [06:30] for it. It has like a highlighted option [06:32] and a standard option for it. And so [06:35] maybe I want to have um a component for [06:38] doing that as well. So I'm going to grab [06:42] this link. [06:45] You can see that I didn't really use [06:47] layouts huge amount in here either. [06:53] So, here we go. We've got a shop all [06:56] link and we have a trending link. And [06:58] this is uh the [07:02] default link. [07:04] I can't type. So, I'm just going to put [07:06] this default text in there because our [07:08] component we can edit the text in the [07:10] component later on. So this is an active [07:14] link. We probably want to center align [07:16] that. [07:18] And to create components out of these, I [07:21] can rightclick them and choose to create [07:23] a component or I can use this keyboard [07:26] shortcut. So I'll just use keyboard [07:28] shortcut. [07:29] And you see this has created a link a [07:32] component that is you can tell it's the [07:34] main component. It's got this little [07:35] double diamond. It's called trending [07:38] because that was the name of the folder. [07:39] So, I'm going to rename that active [07:42] and I'm going to create another [07:45] component using command K. And this one [07:48] is default. [07:51] And because uh I'm going to look a bit [07:54] later at potentially making those into [07:55] variants, but I will go into that bit a [07:58] little later on. So, now we have two [08:01] components. [08:02] We want to put them inside of our [08:04] navigation. So, our navigation is made [08:07] up. It has a logo in it and it has these [08:10] two this group of links. [08:13] And right now it has just trending and [08:16] shoppable. If I delete those, [08:19] I'm not going to delete them because I [08:20] deleted the folder. And I'm going to [08:24] grab these components. So when I've [08:26] created a component, it becomes [08:28] available in my local library which is [08:31] accessible under assets. Uh for some [08:33] reason the thumbnails aren't loading. [08:35] That's gremlins in my internet, I think. [08:37] So, I'm just going to drag these [08:39] components out. At least I can see what [08:42] they are when I hover over or I can [08:44] switch to the view where I can just see [08:45] their text. And I'm going to [08:50] go back to layers and pop these [08:53] instances. These are the components in [08:56] use. So, not your main component. A copy [08:58] of your component is just a single [09:01] diamond. And I'm going to drag that into [09:04] this links folder. [09:06] And I'm going to [09:10] delete those original links. [09:12] And I know I didn't mention, but why not [09:15] show you flex layout because we want to [09:17] make this laid out a bit better. At the [09:19] moment, this is just a group of links, [09:21] so they're connected together, so I can [09:22] move them around together. But I want [09:25] the them to always flow side by side [09:28] with an equal amount of space in between [09:30] them. And for that I can use flex [09:32] layout. So I'm going to jump to layout [09:35] here. Add layout. Add flex layout. So [09:37] that has converted this group into a [09:39] flex layout. And right now it is flowing [09:43] from right to left. I want it to flow [09:45] from left to right. I want them to be [09:47] vertically centered. Um it's okay if [09:49] they're left aligned. I'll maybe put 10 [09:53] between each item. So you see it will [09:55] always put that in between there. I want [09:57] the group to fit around its contents. [10:00] both at the height and the width. This [10:02] navigation um already has a flex layout [10:06] on it as well. It's even set to wrap so [10:09] that if it gets very narrow, the [10:11] contents will drop onto another line. [10:14] So there we go. We have navigation that [10:17] contains these default and active links. [10:21] And I'm going to create a component out [10:23] of that as well. And so now I can drag [10:28] my navigation component out and I can [10:31] replace [10:33] it there with this one here. And then if [10:36] I want to update the text, [10:39] I'm just using if you see I'm suddenly [10:42] clicking and I'm managing to click the [10:44] exact text that I want to change. That's [10:46] because I'm holding down the command uh [10:49] modifier key. That's a really handy [10:52] keyboard shortcut if you want to get [10:53] through all these layers. And so this [10:55] would be [10:57] trending [10:59] and this would be shop [11:03] full. And so that is how we create our [11:07] components. If I then wanted to use [11:10] these components across other designs [11:13] that I'm building, I could go into my [11:15] assets and if I go to manage library, I [11:18] can publish my file library as a library [11:21] that is usable across the entirety of my [11:24] team in pimpot. And likewise, if there [11:27] were libraries shared by my team, they [11:30] would appear here and I could connect [11:32] these to the current file and they would [11:35] appear. So we've got a local library [11:37] here and then there would be other [11:38] library name other library name [11:40] appearing below and that's how you can [11:42] create a wider design system where you [11:44] don't have everything inside of one [11:47] file. [11:48] So [11:51] let's test out this live aspect then as [11:53] I'm currently just been talking to [11:54] myself. Do we have any questions so far [11:57] about components [12:00] or designing anything in pampot? [12:03] Okay. And so that's a reminder that if [12:05] you do have any questions, whatever [12:08] platform you are on, although preferably [12:10] it be I think YouTube or peer tube or [12:14] LinkedIn um you can ask questions and I [12:18] will try to respond to them here live. [12:21] Um if I don't manage to respond to them [12:23] live, I will come back to you later on [12:25] afterwards. I I'll make sure I try to [12:27] answer all of the questions. So let's [12:30] move on to component variance. We want [12:34] to look at those next [12:37] so that we can look at this. [12:41] [music] [12:48] So variants are def basically predefined [12:52] options for your component. So, for [12:56] example, we said before active and [12:58] default, these are different types of [13:00] the same component. So, having two [13:02] different components for this isn't [13:04] particularly useful. Um, it's very easy [13:06] if I've already created components for [13:08] each of these link states. I can select [13:11] those main components and I can choose [13:14] to combine them as variants. And what [13:17] this does is creates a new component out [13:20] of these two previous components. and it [13:22] has decided that each of these are [13:25] variants of that component. [13:27] So if I look in the layers panel, my [13:30] component is just called component. So [13:32] I'm going to call this navigation link. [13:37] And this sort of little diamond made of [13:41] diamonds or diamond made of dots icon [13:43] signifies each variant. And you can see [13:47] that the previous name of the component [13:49] is used as the value for the variant. So [13:53] if I've got a drop down between active [13:54] and default and I'm going to say that [13:57] this is state. So the property is state [14:01] and the options for state are default or [14:04] active. And you can have as many [14:07] variants as you like. Although you have [14:10] to bear in mind that [14:12] you want to also be able to handle [14:13] combinations of variants. maybe some [14:15] variance. Um, so maybe I had a different [14:19] color for my little um highlight here. [14:22] Maybe if I had a red variant and a blue [14:27] variant as well as an active variant and [14:30] a default variant, I would have to make [14:32] sure I designed for each possible [14:34] scenario there. [14:36] So that is with the variants. And so [14:41] maybe I'll show you some different [14:42] variants as well. Oh, I'll show you [14:44] variance in use, by the way. So, if we [14:47] go back to our previous navigation [14:49] component, we've got our navigation [14:51] links here. And you see when I've got my [14:55] navigation link component selected. [14:58] Notice that it automatically updated, [15:01] I can choose between the default and [15:03] active state from the drop-own menu. So, [15:05] that's really handy if you're trying to [15:07] build systems when you're working with [15:09] other people as well and you want to [15:11] show them the different options that are [15:12] available to them. Let's have a look at, [15:16] I don't know, maybe this poster here. [15:20] This is another design that is [15:22] absolutely ripe for a flex layout. So, [15:24] let's give that a go. [15:26] So, we have a poster and it's currently [15:28] uh a frame, a little image of some [15:31] flowers, a mount. Um, that's some [15:34] picture terminology for you there, and [15:38] they're all grouped together in this [15:40] poster. So, what I'm going to do is I'm [15:43] going to quickly recreate this as flex [15:46] layout. So you notice if I change that [15:48] into a flex layout, it treats each of [15:50] its component parts as individual items [15:54] because they're being arranged as their [15:56] own inside of their flex layout [15:58] themselves. Um, so we don't want that. [16:00] But if you look at the the different [16:02] aspects of this design, so we have a [16:06] border here with a dark blue grayish [16:09] blue background. We have a mount which [16:11] is also a grayish blue background. And [16:13] we have an image. So I can actually [16:17] recreate this effect. [16:20] I'm going to drag these out of my flex [16:23] layout. So I don't need those anymore. [16:26] Now my poster is always going to be the [16:28] same size. So it's currently 131x 181. [16:32] And that's a peculiar choice. I'm [16:34] actually going to make it 130 by 180 [16:38] because I like a round number. [16:41] And so first I want to recreate the [16:45] shadow and the stroke and the fill on [16:48] this. I can copy those properties [16:52] and paste them onto my image. Oh, it's [16:55] got rid of my image. I didn't think that [16:57] through, did I? [laughter] Okay. So, I'm [16:59] going to just recreate [17:02] this very quickly then. [17:05] So, I'm recreating the stroke color. [17:10] It's got a nice little shadow on it. [17:14] It's me, so we'll [17:17] have quite an even looking shadow on it. [17:19] I think I'm quite particular about that. [17:22] And uh I want to create the mount [17:25] effect. I can do that with a second [17:26] stroke on the inside. And the color of [17:30] that was blue. [17:33] And if I make it nice and thick, it will [17:36] overlap. And then I drag that so that it [17:40] appears below the the brown one. [17:46] Let's [17:48] drag. Come on, Laura. You learn how to [17:50] use a mouse properly. [17:58] Drag it. Come on. [18:01] Think I might maybe have just found [18:04] myself a bug. [18:09] Yep, dragging is not working. But that [18:11] would be how I would create that stroke. [18:14] And then I could create a component out [18:18] of the poster. And then if I wanted to [18:22] do a different version of it, different [18:25] variant for it, it's another way I can [18:28] create a variant. Um, I'll copy the [18:32] component, detach that component. So [18:35] right now if I make any updates to this [18:37] it will change this and I don't want [18:39] that to happen. So I can detach the [18:41] instance [18:43] and then I want to change the flowers [18:45] image inside of that to a different [18:48] image. Use the buses. [18:53] So I'm going to paste that in. Get rid [18:56] of the flowers. [19:00] And again I would want to copy all of [19:02] those styles over. I won't do that right [19:04] now. [19:08] Or did I I copied it into the wrong one? [19:11] I confused myself because [19:15] that is to the right. [19:21] I've confused myself again. Okay. [19:23] [laughter] She's easily confused today. [19:25] That's That's what's going on. Okay. So, [19:27] post that in. There we go. Get rid of [19:30] the flowers. Okay. And then I'll create [19:33] a component out of that. So these are [19:35] now two different components. And then [19:37] if I combine them as variants [19:42] and so now I have um one component, two [19:46] variants. [19:48] And I can then [19:52] decide uh this would be picture maybe [19:54] because I'm saying what the picture is [19:56] or the image is probably a bit more [19:57] accurate. And this one would be called [20:00] buses. [20:01] bus and this one would be called flower. [20:06] And then if I wanted to use that poster [20:09] component, I would drag it out of my [20:11] library and I can choose between bus and [20:14] flower. [20:16] It doesn't look as pretty as the other [20:18] ones. Um, and maybe I could create [20:21] different variants for the different [20:22] mount colors and design aspects like [20:25] that. So anyway, that we go is variants. [20:28] A quick reminder that with any of the [20:31] files that I create in these hands-on [20:33] sessions, after the session, I download [20:36] it straight away and I go into the penot [20:38] community and I always have a post about [20:41] the hands-on demo and I upload the file. [20:44] So, if you want to mess around and see [20:46] how easily I broke things [laughter] [20:49] or try things out for yourself um or see [20:51] exactly how I did it in a bit more [20:53] detail, you can always go to the penot [20:55] community after the fact. [20:58] So, do we have any questions now? A [21:03] reminder that you can ask questions uh [21:07] in whatever platform that you're on and [21:09] I will do my best to get to them. I [21:12] switch the interface so I can read this. [21:14] Right. How does pimpot avoid circular [21:18] dependencies between components [21:22] shared across files? [21:26] Um [21:28] I don't know how but it does it is not [21:30] an issue that I've come up against [21:32] before. Um so [laughter] I don't know [21:34] maybe someone in the um in the comments [21:37] will be able to answer that a bit like a [21:40] bit better than I could but I have not [21:42] come across any issue with having [21:44] circular dependencies as yet. Um so you [21:47] can reference components from other [21:49] libraries as well. Does renaming a [21:52] library component break its connection [21:54] with instances in other documents? I [21:56] always feel so much pressure in naming [21:58] my components. I think this was [21:59] discussed before. Oh, I totally identify [22:02] with that. No, you can rename your [22:05] library components and it updates them [22:07] no problem and that's so there's no [22:10] commitment in that sense. It is slightly [22:13] different when it comes to design tokens [22:15] and so I would bear that in mind in the [22:18] future. variants usually um are handled [22:21] pretty cleverly as well. You can make a [22:24] lot of changes before um and before [22:28] pampot becomes confused about how [22:30] different it is. Um I guess it's kind of [22:33] philosophical question about how much is [22:35] a variant still a variant if you change [22:37] so much about it. Um but um yeah you can [22:41] generally do a huge amount and the [22:44] connection and its variantness or its [22:46] componentness will be uh saved. [22:51] Great. So [22:54] let me move on to the next section. Um I [22:57] just mentioned that design tokens were [22:59] slightly different. So let's take the [23:00] opportunity to jump into design tokens. [23:15] Now, design tokens are a relatively new [23:18] feature of PMPOT and one of the things [23:20] that's great about them is that they are [23:22] standardized across the web industry um [23:26] which is also kind of tech more broadly. [23:29] While uh design tokens are currently [23:31] associated more with web technologies, [23:33] many apps and things like that will also [23:35] use something like design tokens. But [23:37] there is a design tokens standard and [23:40] penot follows that which means that you [23:43] can import your design tokens that [23:44] you've created in other platforms that [23:47] support the same format and they will [23:49] work magically in penmp. So this is [23:52] great. What is a token? So tokens are [23:54] kind of like components in a way except [23:57] they are the tiniest little design [23:59] decisions that you make. So if I open up [24:01] the tokens panel here, you can see I [24:04] have options for border radius, color, [24:07] font family, font size. I've skipped [24:09] past dimensions cuz I don't want to [24:11] confuse you. [laughter] [24:12] Sizing, rotation, opacity. So these are [24:16] single values and design tokens are a [24:19] way of saving those single values with a [24:21] name essentially. [24:23] And so we have a variety of different [24:25] token types as well. I'm going to jump [24:28] to a different page. So here I have some [24:32] button states. This is just uh [24:35] prototyping how uh your buttons might [24:38] work. So this is a default button style. [24:40] If you hover over it, it goes a [24:42] different shade of purple. And when you [24:44] click on it, it says processing. And [24:46] it's again a very subtly different shade [24:49] of purple. So, this is a good candidate [24:51] for uh design tokens. I'm just going to [24:54] have a look at the time. And because I [24:56] have the time, I'm also going to [24:57] refactor these buttons themselves. [24:59] Um, because I've done them in quite a [25:01] peculiar way, quite an old school way, I [25:04] would say. So, as before, this button is [25:08] a group that has a background color and [25:10] a radius on it. It has text inside of [25:13] the group and uh it has a Oh, the [25:16] background is the background color with [25:18] the radius on it. So [25:21] nowadays, I wouldn't create a button [25:23] like this. Why? Because what if I change [25:27] the size of the button? [25:30] The text Oh, that's cuz I If I change [25:32] the size of the background, the text [25:35] remains in the same location. What if I [25:37] make it smaller? [25:39] Text is no longer inside the button. [25:42] This is another benefit of flex layouts. [25:44] And so I'm going to create [25:48] a new board and I'm going to just copy [25:51] that text. [25:55] A button starts with its text if you're [25:57] using flex layout. Um it's white right [26:00] now so you can't see it. Um I'm just [26:02] going to set the text to the width of uh [26:06] it's the box of the text to the width of [26:08] the text which will make sense if I [26:12] There you go. Now you can see it the box [26:14] fits exactly the width of the text. [26:18] Change that back to white. [26:23] Excuse me. And [26:26] now I'm going to add a flex layout to [26:28] that text. So this creates a group [26:30] around my text that is a flex board. And [26:34] this will be my button itself. [26:38] And I want to use this kind of bluey [26:41] purpley color as the background for my [26:44] button color. I'm going to go into [26:46] tokens and I create a color token. And I [26:50] am going to call this now I could just [26:52] call it blue but what if I have loads of [26:54] different blues? And so what is helpful [26:58] is to give your tokens meaningful names. [27:02] Semantic is a word we often use when [27:04] we're talking about this. So, a name [27:06] that is descriptive and that you can [27:09] understand if you want to reuse it again [27:10] later or the rest of your team do as [27:12] well. [27:15] The way that you name things in tokens [27:17] is use dots to separate each word or [27:20] each grouping. So, I could call it [27:23] button. It's the background of the [27:25] button. So, maybe I will call it button [27:27] background. Um, some people would put [27:30] color at the beginning because it's the [27:32] color, but that's just going to make [27:34] things a bit verbose right now. So, I [27:36] won't do that. And I'm going to put that [27:38] color in there. So, button background is [27:40] this color. [27:42] And I'm going to apply that to my [27:45] currently invisible uh button. So, I've [27:48] selected the button. I go to the token [27:51] and I can either click it or I can right [27:53] click it and choose fill. And that has [27:55] applied that color. My button text has a [27:58] color as well. I'm guessing that color [28:00] is white. Yes, it is. So, I'm going to [28:03] say button dot text and paste the color [28:09] in there and set that for the button [28:13] text. Now, you can see this is a very [28:16] strange looking button. It has no like [28:19] tiny little target area for you to [28:20] click. It doesn't even really look like [28:22] a button. So, let's give it some [28:23] padding. And uh let's give it some nice [28:26] rounded corners. Now in penmpot of [28:29] course I can set the rounded corners in [28:31] this uh option up here. But let me think [28:34] maybe I want to reuse the same rounded [28:36] corners the border radius on every [28:38] button that I have in my design. So for [28:41] that I might call this button radius. [28:46] And I'm just going to guess what that [28:48] was. Is it 30? Let's see how good I am [28:51] at identifying radius. Um, actually very [28:55] hard to tell when it's this size. It [28:56] needs some padding. That's what it [28:58] needs. Now, padding is controlled under [29:01] the spacing token type. And I'm actually [29:04] going to have a quick look at the size [29:06] of this. Oh, no. Because I've laid this [29:08] out statically, it has no padding. So, I [29:11] will have to guess. Uh, I'm going to [29:13] say, okay, now I could call this a [29:17] padding token. But if you think about [29:19] spacing, spacing could be padding. It [29:22] could be margins. It could be the gaps [29:24] in a flex layout. Um, so a lot of [29:27] different things you could use spacing [29:28] for. So spacing is a bit of more generic [29:30] term that's easy to remember. Um, [29:34] button spacing maybe I will call it. [29:37] Spacing you do tend to use across the [29:41] whole amount of your design. You might [29:42] want things to align in a particular way [29:44] and have consistency across every single [29:46] component. So you might not specify [29:49] spacing just to buttons. And maybe I'm [29:51] going to call this um medium spacing. So [29:55] I might call this spacing.m MD for [29:57] medium. And I'm going to say that's 125. [30:02] So at least round to fives. And then if [30:06] I want to apply that, you see if I right [30:08] click on my token, I could apply it to [30:11] the gaps, but there's no uh gaps in this [30:14] layout right now. Um I could apply it to [30:16] all of the padding. So that goes on top [30:18] and right and bottom and left. [30:22] Or I could just do the horizontal or [30:23] just the vertical. [30:25] And uh maybe [30:30] I want to create a different form of [30:31] spacing for this on either side. I'm [30:34] going to call it large spacing. LG and I [30:38] will make that all 60 seems big. I might [30:42] you'd probably make the scale [30:43] proportional in some sense, but I am [30:45] just making it opposite. go along right [30:47] now. So, I'll put my horizontal padding [30:51] as that larger one. And so, there we go. [30:54] We have our button. [30:57] Now, maybe I want to create the hover [31:00] version of it. I haven't thought about [31:02] that when naming this, have I? So, I'm [31:04] going to change the name of this token [31:07] to button dot hover uh default. The [31:12] other one will be hover. [31:14] If I change the name of my token, it is [31:17] going to break that link to that token [31:18] across all the tokens. Um, all the [31:21] objects I've already created that use [31:22] that token. So, bear that in mind. You [31:24] only want to be changing your mind right [31:26] at the beginning. Um, that's what that [31:28] warning that flashed up was telling me. [31:30] So, I'll reapply that. And then maybe [31:33] I'll make a different [31:35] um color for button dot hover. [31:40] Um, [31:42] what was the fill color? It's that [31:43] purple. I'm just going to chuck a guess [31:46] out there at that shade of purple. I'll [31:49] copy paste in a second. [31:52] Okay. Uh it was that hex value. Let me [31:57] update that. [32:00] And so then if I want to create the [32:01] hover version of the button, I'll [32:04] duplicate it and choose the hover fill [32:07] color. Fill colors. If I click on a [32:10] color, it will automatically change the [32:11] layer fill. But if you want to refine it [32:14] and apply it to the stroke, um you need [32:16] to right click to be able to do that. [32:19] And so that is some very basic design [32:23] tokens [32:24] um and how we can use them for different [32:28] objects. [32:30] I can see that the chat has been [32:32] streaming away while I've been talking [32:34] in the corner of my eye. So, do we have [32:37] any questions [32:39] so far? Anything to do with design [32:42] tokens or components? [32:45] If you're watching live, you can ask [32:46] questions. If you are not live and [32:48] you're watching this back later and you [32:50] have questions, please feel free to ask [32:52] them and I will try to um go back and [32:55] answer them later on. Or if you want to [32:56] jump into the pampot community, that's [32:58] another great place to ask questions, [33:00] too. Oh, I see I have a question. Uh, [33:03] I've seen slightly different [33:04] recommendations on how to name design [33:07] tokens. Is there a standard naming [33:08] convention you recommend? [33:11] No. [laughter] [33:13] Basically, there are a few sort of [33:16] standards emerging, but really it's down [33:18] to what suits you and your team the [33:20] best. A lot of the design tokens nerds [33:23] will argue that different approaches [33:25] that have been recommended as good for [33:27] everyone are not really ideal. Um, one [33:31] of the ways to think about it I would [33:33] say is [33:36] try not to create a token for absolutely [33:38] everything. You only need a token like a [33:40] component if you're going to use it [33:42] again. Also, um, try to make your tokens [33:46] consistent for your team. So, for [33:48] example, as I was saying with medium [33:51] spacing and large spacing, if I maybe [33:53] had a small, an extra small, an extra [33:55] large, you probably want to make the [33:58] differences between those tokens [34:00] consistent and predictable, and that [34:03] makes them more useful as part of the [34:05] design as well. When you're naming them, [34:07] generally, you do want to go from the um [34:11] broadest [34:13] um descriptor to the most specific [34:15] descriptor. I'd say that's a fairly [34:17] standard convention. So, what that means [34:19] is um go from first of all it's a [34:23] button, then it's the hover state of the [34:25] button, then it's the background of the [34:27] hover state of the button. I hope that [34:29] makes sense. Um it makes sense to me, [34:31] but that doesn't mean [laughter] makes [34:32] sense to you. Um, and if it is a token [34:36] that you are likely to apply across a [34:38] huge range of your designs, then [34:41] consider making it something more broad [34:44] like spacing dot a value. [34:47] And you can choose to apply set create [34:50] sets that are applied um globally or [34:53] some sets that you turn on and off for [34:55] different themes. I will show you that [34:56] in a minute. And so you can uh control [35:01] specificity in different ways as well. [35:05] So I really want to uh show you the next [35:09] section because I think it's really [35:10] exciting. It's a very new feature into [35:13] PMPOT and I think it's the first time [35:14] I'm going to demo it. It is designing [35:17] typography tokens. [35:29] Now, typography tokens took a while to [35:32] come to penpop because they are a very [35:34] specific special new type of token and [35:37] that is a composite token. If I go to uh [35:41] scroll down here to create a typography [35:43] token, if you open up the interface, you [35:45] can see that a typography token doesn't [35:48] just have one value. It has all these [35:51] different values and these values can [35:55] reference other values as well. I didn't [35:58] mention referencing before. That's [35:59] probably a useful thing. So I will tell [36:00] you about that in a minute. And so these [36:03] composite tokens mean you can store [36:05] everything about the typography of a [36:07] piece of text in one token. So you can [36:10] see the value of that that if you have [36:12] that set and then you can just select [36:15] any other text you want, apply the token [36:18] and done. You don't have to remember the [36:19] font size. You don't have to remember [36:20] the font family. All of those values [36:23] automatically stored. So that's [36:25] incredibly useful. So I'm going to jump [36:29] into I'm looking at my notes to see [36:30] where did I I thought I would do [36:32] typography tokens back with our posters. [36:36] It's a bit more interesting typography [36:37] than just buttons in there. Okay. [36:42] So if we're looking at our design [36:45] overall here, we have a few different [36:47] typographies emerging. We have this kind [36:50] of uh display title typography here, [36:54] this serif um font and it's quite big. [36:59] We have navigation links and this is a [37:03] bit big, a bit bold. We have our kind of [37:07] little paragraph or sentence descriptive [37:09] text here. So it's smaller sand serif [37:13] and then we have even smaller text here [37:16] with the prices as well. So these are [37:19] all examples of typographies. [37:22] Some of these typographies have things [37:24] in common. So for example, all of this [37:26] sans serif text is using the same type [37:29] face, same font which is ka. And so [37:32] that's a good place to start with our [37:34] typography. [37:36] Now you saw before when we were talking [37:38] about creating typographies. I'm [37:39] actually going to create I'm going to [37:41] call that set that I made before the [37:43] button set just so that I don't confuse [37:46] myself. And this will be the poster [37:49] store set. [37:51] There we go. And I'm enabling it just so [37:54] we don't model up our tokens. Now, we [37:58] identified that these are using the same [38:00] font family. So, what I could do is I [38:03] could create a token for my font family. [38:06] And I could do that. I could create it [38:09] and I could apply it to all that text [38:11] and just have the shared font family. [38:14] I'm going to do that now. So, I'm going [38:15] to how am I going to call this? I'm [38:18] going to say family just so that I [38:21] remember what if I if the token is [38:25] outside presented outside of its [38:26] context. Maybe you're using it in the [38:28] development process. Um you can [38:30] understand what type of token it is [38:31] without having to look at the type. And [38:33] I'm going to say Sans [38:37] um for Sans Sarif. And I'm going to [38:39] choose the font from this dropdown. [38:41] Search for it Carla. [38:44] And I'm going to save that. And so now I [38:46] have a family sans token. So I could [38:49] apply it to all of these like this. [38:54] And it's not going to change anything [38:55] cuz they were already that same font [38:57] family. But if I wanted to change it to [39:00] a different Sans font, say enter, [39:06] I could update it and it would change it [39:09] across all of those uses of the font. [39:12] And I can also say undo to undo that [39:15] change. And maybe I have a different one [39:18] for family serif. Uh I said family and [39:22] typed font. That was some strange [39:25] brain situation going on there. Oh, I [39:27] should look up what that font family is. [39:30] It is chalky [39:33] family. [39:37] And that one is called [39:39] chalky. [39:41] Save that. [39:44] And I can do the same for my font sizes [39:48] as well. Oh, it undid the change. Me [39:58] so I can type. Let's fix that. There we [40:01] go. Updated again. [40:04] And so if I look at the different font [40:06] sizes I have in use. I have 18. I have [40:09] 15. I have 15. And what's this one? 13. [40:16] So maybe I create a bunch of font sizes. [40:19] Uh font size if you're using multiple [40:21] words in a design token. Lately I've [40:25] been dash separating them, kebab casing [40:28] them rather than say camelc casing them [40:31] like that. Uh just because I think it's [40:33] more readable, but that is also a [40:36] convention up for grabs. Do whatever [40:38] works for you. I'm never going to have a [40:39] font size smaller than 13. I can promise [40:42] you that. And so uh [40:46] That's the value. So, I'm going to call [40:47] that extra small and say 13. I'm going [40:51] to say font size [40:53] small is 15. This is me trying to [40:57] remember numbers. I am the worst at [40:58] that. 21 18. Okay. Font size MD [41:05] 18. So, that's my medium. Font size LG [41:11] 21. Okay. So I have some font sizes and [41:15] I have some font families. And now I'm [41:17] going to create a typography utilizing [41:19] those. So let's think this is going to [41:23] be my default text that's on every page [41:26] sort of paragraph style text. So maybe [41:28] I'm going to call this [41:29] typography.paragraph. [41:32] I could just call it paragraph. I'm [41:34] being quite pedantic saying typography. [41:38] And then I could choose that same font [41:41] family from the list or I could [41:46] not close the box paragraph. [41:51] I could reference the token that I've [41:54] previously created here inside of this [41:56] input. So I can say family dot [42:02] sans. And you can see that that will now [42:04] resolve to cara. And that means that if [42:08] I create multiple typographies that are [42:10] all using family.sands, [42:13] if I then want to update that font [42:17] family across the entirety of my design, [42:19] I only have to update family.sands and I [42:22] don't have to update every single [42:23] typography. So that is the benefit to [42:26] using references. That's what it's [42:27] called when you use these curly brackets [42:29] in there. And the paragraph size I think [42:32] was small. So, I'm going to reference [42:35] font size dot small. [42:39] Uh, the font weight. So, that's [42:42] different. Do I need to have a specific [42:46] token for font weight? [42:48] Probably not, because the bold font [42:51] weight is probably always going to be [42:53] bold. The regular is probably always [42:54] going to be regular. You probably want [42:56] to, if you're changing your font family, [43:00] you might update the weight because that [43:02] font family it's 600 weight might look a [43:05] bit heavier than another font family 600 [43:08] weight. And so I'm going to just say [43:11] that for this it is I'm guessing it's [43:13] about 400. [43:15] And the same with line height. You could [43:18] have like a tight line height and a [43:19] loose line height. You could use [43:21] calculations. I could say something like [43:23] maybe my line height should always be my [43:26] font size uh multiplied by 1.2. [43:31] Um which is essentially what happens if [43:33] you do that. But um I could do some [43:36] clever calculations like that. That is [43:38] an option. Um I'm just but right now I'm [43:41] just going to type it in because if I [43:45] you don't want to overcreate on tokens [43:48] because that could possibly create more [43:49] for you to maintain. Uh if you think if [43:52] you're only likely to use this value in [43:54] relation to this particular token, leave [43:56] it. It's no problem. H and you don't [44:00] need to fill out all of these. [44:02] So I'm going to save that. Now if I [44:05] select all my paragraphs [44:11] and choose the typography.paragraph [44:15] that has now applied it. So then if I [44:17] later on down the line decided, okay, I [44:20] actually want to make my [44:23] uh paragraphs use Sarah fonts instead, I [44:27] might update this to family.sif [44:31] and that will update all of my [44:33] paragraphs. [44:35] So that is the benefit of typography [44:37] tokens. Oh, excuse me one moment. [44:45] Oh, tickly throat. Right. So, do we have [44:49] any questions relating to design tokens [44:52] so far? [44:56] Great. Well, we can move on to another [44:58] really exciting aspect, and this is [45:00] where I put the rush on myself because I [45:02] want to get this done. Um, we're going [45:04] to look at building design token themes. [45:11] [music] [45:19] So, if you've seen this prototyping [45:22] template before, you might remember that [45:24] I have a little light dark mode toggle [45:27] in it. So, if I go to view mode, checks [45:30] if I'm a human being. [45:34] And if I click my toggle, switches [45:36] between light and dark mode. [45:39] I mean, [45:42] that's pretty cool, [45:45] but you can do that for your light mode [45:48] and dark mode inside of penot as well. [45:50] So, that's why I thought this would be a [45:51] fun demo. So, I'm going to show you how [45:54] to recreate this using design tokens and [45:56] design token themes. So, I'm going start [45:59] off by creating a board to hold this. [46:03] And I'm going to call it light and dark [46:05] mode. [46:08] And I have my labels here and I have my [46:10] toggle. [46:12] And I'm going to copy all of that as [46:15] well over. [46:18] I'm not worrying too much about the [46:20] layout right now. I can improve upon [46:22] that later. So I want to create design [46:25] tokens for each of these. [46:28] So again, I'm going to create another [46:30] set. And I'm going to for this one, [46:35] I think I'm going to use [46:39] um [46:40] I'm going to turn [46:43] a set on and off using a theme. That's [46:46] essentially what themes do. If I go to [46:47] create a theme, I could choose to enable [46:50] and disable different sets. And so for [46:54] my toggle, I'm going to enable and [46:57] disable a light set and a dark set. [47:01] I'll show you how to do this. It will [47:03] make it less confusing. But in the [47:05] creation of the sets, I'm going to have [47:06] toggle. I'm just going to group these [47:08] sets. Now, grouping, you can turn an [47:11] entire group on and off. Um, but [47:13] actually more than anything, grouping is [47:15] a useful way that you can organize your [47:17] sets. It otherwise doesn't necessarily [47:20] have much of an impact. um you can just [47:22] use it to stay organized and if you have [47:24] a lot of sets it can be make things a [47:26] bit easier. So I'm a global [47:30] uh set. I'm going to create another set [47:33] in this group and I'm going to call it [47:36] light and I'm going to enable all of [47:38] those sets so that I can see what I'm [47:40] working with. [47:42] Now [47:44] I am going to work just on color for [47:47] this one. [47:48] So, I have in here, [47:56] sorry, I have a tickle that won't quit. [47:58] And [47:59] I am going to start with a background [48:02] color. So, I'm just going to call this [48:07] uh board dot background. [48:11] And I happen to know that that is white. [48:13] So, I'm just going to in fact I can see [48:15] it here in the list. [48:19] And I'm going to apply that there. [48:23] Something cool. I just want to show you [48:25] a really quick little preview. So you [48:28] see I've selected board background here. [48:31] It's white. I've selected the board. [48:34] I've the token is applied to the board. [48:37] I see the resolved color in here. And [48:40] some of you maybe you've worked with [48:42] tokens before. You might be thinking, [48:43] "Oh, it'd be really cool if I could [48:45] actually see the token here." [48:48] Let me show you a little something. [48:51] This in light mode so that I can tell [48:54] the difference is the penot preview of [48:57] what will be released very soon. And you [49:00] can see if I select these little colors [49:03] here that are using tokens that I have [49:06] enabled in here, color tokens, it's [49:09] actually showing the name of the token [49:12] in the design panel is so cool. It makes [49:17] it much easier to work with and because [49:19] you can also have your layers panel open [49:21] at the same time and you can still see [49:23] the tokens that are applied. Also, if I [49:26] go to the inspect panel, the design [49:30] token is showing in there as well as the [49:32] active sets. Um, so that is something [49:36] really exciting you've got to look [49:38] forward to very very soon. I know I was [49:41] whispering [laughter] like that was a [49:43] secret like that' be any good for my [49:44] throat as well. Anyway, jumping back [49:47] right, light and dark mode toggle back [49:50] into our tokens uh into our light [49:53] tokens. So, I have my board background. [49:56] This is my label color. So, I'm going to [49:59] call this uh [50:02] label. [50:05] Uh yeah, I'm just going to call it [50:07] label. I don't care about that being a [50:09] terrible name right now. [50:12] I have uh this is a gradient. I can't [50:15] currently create tokens for gradients. I [50:17] think they're probably coming down the [50:18] track because they would also be a [50:20] composite token. If you think about a [50:22] gradient, it's made up of multiple [50:23] colors at multiple positions. And uh but [50:27] that's fine because my gradient is the [50:29] same in light and dark mode. And I am [50:32] going to have um okay, so let me think [50:36] about the meaning of these little icons [50:39] and their colors. Here I have a toggle. [50:44] When the toggle is enabled, it has this [50:47] little uh circle around the outside of [50:49] the icon. And so that would be uh indic [50:53] indicative of a state uh or actually no [50:57] for this I want it to be indicative [50:58] that's a light so I'm confusing myself [51:02] toggle [51:05] light background [51:08] and that is not white but it's close [51:10] enough right now [51:12] and this little purple color is my [51:16] toggle light icon that is indicating [51:21] that it is enabled. It is a purple icon [51:23] on a white background [51:26] and [51:28] I have the opposite for the dark one. So [51:32] I have toggle dark background. Keep an [51:36] eye on the time. That would be the same [51:38] purple. You know what? I'm going to use [51:40] references. [51:43] What is my purple color? [51:47] Speed up the process. [51:50] purple [51:53] and the label is going to be the same [51:55] purple as well. [51:58] See, I told you that using references [52:00] could speed up the process. [laughter] [52:03] Working it out as I go. So, toggle light [52:06] icon [52:09] toggle [52:11] dark background. It doesn't have a [52:13] background. So, I'm going to use [52:14] transparent. I don't know if you know [52:16] about this value. really handy if you [52:18] want something to disappear. [52:21] And so toggle light [52:25] icon. Let's create another reference [52:28] value that's white. [52:31] Our board background [52:33] is white. [52:38] Our light background is white [52:43] and white is obviously white. Okay. [52:47] And [52:49] we have a dark color background here. In [52:51] fact, I'm going to make the dark back [52:52] the label the same color as that purple. [52:55] The dark purple. Dark bubble. [52:59] This is not necessarily a lesson on how [53:01] to name things. Well, okay. So, my label [53:04] color is going to be dark purple. [53:08] The contrast will be a bit nicer there [53:10] as well. Okay. And I'm going to make [53:13] sure that these are applied to the right [53:15] thing. So, my board is applied. [53:18] My icon here that is toggle [53:22] dark icon. I didn't make one for that. [53:29] That's white. [53:33] Okay. [53:36] Toggle background. Is there a background [53:38] there? [53:45] Um, [53:51] how's the background on? [53:53] There we go. So, I'm going to put that [53:57] there behind the moon. [54:07] And is that going to is that hidden [54:10] behind something else? [54:14] Yep. It's in the It's in this hidden [54:17] folder. [54:24] So, let's move those. There we go. This [54:27] is why I use flex layouts. Makes it a [54:29] lot easier. And that is transparent, the [54:33] icon. [54:35] And [54:38] I've this is slightly tricky because the [54:41] middle bit is a fill and the other bits [54:43] are strokes. [54:47] Not ideal way of doing things, Laura, [54:49] but you want to make it interesting on [54:51] yourself. And that is your toggle light [54:55] background. Okay. [54:59] So now I've created all of these. [55:01] Keeping an eye on the time. Uh this is [55:04] if I want to create a light mode and [55:06] dark mode, one of the ways that I find [55:07] most effective is to create all of one [55:10] of the modes first because then what you [55:12] can do is duplicate the set. And I'm [55:15] going to call this dark and then you [55:18] have prepopulated in your set all of [55:20] those token names and you just need to [55:22] change them to what your dark value [55:24] should be. And so my board background [55:27] will be dark purple. [55:31] My label will be [55:35] white. [55:38] My dark background [55:41] will be white. [55:44] My dark icon will be purple. [55:48] Kind of referencing I don't know why I'm [55:50] pointing at the screen. You can't see [55:51] what I'm pointing at. I'm referencing [55:53] this bit of the design here. Uh my light [55:57] background will be transparent. [56:03] My light icon will be [56:09] white. [56:11] I don't need a white token. I don't need [56:13] a [56:15] Oh, no. I do [laughter] [56:17] because if I disable it, [56:20] it can't reference it. [sighs] [56:25] Okay. Don't break your tokens, Laura. [56:27] All right. Now, if this all comes [56:29] together, we'll see what I've whether [56:31] I've managed it. Toggle [56:35] light mode. So, this is the theme [56:37] grouping my themes. Light enable all of [56:41] these light but not the dark set. [56:46] Creating another theme again. Toggle [56:50] but the dark. [56:53] Enable toggle but not light. Save the [56:56] theme. Okay. Now I've created those [56:59] themes. I have a little drop down here [57:01] that gives me the option to choose [57:02] between light, which is what's currently [57:04] selected, and [57:07] dark mode. Yes. So now we can switch [57:11] between light mode and dark mode. And [57:14] you can see that it switches the toggle [57:16] like that [57:19] with 3 minutes to go. Oh, that was a [57:22] relief. I was worried that I wouldn't [57:23] get to that. So, with a couple of [57:26] minutes remaining, we maybe have time [57:27] for one or two questions. Do we have a [57:31] question? Any questions? I will also, if [57:34] there are any there that we didn't get [57:35] to yet, I will make sure that I jump [57:37] back in uh later and uh answer your [57:42] questions if I've missed anything. You [57:44] can also ask me in the PenPot community, [57:46] which is where you'll also be able to [57:48] find this file. Straight after we [57:50] finish, I'll jump over there and upload [57:52] it. So, do we have any questions? [58:02] Aha, there we go. What are the main [58:05] benefits of using tokens versus styles [58:08] or just the components? That is a [58:10] fantastic question. [58:13] So, if you look back at I think was it [58:16] the last hands-on or the one before [58:18] that, I actually talked about using [58:20] design tokens inside of your component [58:23] library. And so, we can um you can use [58:29] use tokens inside your components. So, [58:31] if you think about tokens as being those [58:33] smallest little values and then [58:35] components can utilize tokens, often [58:38] your tokens are quite useful for [58:40] variance as well. And tokens are really [58:44] valuable um as part of the development [58:46] process. So if you want to create a [58:48] shared language that works particularly [58:49] well, tokens and components are great [58:52] for that. If you are someone that's been [58:55] working with PMPOT for a long time, you [58:57] might notice that there's also colors [59:00] and typographies that you can create [59:02] inside of PMPOT as assets that get [59:05] shared inside of your libraries that [59:07] when you publish them in your team. And [59:10] um what I would say the difference [59:11] between those are is I think if you want [59:14] to keep it simple then use the colors [59:17] and typographies inside of pampot. If [59:20] you are trying to build design systems [59:22] and you want to build something that is [59:25] going to work really well with your [59:27] development team that is going to be [59:28] platform agnostic. So you can export [59:31] your tokens [59:33] and show you could do that here. You can [59:34] export your tokens as a JSON file or [59:37] import your tokens from somewhere else [59:39] that you've created. That's probably [59:40] when you want to use tokens. [59:43] Now, as I wrap up, um there is on the [59:49] PMPOT community, [59:52] um there is a call out to understand [59:55] your use cases for the pimpot mcp [59:59] server. So, if you are someone who is [60:02] looking at using LLMs as part of your [60:05] design process, um, who wants to be able [60:08] to interact with PMPOT using the MCP, [60:11] uh, there's some really cool demos out [60:13] there, um, if you check out in the [60:14] community as well. But PMPOT wants to [60:16] better understand how you want to use [60:19] that and what's actually valuable, what, [60:21] but like what is actually genuinely [60:23] useful as part of the design process, [60:25] um, rather than just shoehorning AI into [60:28] everything. So, um, please jump into, [60:32] um, Pempot and, uh, the community which [60:35] is at community.pot.app. [60:39] I'm hoping that I got that right and, [60:41] uh, you can add it in there. Um, there [60:44] is also, if you missed it, uh, an update [60:47] to my UI design with Pampot course that [60:51] is available at pampot.app/courses. [60:54] We now have a text and typography unit [60:56] up. So, if you want to learn all about [60:59] using text and typography in penot and [61:01] in UI design in general, um that course [61:04] is free. Um there's loads of videos in [61:06] there. There's a huge amount of [61:07] resources. Um and we're really proud of [61:09] it. And so you can find that latest [61:11] module in there. And what else? Oh, [61:15] remember, please subscribe if you want [61:17] to be the first to find out about these [61:19] hands-on demos and the new ones that are [61:21] coming up in 2026. Or of course you can [61:24] join the penot community. I've referred [61:27] to it so many times today. That's [61:29] because it's great. I'm in there every [61:31] day. Um it's a really great supportive [61:33] community and a place to be the first to [61:35] find out what's going on with penot. Get [61:37] sneak peeks, get previews, and get help [61:40] with uh if you have any support [61:42] questions or anything that you're [61:44] struggling with, how to do it in penot. [61:46] I'm often in there. So, thank you [61:48] everyone. Thank you to those who joined [61:50] us live. I really appreciate you being [61:52] here. I appreciate your questions. I [61:53] appreciate your comments and your [61:55] feedback. And we will see you again very [61:57] soon. Goodbye.