June 18, 2025
The ShadcnDesign Academy is now available!
We are excited to announce that we just released our Academy packed with short, on-point videos on how to utilize our products to deliver outstanding shadcn/ui projects faster.
Explore our Academy - a comprehensive course on Figma and shadcn/ui, designed to equip you with essential skills for designing and building apps or websites. Learn through concise video guides, practical exercises, and gain expertise in theming, components, plugin, and Pro Blocks.
Course overview
What you will learn
Our comprehensive course is thoughtfully divided into five chapters, each brimming with concise video guides that focus on the most essential aspects of shadcn/ui kit for Figma, Figma to shadcn/ui plugin and Pro Blocks. By the end of this course, you will be equipped with the skills necessary to effectively utilize our kit, Pro Blocks, and plugin, empowering you to design and build sophisticated apps or websites with shadcn/ui.
Each chapter culminates in a practice lesson, allowing you to apply your newly acquired skills to real-life project examples, ensuring you gain practical, hands-on experience.
What you won't learn
Our course is designed to equip you with the skills needed to effectively use our products. We emphasize utilizing our products to help you design consistently in Figma with shadcn/ui. We will NOT cover the basics of Figma, coding, or React.
Chapters
Getting started
In this introductory chapter, you'll learn about the fundamentals of shadcn/ui, including its benefits and how it can streamline your design process. We will guide you through setting up the UI kit in Figma, providing you with a solid foundation to kickstart your design journey.
Theming
This chapter delves into the art of theming, where you'll master working with variables, including how to edit existing ones and create new ones. These skills will enable you to customize colors, fonts, radii, and more within the shadcn/ui kit for Figma, allowing you to tailor your designs to meet specific project needs and aesthetic preferences.
Demo lesson
Components
Explore the components chapter to learn how to customize, create, and effectively use components within the shadcn/ui kit for Figma. This knowledge will enhance your ability to build cohesive and reusable design elements, significantly improving your workflow efficiency.Demo lesson
Demo lesson
Pro Blocks
Dive into the world of Pro Blocks, where you'll learn everything from customization to adding new pro blocks in Figma. Additionally, you'll discover how to work with Pro Blocks in code, providing you with the flexibility to create dynamic and interactive designs that stand out.
Demo lesson
Plugin
Focus on our powerful plugin, designed to help you efficiently generate code for your components or themes. This chapter will teach you how to seamlessly integrate design and development, reducing the time and effort required to bring your projects to life.
Demo lesson
By the end of this course, you'll not only have a deep understanding of Figma and shadcn/ui but also the confidence to apply these tools to create professional-grade designs that meet your project's unique requirements.
Get access to the Academy
Our Academy is available to our Plus and Premium customers. If you already purchased the access, you can log in to the Academy with the email you used during the checkout.