Variables

Variable collections in the Shadcn UI Kit for Figma

We utilized variables to accurately replicate the official shadcn/ui code components in Figma. Shadcn/ui employs Tailwind CSS classes for component styling and CSS variables for theming. You can explore more about shadcn/ui theming here in the official documentation. To ensure flexibility while maintaining strict consistency with the code framework, we created three collections in this Figma UI kit:

Each of the three collections serves a specific purpose:

1. TailwindCSS Collection: Stores TailwindCSS-related classes used within components and the "2. Theme" collection.
2. Theme Collection: Houses semantic variables used to create themes (brands) in the UI kit. These variables reference the TailwindCSS collection variables.
3. Mode Collection: Manages light and dark modes in the UI kit, referencing colors from the Theme collection. Variables from this collection are used within the components’ colors.

Editing Variables

You can easily edit variables in the Variables panel in Figma. Check out this official Figma documentation if you want to learn more. Here's how to edit them in the UI kit:

1. Open the Variables Modal
   • First, deselect everything on your canvas (press Esc or click an empty area)
   • Look at the right sidebar and find the 'Local variables' section
   • Click 'Open variables' to access the full list
2. Edit Variables
   • For quick edits: Simply click on a variable in the table and modify its value directly
   • For more advanced editing: Hover over a variable's row and click the 'Edit variable' icon (pencil symbol)
3. Using the Edit Modal. In this detailed view, you have several options:
   • Rename the variable for clarity
   • Add a helpful description to guide other team members
   • Modify the variable's value (e.g., color codes, numerical values)
   • Set the scope to control where the variable can be used
   • Add code syntax for developer handoff
   • Choose to hide the variable from publishing if it's for internal use only
4. Managing Variable Scope
   • For larger, more complex projects, consider carefully where each variable should be applied
   • Proper scoping improves the user experience by presenting only relevant options in specific contexts
   • For example, you might scope text color variables to appear only when editing text elements
5. Global Updates
   • One of the most powerful features of variables is their ability to update globally
   • When you change a variable's value, it automatically updates everywhere it's used in your design
   • This is more efficient than styles, which often require manual updates

‍

Remember: The power of variables lies in their reusability. By changing a single variable, you can instantly update all instances across your entire design, ensuring consistency and saving time.