Getting started
Welcome to the Academy!
What is shadcn/ui?
Getting started in Figma
Website Project (Lesson 1)
Theming
Introduction to theming
Primary color - Method 1. Tailwind CSS
Primary color - Method 2. Custom color
Neutral colors
Font family
Border radius
Creating new color variables
Example - Warning color variables
Creating new themes
Creating new typography styles
Dark mode
Website Project (Lesson 2)
Components
Introduction to components
Editing components
Creating new component variants
Creating new components
Adding custom icons - Method 1. Icon components
Adding custom icons - Method 2. Icon library
Working with the card component
Pricing card component
Website Project (Lesson 3)
Pro Blocks
Introduction to Pro Blocks
Simple landing page
Custom variables collection
Section Title component
Image properties
Pricing section block
Website Project (Lesson 4)
Plugin
Introduction to plugin
License key
API keys & Tokens
Google AI Studio
Anthropic AI
Best practices
Generating code
Exporting variables
Pro Blocks tab
Installing shadcn/ui
Generating code for the Pricing Card component
Website Project (Lesson 5)
Academy
Components
Editing components

Editing components

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

  1. Navigate to the Badge page within the main Library page.
  2. Locate the Badge / Text component in the Components section.
  3. Select the primary Badge component.
  4. 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.
  5. With these states still selected, modify the border radius from the rounded-md (8px) variable to the rounded-full variable.
  6. Update the border radius on the Ring by holding Ctrl + Shift (Command + Shift on Mac).
  7. Leave a comment for the developer detailing your changes.
Up next
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.