Introduction to theming
You can quickly adjust the theme of the shadcn/ui components by editing variables and styles. This chapter in our Academy explains how to customize your design system effectively.
To work with variables, you'll first need your main library file open. This is the shadcn/ui kit Figma file that acts as the central repository for all your components, which you published in the last chapter.
Figma guides
While our academy primarily focuses on mastering our UI kit and plugin, we understand you might want to explore Figma's broader capabilities. For a deeper dive into Figma's extensive functionalities beyond our direct scope, you'll find links to their official resources below.
Variables
The shadcn/ui kit for Figma was built with variables. Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. Here you can learn more about variables and how to use them.
Styles
The shadcn/ui kit for Figma is also built with Styles, including text styles and effects styles, that can be reused across your designs. Learn more about Styles and how to use them here.