# Interface design with UI kits | Hands-on Demo, March 26th **URL:** \ **Category:** Events and Announcements\ **Tags:** design\ **Created:** [March 12, 2025, 8:29am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106 "2025-03-12T08:29:04Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [March 12, 2025, 8:29am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/1 "2025-03-12T08:29:04Z")
A new Hands-on demo is coming your way! Mark your calendar for March 26th! 📅 [![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/2/204596cbd45a6f32f6dbd3ed875e017e0ac10b67.jpeg "Interface design with UI Kits | Penpot Hands-On Demo") ](https://www.youtube.com/watch?v=iJZwLapDmug) @LauraKalbag, designer, developer, and educator at Penpot, will showcase how **UI kits can save time, maintain consistency across projects** , and serve as an excellent foundation for your own design system. UI kits are a great way to create user interfaces quickly with pre-made components. Laura will explain how both **designers and developers can use UI kits to save time** and how you can even use a UI as a starting point for your own design system. ### Event details 🗓 **Date** : Wednesday, March 26th ⌚ **Time** : UTC 3-4 PM (Convert to your local timezone with [ZoneStamp](https://zonestamp.toolforge.org/1743001200)) ▶ **Stream on** : [PeerTube](https://peertube.kaleidos.net/w/u7PXYKDPSdiZ4mdgPqq6bG), [YouTube](https://www.youtube.com/watch?v=iJZwLapDmug) or [LinkedIn](https://www.linkedin.com/events/7300435702842859520/comments/) ### Key discussion points - The advantages of using a UI kit - Best practices for developers using UI kits - Penpot’s UI kit library options - Interface design with UI kits - How UI kits contribute to scalable design systems Join us for a live session where you’ll learn, interact, and , of course, **get your questions answered in real time**. You can also ask your questions in the comments below, and Laura will answer them live. 👉 This is a new session from the full series. Check out the [complete Hands-on demo](https://www.youtube.com/playlist?list=PLgcCPfOv5v56_iRm-lwkdNtgXEP2M-vUA) playlist! ---
**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:** [March 12, 2025, 11:10am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/2 "2025-03-12T11:10:13Z")
Thanks @Elena_Alcalde_Rueda! And as ever, if anyone wants to see anything specific or has any questions ahead of the livestream, drop them in here 😁 ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [March 14, 2025, 4:39am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/3 "2025-03-14T04:39:15Z")
@LauraKalbag is it possible to show how to use some of the new features released in V2.5 in the upcomming tutorial? > [@Penpot 2.5: The Devil is in the Details nail\_polish](https://community.penpot.app/t/penpot-2-5-the-devil-is-in-the-details/7960): > > We’re excited to announce our 2.5 release! This time we bring multi-step gradients, comment notifications, new copy/paste options, and direct links to specific boards, among other new little big details that should be gems for designers and team collaboration. Let’s dive in! Multi-step gradients Creating smooth, complex color transitions with multiple stops, will provide more creative options to customize designs. We’ve also added quick 
 ---
**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\ **Post date:** [March 14, 2025, 8:50am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/4 "2025-03-14T08:50:29Z")
Hi @BDV, @LauraKalbag already showed some of them at [the last Hands-On Demo](https://www.youtube.com/watch?v=LQnGUKmczYo&t=16s). A bold move, considering the features just dropped hours before 🙂 And we’ve also published [this walkthrough](https://www.youtube.com/watch?v=3DD3RAaXCYE&t=4s) showing the main 2.5 features and enhancements. ---
**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:** [March 26, 2025, 4:22pm UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/5 "2025-03-26T16:22:18Z")
These are the demo files I created for/during the hands-on: (The links are to Google drive as the files are too big to upload here! That’ll be my massive sketches
) - [Document card file (including connected libraries)](https://drive.google.com/file/d/1Oh_4K-CnDs1Hu-hYl6bMbyah2ezgpdOh/view?usp=drive_link) - [Document dashboard file (including connected libraries)](https://drive.google.com/file/d/1BcqOZtDPh90XghdXr-3vloKZp1q3hA-4/view?usp=drive_link) And below you can download the Material Design Light icons library: [Material Design Light icons.penpot](https://community.penpot.app/uploads/short-url/cQbEOhN6NpVwe1ukyYTaFGdVJb7.penpot) (1.9 MB) Some links for other resources I mentioned during the demo: - [Penpot Hub](https://penpot.app/penpothub) - [Penpot Libraries and Templates](https://penpot.app/penpothub/libraries-templates) - [GNOME components UI Kit / Library](https://penpot.app/penpothub/libraries-templates/gnome-components) - [Material Design 3 UI Kit / Library](https://penpot.app/penpothub/libraries-templates/material-design-3) ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [April 6, 2025, 12:56pm UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/6 "2025-04-06T12:56:37Z")
Hey, @LauraKalbag see that the theme for the Demo in April has already been chosen and is obvious [![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/9/9c56dc3ee2f8a0061c40ec50bda76d2b6f5d3d73.jpeg "Intro to Design Tokens | Penpot Hands-On Demo") ](https://www.youtube.com/watch?v=3Yh5vDV8vTg) For the demo in May, would it be possible to show how to use Penpot in bussines branding and possibly how to use a design from Penpot on hosting sites like e.g. [Create personalized web apps with Vercel](https://vercel.com/solutions/web-apps) Don’t know if you’ve already done this but maybe it could be useful to think of the demo of month x as part 1 and the demo of month y as part 2. Where at the start of the demo of month y, you use the end result of demo x as a starting point. By this you can realise a more complex example than starting from scratch each time. ---
**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:** [April 7, 2025, 9:35am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/7 "2025-04-07T09:35:39Z")
I like the idea of building on a previous demo, that’s really cool. > would it be possible to show how to use Penpot in bussines branding Do you have any particular business branding use cases in mind? I’d be happy to do something on how you might use Penpot for brand design, but the needs of a business/brand can be quite unique. If I think back to the days when I used to do branding as part of my freelance work, this would be creating a logo, a colour scheme, perhaps a typography scheme, and something like a digital banner or business card to demonstrate how the brand could be used. Is this the kind of thing you’re talking about? > And possibly how to use a design from Penpot on hosting sites like e.g. [Create personalized web apps with Vercel](https://vercel.com/solutions/web-apps) There’s not really a way to go directly from Penpot → Vercel without a lot of steps in between, and it would really depend on what you’re designing. For example, a simple landing page has a very different development process from a blog that has a content management system and an interface for writing posts, or a web app that has functionality like user accounts, billing systems and so on. (Vercel might be overkill for a landing page or blog!) Though I am totally up for exploring how you can use Penpot’s HTML and CSS (and design tokens!) in a development process, if anyone else would be interested in that. Maybe a lot of developers know how they’d do that for their codebase anyway? Perhaps it would be more useful for designers who want an insight into how developers work? ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [April 7, 2025, 10:43am UTC](https://community.penpot.app/t/interface-design-with-ui-kits-hands-on-demo-march-26th/8106/8 "2025-04-07T10:43:36Z")
> [@LauraKalbag](#): > > creating a logo, a colour scheme, perhaps a typography scheme, and something like a digital banner or business card to demonstrate how the brand could be used. Is this the kind of thing you’re talking about? Yes exactly, the only additional thing I thought of is possibly a flyer. > [@LauraKalbag](#): > > There’s not really a way to go directly from Penpot → Vercel without a lot of steps in between, and it would really depend on what you’re designing. At Vercel, they also have [templates](https://vercel.com/templates) just like at Penpot. The following template looked potentially interesting to me: > **[Ecommerce Template with Crystallize and Remix](https://vercel.com/templates/remix/ecommerce-crystalize-remix)** > > A fully-featured eCommerce boilerplate built using Remix and Crystallize with performance in mind. > [@LauraKalbag](#): > > (Vercel might be overkill for a landing page or blog!) Personally, I see this as rather an advantage, when you have a platform where you barely have headroom you are soon forced to change platforms because it no longer meets the requirements of the project as it grows, and Vercel’s templates include examples for blogs.