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
Plugin
Exporting variables

Exporting variables

Learn how to export theme settings from Figma to your shadcn/ui project with Figma to shadcn/ui plugin.

Instructions

This feature is compatible with the shadcn ui Figma kit version from May 2025 and newer. Follow these steps to export your theme settings:

  1. Launch the plugin within your main shadcn/ui kit for Figma library file.
  2. Navigate to the "Manage Variables" tab.
  3. Select the "Export (v4)" tab.
  4. Choose your desired theme for export.
  5. Select your preferred color mode.
  6. Click "Export theme settings".
  7. Click "Copy CLI" to copy the command.
  8. Open your shadcn/ui project in your code editor.
  9. Access the terminal in your IDE
  10. Paste and execute the CLI command. Note: This process will overwrite your existing globals.css file with the theme settings from Figma. Consider creating a backup of your globals.css file before proceeding.
  11. Make sure to import the proper font family if you used a different one in your Figma design. You can learn more about fonts in Next.js in this guide.
Up next
Pro Blocks tab
Learn how to integrate Pro Blocks from Figma into your shadcn/ui project with our plugin. This step-by-step guide will walk you through generating CLI command based on the selected Pro Blocks.