The Schema Figma file is organized into nine pages. Each one has a clear role, and once you get familiar with them, navigating the file becomes second nature. Let's walk through them.
This is the first page you see when you open the file. It contains a quick introduction to Schema, links to the other pages, and a summary of the core concepts. You've probably already been through it - if not, it's worth a quick read before moving on.
This is where the actual design work happens. The Canvas contains your layout frames - both desktop and mobile contexts. You build compositions here by combining sections, and you can preview responsive behavior by dragging your layout between the desktop and mobile areas.
If Schema has a "home base," this is it. You'll spend most of your time here.
Layouts contains full-page compositions - complete, ready-to-use page designs that combine sections and components together. Think of these as references or starting points. When you need to design a full page and don't want to start from scratch, grab a layout and customize it on the Canvas.
This is your reference page for the design system's visual foundation. You'll find the full color palette, typography scales, font families, spacing values, and any other base tokens that feed into the ACSS framework. find more details at Style Guide Page
Components are the smallest reusable pieces - cards, buttons, navigation items, form elements, and other atomic parts. Unlike sections, components typically stay linked (not detached) because they show up frequently across different sections and layouts.
When you swap a card style or change a button variant, you're working at this level.
Sections are the mid-level building blocks. Each one is a self-contained component - a hero, a feature grid, a testimonial block, a CTA, and so on.
In the recommended workflow, you start with section components for speed and consistency, then detach them when you need more creative control. This is one of Schema's core ideas - scaffold with components, then customize freely.
Pages contains assembled, full-page layouts showing how sections stack together to form complete website pages - Home, Single Page, Contact, Single Post, and Post Archive. Use these as a reference for how sections combine in real-world compositions.
An empty scratch space for work-in-progress. Use this page for experimental layouts or ideas that aren't ready to live on the Canvas yet.