Getting started
Welcome to the Academy!
What is shadcn/ui?
Getting started in Figma
Website Project (Lesson 1)
Theming
Introduction to theming
Primary color - Method 1. Tailwind CSS
Primary color - Method 2. Custom color
Neutral colors
Font family
Border radius
Creating new color variables
Example - Warning color variables
Creating new themes
Creating new typography styles
Dark mode
Website Project (Lesson 2)
Components
Introduction to components
Editing components
Creating new component variants
Creating new components
Adding custom icons - Method 1. Icon components
Adding custom icons - Method 2. Icon library
Working with the card component
Pricing card component
Website Project (Lesson 3)
Pro Blocks
Introduction to Pro Blocks
Simple landing page
Custom variables collection
Section Title component
Image properties
Pricing section block
Website Project (Lesson 4)
Plugin
Introduction to plugin
License key
API keys & Tokens
Google AI Studio
Anthropic AI
Best practices
Generating code
Exporting variables
Pro Blocks tab
Installing shadcn/ui
Generating code for the Pricing Card component
Website Project (Lesson 5)
Academy
Pro Blocks
Simple landing page

Simple landing page

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

Instructions

  1. Add a Frame and enable Auto Layout.
  2. Set the layout direction to vertical.
  3. Set the width to 1440px.
  4. Set both padding and gap to 0.
  5. Rename the frame to "Homepage".
  6. Drag in the Navbar block from Pro Blocks via Assets.
  7. Duplicate the block.
  8. Replace the duplicate with the Hero block from Pro Blocks.
  9. Repeat the duplicate and replace process for Features, Testimonials, Pricing, FAQ, and Footer.
  10. You now have a complete landing page built with Pro Blocks, ready for styling and further development.
Up next
Custom variables collection
In this lesson, you’ll learn about the custom variables collection used within our Pro Blocks and how to adjust it to your needs. We’ll walk through changing section padding and heading styles.