Getting Started
Get started with Shadcn/Studio Figma files and access all the design resources included in your plan.
This guide will help you find your purchased Figma files, open them in your workspace, and start designing faster.
Accessing Your Figma File
Once you've completed your purchase, you'll have access to the following Figma files depending on your plan.
You can watch the quick walkthrough here:
Follow these steps to access your purchased Figma files:
- Log in to your account from the Shadcn/Studio login page
- From the navigation menu, click on Account and open the purchases page.
- Under the Products section, you will find all your purchased products.
- Click on the Designs tab to access, Here, you will be able to access the Figma files included in your plan.
- Click on the Figma Access Now button. The Figma file will open directly in your Figma workspace.
- You now have full access to the file inside your Figma account.
Available Figma Files
Depending on your plan, you may get access to one or more of the following Figma files.
| Figma File | What it includes | Best for | Recommendation |
|---|---|---|---|
| shadcn/ui Figma UIKit (lightweight) | A lightweight foundation file with core components, styles, variables, and themes from the Shadcn/Studio Figma system. | Starting a new project quickly or connecting the kit as a shared library in project. | Recommended for most users. Use this file as your main starting point for fresh projects. |
| shadcn/ui Figma UIKit + Blocks (Recommended) | Includes the Shadcn/Studio Figma system along with pre-built UI blocks organized by section type. | Building page layouts faster using ready-made sections without designing from scratch. | Use this if you want access to ui kit & blocks. To keep the file lightweight, remove unnecessary themes, components, and blocks, you do not need. |
| shadcn/ui Figma UIKit + Templates | Includes the Shadcn/Studio Figma system with complete, ready-to-use page templates built from the same components and blocks. | Starting from full page layouts and customizing them directly. | Recommended only if you want to use and customize ready to use templates directly. |
New to Figma?
If you're just getting started with Figma, we recommend going through the basics before working with the kit. It will make everything much easier to navigate.
Recommended Ways to Use Shadcn/Studio Figma Files
Shadcn/Studio Figma files can be used with both Figma Free and Figma Pro plans.
The best setup depends on your Figma plan and whether you are starting a new project or working with an existing one.
| User type | Best way to use | Why |
|---|---|---|
| Figma Free users | Duplicate the file and design inside the duplicated file. | Free plan users can create components, styles, and variables, but they cannot publish them as a reusable library across multiple files. |
| Figma Pro users (Single/Teams) | Publish the UIKit as a shared library and use it across project files | Paid plans allow publishing styles, components, and variables as team libraries. |
Figma Free Plan
The Figma Free plan is suitable for exploring the UI kit, working on personal projects, or starting quickly without setting up a shared library.
Free users can open, duplicate, edit, and use the Shadcn/Studio Figma files. However, library publishing and advanced team library workflows are limited on the Free plan.
For New Projects
For a new project, the easiest way is to duplicate the Shadcn/Studio Figma file and start designing inside the duplicated file.
This gives you access to the components, variables, themes, blocks, and templates in one place without needing any extra setup.
Recommended workflow:
- Choose from Available Figma Files
- Open that Figma file.
- Duplicate it to your drafts or workspace.
- Start designing directly inside the duplicated file.
- Customize components, colors, typography, variables, and themes based on your project needs.
For future updates, refer to the Applying Updates - If You Duplicated the Figma File section to understand how to manually bring the latest changes into your duplicated file.
Figma Pro Plan
Using Shadcn/Studio UIKit as a Figma Library
If you are using Figma Pro (Professional, Organization, Enterprise, or Education plan) you can publish the Shadcn/Studio UIKit file as a shared Figma library and use it across your project files.
Publishing the UIKit as a library allows your team to reuse components, styles, variables, and themes from one central source.
Even if you are a Figma Pro user, you can still duplicate the Shadcn/Studio Figma file and use it directly in your workspace (just like figma free user workflow). However, we recommend using the published library workflow for a cleaner, more scalable setup. It helps your team maintain consistency, reuse shared components, receive library updates, and manage the design system from one central source.
Prerequisites: Before you publish the UI kit to your workspace
A few things to check and set up before you publish the kit as a shared library. Taking care of these upfront saves you from having to clean things up later.
- Name it clearly: Give meaningful name to the file before publishing, something like
Shadcn/Studio UI Kit - Source. - Choose the Right File to Publish: We provide three files, So pick the one that matches your project's needs before publishing.We recommend to use shadcn/ui Figma UIKit + Blocks for publishing the library which enable you to use components and blocks.
- shadcn/ui Figma UIKit - if your project only needs components, publish this file.
- shadcn/ui Figma UIKit + Blocks - if your project only needs components and blocks, publish this file.
- shadcn/ui Figma UIKit + Templates - not recommended as a shared library. Templates are full pages built as standalone components. They're designed to be used directly in your project file.
- Remove used assets:Remove any unused themes, components, and blocks from your project file before publishing it as a library. This keeps the file lightweight, organized, and easier to maintain.
Step 1: Publish the library
- Open the shadcn/ui Figma UIKit + Blocks file in your Figma workspace.
- Go to the Assets panel (left sidebar) and click the book icon (Library) to open the Team Library modal.
- Add an optional description, review the list of assets
- Click Publish to turn your file into a reusable library.
Your kit is now published as a library and available to use across your Figma files. For more details, refer to the official Figma Publish Library Docs.
Step 2: Enable the Published Library in a Project File
After publishing the Shadcn/Studio Figma library, you can enable it inside any new or existing Figma project file. Once enabled, you can access shared components, blocks, styles, and variables directly from theAssets panel.
Enable the Library for Team Usage
You can also enable the library from your team settings if you want it available across your team files.
This method is useful for teams, agencies, or organizations that want Shadcn/Studio to work as a shared design system.
- Go to the Figma file browser.
- Click All projects.
- Click the dropdown arrow next to your team name.
- Select View settings.
- Under the Libraries, click View team's libraries.
- Find the Shadcn/Studio library.
- Click the library name to view its assets.
- Turn on the library or choose where it should be available.
- Select where the library should be enabled, such as Design files, FigJam files, Slide decks, or All files.
Step 3: Start designing
Once the library is enabled:
- You'll see all Shadcn/Studio UIKit (your duplicated) components and styles available in the Assets panel.
- Drag components directly into your canvas or apply styles as needed.
- When the main your published library gets updated, you'll be able to sync changes across your projects - keeping everything up to date automatically.
For future updates, refer to the Applying Updates - If You Are Using the Published Library section to understand how to manually bring the latest changes into your published library.
Benefits of Using the Kit as a Library
- Design consistency: Keep components, styles, variables, and themes consistent across different files, projects, and team members.
- Faster workflow: Access ready-made shadcn/ui components, blocks, and styles directly from the Assets panel without rebuilding everything from scratch.
- Single source of truth: Use the UIKit file as your central design system, so your team works from the same components, tokens, and visual standards.
- Easier team collaboration: Share the same library across your team or organization, making it easier for designers to follow the same system.
- Centralized updates: Update components, styles, or variables once in the source library and publish the changes for connected files to receive updates.
- Flexible overrides:Customize text, colors, icons, images, and other supported properties in project files without changing the original source component.