Now that component variants have landed in Penpot, I thought it might be handy to share how I would set up and use variants:
Variant examples template in the Penpot Hub.
This template contains some very simple demos I created to help explain what variants are:
- Circle component with color variants
- Square component with size variants
- Star component with color and size variants
As well as more complex UI components that utilise variants as well as design tokens. These variants include multiple properties such as state, theme color, size, spacing, elevation and more:
- Button component
- Card component
- Input field component
- Alert component
- Icon components
I covered many of these examples in the variants hands-on live demo.
Please let me know if you find this template useful or confusing! And if there’s anything broken 
And if you’d do your variants differently, I’m really curious to hear about your use cases and naming conventions!
