Academypro blocks

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.
27 of 45