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.

The tour is divided into two main parts:

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
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.

---

01. Figma

Figma serves as the design hub for Terra projects and acts as the single source of truth for all visual elements, components, and modules of the website. Each element designed in Figma has a direct correspondence with the source code, ensuring consistency and maintainability throughout the project.

This organized design system ensures that designers and developers work with the same references, eliminating ambiguities and accelerating the development process.

Organization

Figma files are organized into four main sections that directly reflect the code architecture:

• Foundations → They contain all design tokens used throughout the application.
• Components & Modules:
  • Components → Reusable design elements such as buttons, form fields, or cards, usually mapped directly to WordPress components and including different states and variations.
  • Modules → Self-contained sections built from multiple components, like hero areas or content blocks, which typically translate into WordPress module templates.
• Pages & Templates → Complete page layouts showing how modules and components come together across desktop, tablet, and mobile views. They are divided by badges (order of creating them).
• Dev Handoff → The main working area.

Dev Mode

Figma’s Developer Mode is essential for extracting exact specifications:

Key Information to Extract:

• Measurements and Spacing: Use Cmd/Ctrl + Click on elements to see distances
• Colors: Click on any element to see the exact color in HEX, RGB, or HSL
• Typography: Verify font family, size, weight, line height, and letter-spacing
• Effects: Shadows, blur, opacity
• CSS Code: Copy auto-generated CSS code for simple elements
• Assets: Export icons, images, and other resources in correct formats

Activate Dev Mode:

• Click the Dev Mode button in the bottom navbar
• Or use the shortcut: Option + F (Mac) / Alt + F (Windows)

Video

Learn More

You just need to know the basics for now, but if you’re feeling curious about Figma, you can learn more in Figma for developers.

---

02. Your Local Project

Once the project is installed locally and you open it in Visual Studio Code, it can feel overwhelming at first, so the key is knowing where each type of work lives.

Components

You’ll find components organized by category in the root of the project.

components/
  └── cards/
      ├── c--card-a.php
      ├── c--card-b.php
      └── g--card-01.php
   └── ctas/
      ├── c--cta-a.php
      └── c--cta-b.php

• Frontend work is hardcoded (HTML / CSS / JS)
• Backend work makes the same components dynamic using PHP

SCSS

When making the scss of a component or module, please locate it in:

src/
  └── scss/
      └── framework/
         └── components/
            └── cards/
               ├── _c--card-a.scss
               ├── _c--card-b.scss
               └── _g--card-01.scss
            └── ctas/
               ├── _c--cta-a.scss
               └── _c--cta-b.scss

Remember

Add the .scss file to the list in style.scss (located inside src/scss) in the corresponding category and alphabetically organized.

Modules

flexible/
   └── heros/
      └── hero-simple.php
   └── modules/
         └── cards-with-icon.php
         └── testimonials.php

• We usually work with one hero and multiple modules per page.
• Module names are not random and must match the names defined in Figma
• Frontend makes modules hardcoded, backend makes them dynamic

Scripts

If a component or module requires JavaScript:

src/
  └── js/
      └── modules/
         └── AccordionA.js

### Pages (templates)

• Pages are located in the root of the project.
• They are used to assemble modules and components together.
• Create a page template (for example, page-andres) for your testing.
• Each page must include: the template name, header and footer.

<?php
/*
Template Name: Insert here a name that'll help you locate it
*/
?>

<?php get_header(); ?>

// Your Content Here

<?php get_footer(); ?>

• Whatever you add between the header and footer will be visible in your local WordPress site when using that page template.

Video

---

03. Running the project locally

To work with the project, you need to have your local environment up and running so you can see changes reflected in WordPress.

01. Start XAMPP

• Open XAMPP and make sure the following services are running:
• Go to the Manager Servers tab
• Restart All so MySQL, ProFTPD and Apache start running

02. Start the local environment

• Open a terminal in the project root and run:

npm run virtual

• This command starts the local build process.
• As long as this process is running, any updates you make will be reflected automatically in your local environment.

03. Access the project

With XAMPP running and npm run virtual active:

• Open your local WordPress site in the browser. Example: localhost/wp-sei, localhost/wp-prop

Notes

• Keep the terminal running while you work
• If you stop npm run virtual, your changes will not be compiled
• If something doesn’t update, restart the command and refresh the browser

---

04. Your Local Wordpress

Your local WordPress environment is your safe testing space, anything you do here will not affect production or any live content.

Accessing WordPress locally

To access WordPress in your local environment, open your browser and add /wp-admin to your local URL:

http://localhost/wp-sei/wp-admin

Log in using your the credentials that appear in the canvas of the project’ Slack channel. This will take you to the WordPress admin panel.

A safe environment to experiment

Your local WordPress is meant for testing and development:

• You can create, edit, and delete content freely
• Nothing you do here will be reflected in production
• It’s the best place to experiment, test layouts, and validate changes
• Since you’ve already installed the project and imported All-in-One WP Migration, your local environment contains the same content and structure as production.

Creating pages and using templates

To test your work:

• Go to Pages located in the left sidebar → Add New
• Create a new page (for example, a personal testing page)
• On the right sidebar, select the page template you created in the code
• Publish or update the page
• View the page in the browser to see your changes

This is how you connect your code (templates, modules, components) with what you see on screen.

Working with ACF

ACF (Advanced Custom Fields) is mainly used during backend development to manage dynamic content, so if you’re working on the backend, this will be especially useful for you.

Note

Even if you’re not working on the backend, it’s still important to understand that ACF exists and how it works, since modules and components are connected to ACF fields and this directly affects how content is rendered on the page.

• You’ll use ACF (Advanced Custom Fields) to manage dynamic content
• Modules and components are connected to ACF fields
• You can edit field values directly in the WordPress admin to test different scenarios
• ACF allows you to control how content is rendered without changing the code every time.

Video

---

Next Steps

Now that you have a general understanding of how a Terra project is structured — from Figma to your local WordPress setup — you’re ready to dive deeper into the specifics of your role.

Choose your path:

• Frontend Developers → Continue to Frontend Basics to learn how to build components and modules with HTML, SCSS, and JavaScript.

• Backend Developers → Head to Backend Basics to understand how to make components dynamic using PHP, ACF fields, and WordPress templates.

Both paths will guide you through practical examples and best practices to help you contribute effectively to Terra projects.