Welcome to the Academy!
Explore our 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.
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.
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.
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.
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.