Once you purchase the kit, you’ll receive the .fig file.
Import it directly into your Figma workspace — no plugins or setup required.
You’ll see pre-organized pages in this order:
Start at the Sitemap page.
This is your project map — an auto layout frame that helps you visualize your full site structure.
Add or remove pages as needed and the layout automatically adjusts.
Move to the Style Guide page, but first, configure the Global Styles for Text and Color to match your branding.
You can skip this step and go back if you want to do wireframes first.
Use the Batch Styler plugin to easily adjust fonts, weights, and scaling.
Text Styles
Organized for clarity using naming conventions like:
Color Styles
Everything is pre-labeled:
You can rename, adjust, or expand these however you like — for example, add tertiary colors or more neutrals.
Once your styles are configured, the Style Guide becomes your visual reference.
You’ll update fonts, typography, colors, and logos here — and these updates automatically reflect across the entire kit.
Updating the logos section, for example, also updates them on your header, footer, and ecommerce pages.
Go to the Components page — this is where the magic happens.
Header & Footer (Left side of canvas)
Content Components (Right side of canvas)
A full library of flexible pre-built sections:
Pro Tip: These components grow over time — you’ll get future updates automatically.
Main Container (Center of canvas)
Copy and paste this frame when building a page.
It’s pre-built with alternating sections for headlines and media.
Unhide or duplicate content blocks as you need them — for example, enable a 3-column grid or form component with one click.
If you want to customize deeply, right-click > Go to Main Component to edit globally, or Detach Instance for full design freedom.
This is where your actual web pages live.
You’ll find a pre-built auto layout frame sized for desktop (1440px) and mobile (430px).
Duplicate as many as you need for your pages.
Now, just paste in your Header, Container, and Footer frames — and start designing.
When you’re ready for inspiration, visit sites like Mobbin, SiteInspire, or Awwwards — or reference your favorite brand sites.
Unhide similar sections in your Container and replace the placeholder copy and visuals.
Your last page is Presentation — a Behance-ready template for showcasing your design work.
Just drop in your project visuals and you’re good to publish.
More layouts will be added in future updates.
Whether you’re a solo designer or leading a small agency, the Container Starter Kit helps you skip the messy setup and focus on what you do best — designing websites that feel thoughtful, modern, and human.