The ShadcnDesign Academy is now available!

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.

If you want to speed up the early theme exploration stage, you can also start with our shadcn Theme Generator to create a solid shadcn/ui theme direction before refining it inside Figma. It is a simple way to test colors, balance contrast, and arrive at a more consistent theme system faster.

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

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.