Getting started

How to Use Shadcn UI Kit for Figma as a Library

The Shadcn UI Kit for Figma can be shared across your team and projects as a library, ensuring consistency and efficiency in your design workflow. To learn more about Figma libraries, check out the official documentation. Here's how to set it up and use it in this UI kit:

1. Publish Your Library
   • Open your Figma document containing all the Shadcn UI Kit components and styles.
   • Navigate to the Team Library modal (in Assets menu - Book icon).
   • Click 'Publish' to turn your file into a library.
   • Important: Publishing a large library like Shadcn UI Kit may take 5-30 minutes the first time due to its numerous components and variants. Don't close Figma during this process.
2. Access the Library in Other Projects. In any Figma project where you want to use the Shadcn UI Kit:
   • Look for the Assets panel in the left sidebar.
   • Click on this icon to open the Assets panel.
   • You should see the Shadcn UI Kit listed under the Team Library section.
3. Enable the Library in Other Projects
   • While in your project, open the Team Library modal.
   • Find the Shadcn UI Kit in the list of available libraries.
   • Toggle the switch next to it to 'ON' to enable the library in your current project.
4. Using the Library
   • Once enabled, all components and styles from the Shadcn UI Kit will appear in your project's Assets panel.
   • You can now drag and drop these components into your designs or use the styles in your project.
   • Any updates made to the main Shadcn UI Kit library can be synced across all projects using it, ensuring everyone has the latest version.

Key Benefits of Using Shadcn UI Kit as a Library:

• Consistency: Maintain a unified design language across all your projects.
• Efficiency: Quickly access pre-built components and styles without recreating them.
• Collaboration: Easily share the UI kit with your entire team or organization.
• Version Control: Update the main library to sync changes across all linked projects automatically.
• Flexibility: Customize components in individual projects without affecting the main library.

Remember, you can update the library by publishing changes from the original Shadcn UI Kit file. This allows you to evolve your design system over time while keeping all your projects in sync.

Learn Figma

If you're new to Figma, we highly recommend visiting its Getting Started help page or watching the Beginner's Guide to Figma on its YouTube channel.

Components

Shadcn UI Kit for Figma is built with components. These are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can learn more about Components and how to use them here.

Variants

The UI kit uses Variants, which allow you to group and organize similar components into a single container. This simplifies the component library and makes it easier for everyone to find what they need. Here are more details on Variants.

Auto Layout

The system's components were built with the Auto Layout feature. Auto Layout creates designs that grow to fill or shrink to fit and reflow as their contents change—just like on a real website! You can learn more about Auto Layout here.

Styles

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.

Variables

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.

‍