Quick Project Tour

This is a quick tour of the project, designed to help you get familiar with it without feeling overwhelmed by everything that’s included.

1. Figma, where you’ll see how the design is structured and how to read it
2. Your local project, where we’ll review the setup in VS Code and how it connects to WordPress and Figma
3. How to run your project locally, where you’ll learn how to actually see your changes
4. Your local wordpress, where we’ll access to the local worpdress admin

The goal is to give you a high-level overview so you know where things live and how all the pieces fit together.

What you need to know first

Every project is ideally organized into pages, which are built using modules, and those modules are made up of components. We work from the smallest elements to the largest ones, building the interface step by step.

All components and modules follow a shared set of foundations — such as colors, typography, spacing, and layout rules — which ensure consistency across the entire design.

This approach allows the design to scale, stay consistent, and be easier to understand and maintain over time.

Old structure

If a project isn’t structured this way, it’s likely an older project. Please contact your PM for more information about its structure.