Getting started

There are two methods to get started depending on your needs and Figma plan.

Figma free plan

If you have a free Figma account you can import the UI kit file to your drafts in your Figma account and open the file. You can start designing right away!

Figma paid plan

You can also import the file to your drafts, move the file to your Figma workspace and publish the file 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. Please note: Publishing the UI kit to your team library is optional.

Here's the guide on how to publish the UI kit to your workspace in Figma. To learn more about Figma libraries, check out the official documentation.

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

The 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

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.

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.