Creating new component variants

Creating new variants allows you to extend the shadcn/ui system while maintaining consistency with the existing design language. This guide demonstrates how to add a new "Warning" variant to the Button component in Figma.

Instructions

Ensure that you have added the warning variables as instructed in this lesson.
Navigate to the Button page in the main library file.
Expand the Components section and the Button frame to create more space for new variants.
Select and duplicate the Primary button variants by pressing Ctrl + D (Command + D on Mac). Drag the duplicated buttons to the bottom of the component frame.
In the Button properties panel, rename the newly created variants to Warning.
Change the color variables for the newly created variants from primary to warning.
Change the color variables for the newly created variants from primary-foreground to warning-foreground.
Select the Button component frame.
Run the Propstar plugin to organize the layout and create a component table.
Leave a comment for the developer detailing your changes.

Up next

Creating new components

In this lesson, you will learn how to create a simple Button component. Following these steps to ensures consistency with the shadcn/ui.