Schema's component collection follows an atomic design approach. Small, single-purpose components (buttons, icons, inputs) combine into functional groups (cards, forms), which then combine into complete sections and pages.
All component variants live on a single ❖ Components page in the Figma file, organized into labeled section frames - one per category. This keeps everything in one place rather than scattered across pages.
https://www.figma.com/design/NJkfgz1fYHXZDdJt8OiqFw/Schema?node-id=2242-263
Most components share the same variant vocabulary, structural hierarchy, and layer naming - making the system predictable and swapping between variants efficient.
Select any component instance and use Figma's Swap instance panel to browse alternatives from the same category.
This works across all component categories - cards, buttons, section intros, blockquotes, toggles, and more. Because related components are grouped under shared categories, the swap panel always shows you relevant alternatives.
The simplest way to create a new component is to duplicate an existing one that's close to what you need. This gives you proper layer names and a consistent structure by default - much easier than building from scratch.
From there, adjust the layout, add or remove elements, and create new variants as needed. Once ready, place it in the appropriate category section on the ❖ Components page so it stays organized and shows up correctly in the swap panel.
Components are the building blocks of sections. A typical section combines several components - for example, a testimonial section might use a Section Intro and a grid of Testimonial Cards.
When working with sections (see Working with sections), components inside stay linked by default. Editing a component on the Components page updates it everywhere it appears. Keep components linked where possible to maintain consistency across your design.