Skip to content
Terra Docs
Blog
User
My Profile & Progress
Log out

Figma Basics

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

Section titled “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

Section titled “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

Section titled “Video”

It’s important to watch this video to have full context of the explained topics. If the video doesn’t load or stops with an error, you can watch it directly on Loom.

Learn More

Section titled “Learn More”

Knowledge Check

Test your understanding of this section

Loading questions...