# Scalable UI design | Hands-on Demo, December 10th

**URL:** <https://community.penpot.app/t/scalable-ui-design-hands-on-demo-december-10th/10126>\
**Category:** Education\
**Created:** [December 1, 2025, 8:50am UTC](https://community.penpot.app/t/scalable-ui-design-hands-on-demo-december-10th/10126 "2025-12-01T08:50:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [December 1, 2025, 8:50am UTC](https://community.penpot.app/t/scalable-ui-design-hands-on-demo-december-10th/10126/1 "2025-12-01T08:50:27Z")

</div>

We’re back with a new hands-on live demo on December 10, 2025 🗓! If you’re not quite sure how to start with **components** , **variants** , or **design tokens** , this demo is for you.

[![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/2/24b457470b4815dd8b71bfd1e4aad5dcadf14053.jpeg "Scalable UI design: tokens, components & variants | Penpot Hands-On Demo") ](https://www.youtube.com/watch?v=aeqcJHnsj_o)

What makes a good component? When should you add design tokens to your UI design? In this demo, I’m going to update my first ever Penpot template ([Prototype examples](https://penpot.app/penpothub/libraries-templates/prototype-examples)) to use a component library, component variants, and design tokens.

Throughout the demo, we’ll learn about the best time to introduce these features into your work, how to get started, and making our UI design work scalable, maintainable, and better for collaboration. This should also be a valuable demo if you’re looking to catch up on some of the newest and coolest Penpot features.

### Details

**Date** : Wednesday, December 10th

**Time** : 15:00 UTC (Convert to your local timezone with [ZoneStamp](https://zonestamp.toolforge.org/1765378800))

**Stream on** : [PeerTube](https://peertube.kaleidos.net/w/isZKwryUWi8HwctgDXycRy), [YouTube](https://www.youtube.com/watch?v=aeqcJHnsj_o) or [LinkedIn](https://www.linkedin.com/events/scalableuidesign-tokens-compone7399707945430757376/)

### We’re going to cover…

- Updating a UI design to use design tokens, components, and component variants
- Getting started with components and libraries
- When and how to create components and component variants
- Getting started with design tokens including tokens for color, spacing, and typography
- Design token themes

This is a live session so I can **answer your questions live in real time**. If there’s anything specific you already know you want me to cover, let me know below, and I’ll do my best to include it in the demo. Please also join me live so I feel less like I’m talking to myself 😁

👉 Looking for live demos? Check out our [complete Hands-on demo](https://www.youtube.com/playlist?list=PLgcCPfOv5v56_iRm-lwkdNtgXEP2M-vUA) playlist!

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [December 10, 2025, 4:23pm UTC](https://community.penpot.app/t/scalable-ui-design-hands-on-demo-december-10th/10126/2 "2025-12-10T16:23:35Z")

</div>

Thank you to everyone who joined me live for this session! (Or anyone who is watching it back later 😄 )

Here’s the Penpot file I worked on during the demo:

[Download the Penpot file](https://drive.google.com/file/d/1O_0xkRm0vTl8Zdbz7QhnRpqL4nIlbBvA/view)