Discover how to modify a Figma component using the Badge component as an example, where we demonstrate how to adjust the border radius and padding.
Instructions
Navigate to the Badge page within the main Library page.
Locate the Badge / Text component in the Components section.
Select the primary Badge component.
While holding Shift + Ctrl (Shift + Command on Mac), select the Default, Hover, and Focus states, then adjust the horizontal padding from the spacing/2 (8px) variable to the spacing/3 (12px) variable.
With these states still selected, modify the border radius from the rounded-md (8px) variable to the rounded-full variable.
Update the border radius on the Ring by holding Ctrl + Shift (Command + Shift on Mac).
Leave a comment for the developer detailing your changes.