Introduction to Pro Blocks

In this chapter, you will learn how to use and customize our Pro Blocks component to design beautiful and responsive websites or applications.

Figma guides

While our academy primarily focuses on mastering our UI kit and plugin, we understand you might want to explore Figma's broader capabilities. For a deeper dive into Figma's extensive functionalities beyond our direct scope, you'll find links to their official resources below.

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.

Up next
Simple landing page
This lesson teaches you how to build a simple landing page layout using Pro Blocks and Auto Layout in Figma.