Design Systems with Variants | Hands-on Demo, Sept 24th

Hello friends! It’s time for another Hands-on demo and you really won’t want to miss this one. Mark your calendars for next week, Wednesday September 24th! :date:

If we’ve not met before, I’m Laura :waving_hand: I’m a designer and developer and educator at Penpot. In this hands-on demo, I’ll introduce you to Penpot’s variants, and how you can use variants to create components that are well-organized, developer-friendly and easy to use.

Variants make it easier to handle complexity in your components, including states, styles, and sizes. I’ll show you how to set up design systems using variants, and how easy component variants are to use when building UI mockups.

If you don’t use components and libraries yet, don’t worry! I’ll be doing a primer on components, component libraries, and how you can use them to create effective design systems for teams.

Details

Date: Wednesday, September 24th

Time: UTC 2-3 PM (Convert to your local timezone with ZoneStamp)

Stream on: PeerTube, YouTube or LinkedIn

We’re going to cover…

  • Everything variants! How to create them, when and why you might want to use them

  • Demos of different use cases for variants

  • How to convert existing components into variants

  • A primer on components and component libraries

  • Using components and variants with design tokens

This is a live session, so along with joining me live to find out all about variants, I will, of course, answer your questions live in real time. If you can’t make it live or already have a question burning in your mind, you can also ask your questions in the comments below. I’ll make a note of them and answer them live.

:backhand_index_pointing_right: Have you watched our previous hands-on sessions? Check out the complete Hands-on demo playlist!

4 Likes

Awesome, looking forward to it! :grinning_face:

1 Like

Thank you for joining/watching the live stream, friends!

Here’s my design file (warts and all) :wink: :

Hands-on 13_ Variants.penpot (6.0 MB)

And here’s the variants example template, which shares many of the same demos from the hands-on: