Skip to content
Netwrix Technical Documentation

Chapter 1 - Figma Structure

Introduction

Section titled “Introduction”

Figma serves as the design hub 🎨 for the NETWRIX project 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.

The Source of Truth 📐

Section titled “The Source of Truth 📐”

Why Figma?

Section titled “Why Figma?”

Figma has been established as the single source of truth for the NETWRIX project for the following reasons:

AspectBenefit
🎨 Design ConsistencyAll design tokens (colors, typography, spacing, etc.) are centralized in Figma, ensuring visual coherence across all pages and components
👨‍💻 Developer HandoffProvides exact specifications that developers can extract directly through Developer Mode, eliminating guesswork and reducing errors
🤝 CollaborationEnables designers, developers, and stakeholders to work simultaneously, commenting and reviewing in real-time

Figma Organization

Section titled “Figma Organization”

Main Structure

Section titled “Main Structure”

The NETWRIX Figma file is organized into four main sections that directly reflect the code architecture:

1. Foundations 🧱

Section titled “1. Foundations 🧱”

Foundations are the most basic building blocks of the design system. They contain all design tokens used throughout the application.

What’s included in Foundations:

  • ✍️ Typography: Defines the font family, font sizes, weights, and line heights. Uses Hubot Sans and Syne typefaces with specific variations for headings and regular text.

  • 🎨 Colors: Complete color system used in the project, organized into:

    • Color Palette: Primary colors (Navy, Purple, Cream, etc.)
    • Background Colors: Colors for backgrounds (Navy Dark, Purple, Cream, etc.)
    • Extended palette with variations for hover, active, and disabled states

  • 📏 Spacing: Consistent spacing system based on multiples of 8px using tokens like f--sp-a, f--sp-b, f--sp-c, f--sp-d, f--sp-e, f--sp-f, f--sp-g where each token represents a specific multiple of the base measure.

  • 📐 Grid System: Responsive column system based on Breakpoints

  • ↔️ Gaps: Spacing system between elements using tokens like f--gap-a, f--gap-b for consistent spacing between components.

  • ⚙️ Other tokens: Global variables, border radius, aspect-ratio, etc.

Figma → Code Mapping:

Figma: Foundations / Typography → Code: src/scss/framework/foundation/font/
Figma: Foundations / Colors → Code: src/scss/framework/foundation/color/
Figma: Foundations / Spacing → Code: src/scss/framework/foundation/spaces/
Figma: Foundations / Grid System → Code: src/scss/framework/foundation/grid/
Figma: Foundations / Gaps → Code: src/scss/framework/foundation/gap/
Figma: Foundations / Background → Code: src/scss/framework/foundation/background/

2. Components & Modules 🧩

Section titled “2. Components & Modules 🧩”

This section contains all reusable components of the design system, organized by functional type.

Component Categories examples:

  • Hero Components: Different hero section variants for page headers

    • Main Hero
    • Centered Hero
    • Solution Hero
    • Hero with Form
    • Hero with Image
    • Hero with Image and Optional Form Field
    • Soft Grid Hero
    • And more variations

  • Cards: Card components with multiple variants (Card E, Card R, Card U, Card AC, Card AG, etc.)

    • Text + Column of Card
    • Cards with… (multiple options)
    • List of Heroes Cards
    • Cards Slider

  • CTAs (Call to Actions): Call-to-action components

    • Big Gradient CTA
    • Small Gradient CTA
    • Grid CTA
    • Soft Grid CTA
    • Image CTA
    • 50/50 CTAs

  • Interactive Components: Interactive elements

    • Buttons (with multiple states and variants)
    • Checkboxes
    • Accordions
    • Modals
    • Filters
    • Search

  • Lists & Collections: Components for displaying information collections

    • Featured Posts
    • Awards List
    • Resources List
    • Customer Stories List
    • Webinars List
    • Events (Upcoming, Past Events)
    • Sessions List
    • Speakers List
    • Partners List
    • FAQs List

  • Media Components: Image and video-related components

    • Media + Text
    • Image Slider
    • Photo Marquee
    • Full Width Media

  • Navigation: Navigation components

    • Header
    • SubNav
    • SideNav
    • Footer

  • Forms: Form components

    • Form fields
    • Demo forms
    • Contact forms
    • Subscribe forms

Figma → Code Mapping examples:

Figma: Main Hero → Code: src/flexible/hero/MainHero.astro
Figma: Solution Hero → Code: src/flexible/hero/SolutionHero.astro
Figma: Centered Hero → Code: src/flexible/hero/CenteredHero.astro
Figma: Hero with Form → Code: src/flexible/hero/HeroWithForm.astro
Figma: Card E → Code: src/components/card/CardE.astro
Figma: Card U → Code: src/components/card/CardU.astro
Figma: Button → Code: src/components/btn/
Figma: Big Gradient CTA → Code: src/flexible/modules/BigGradientCta.astro
Figma: Grid CTA → Code: src/flexible/modules/GridCta.astro
Figma: Media + Text → Code: src/flexible/modules/MediaText.astro
Figma: Accordion → Code: src/components/accordion/
Figma: Awards List → Code: src/flexible/modules/AwardsList.astro
Figma: Customer Stories List → Code: src/flexible/modules/CustomerStoriesList.astro
Figma: FAQs List → Code: src/flexible/modules/FAQsList.astro
Figma: Leadership List → Code: src/flexible/modules/LeadershipList.astro

Note on SCSS: Each component also has its corresponding style file in:

Figma: [Component] → Code SCSS: src/scss/framework/components/[component]/

3. Pages & Templates

Section titled “3. Pages & Templates”

This section shows how components and modules combine to create complete pages. They are organized into Batches representing different development phases:

Organization by Batches:

  • BATCH 1: First iteration of pages (pink section)
  • BATCH 2: Second iteration (yellow section)
  • BATCH 3: Third iteration (blue section)
  • BATCH 4: Fourth iteration (green section)
  • BATCH X: etc.

Page Types examples:

  • Product pages
  • Solution pages
  • Resource pages (Blog, Webinars, Events)
  • Institutional pages (About, Leadership, Partners)
  • Conversion pages (Demo, Contact, Thank You)

Figma → Code Mapping:

Figma: [Page Name] Template → Code: src/pages/[lang]/[page-structure].astro

4. Dev Handoff

Section titled “4. Dev Handoff”

Special section containing technical specifications and references for the development team, including component states, responsive behaviors, and edge cases.

Naming Convention Rules

Section titled “Naming Convention Rules”

Critical Principles

Section titled “Critical Principles”

The NETWRIX project maintains a 1:1 relationship between names in Figma and code. This direct correspondence is fundamental to maintaining synchronization between design and development.

Example Mapping:

  • Figma Module > Component: Hero with Form (hero-f)

  • Code Module File: src/flexible/hero/HeroWithForm.astro

  • Code Component File: src/components/hero/HeroF.astro

  • CSS Class: src/scss/framework/components/hero/_c--hero-f.scss

  • Figma Component: Card E

  • Code File: src/components/card/CardE.astro

  • SCSS File: src/scss/framework/components/card/_c--card-e.scss

Naming Patterns

Section titled “Naming Patterns”

Components:

  • In Figma: Descriptive names in English with spaces or hyphens (e.g., Card E)
  • In code: PascalCase for Astro components (e.g., CardE.astro)
  • In SCSS: Prefix c-- (or g-- if it uses Global Components library) followed by kebab-case (e.g., c--card-e, g--card-03)

About Global Components Library 📦

Section titled “About Global Components Library 📦”

The NETWRIX project utilizes Global Components, a pre-built HTML and SCSS framework developed internally by Terra. This framework provides readily usable components that can be easily integrated into projects by simply copying and pasting the code.

This framework allows the NETWRIX project to leverage tested, reusable components while maintaining the flexibility to create custom components when specific design requirements demand it. More details about working with Global Components will be covered in later chapters.

Modules:

  • In Figma: Descriptive names (e.g., Customer Stories List, Awards List)
  • In code: PascalCase (e.g., CustomerStoriesList.astro, AwardsList.astro)
  • Location: src/flexible/modules/

Component Types:

  • Different component types use alphabetical suffixes to distinguish between distinct designs
  • Example: Card A, Card E, Card U, Card AC, Card AG are different card components, not variations
  • In code: CardA.astro, CardE.astro, CardU.astro, CardAC.astro, CardAG.astro

Component Variations:

  • Each component can have different variations or states within the same design type
  • Variations are indicated with modifier suffixes like --second, --third, etc.
  • Example: Card E (default), Card E variation 2, Card E variation 3
  • In SCSS: c--card-e (default), c--card-e--second, c--card-e--third
  • The default variation doesn’t require a modifier suffix, additional variations use --second, --third, etc.

Foundations:

  • Tokens use alphabetical letter nomenclature (a, b, c, d, e, f, g)
  • In Figma: Name: f--sp-a, Name: f--gap-a, Font a - 70px, Font b - 46px, etc.
  • In code: Converted to CSS/SCSS variables with descriptive names
Section titled “Navigation in Figma”

How to Find Components

Section titled “How to Find Components”

To navigate efficiently in the NETWRIX Figma file:

  1. Use the Pages Panel (left side):

    • Foundations: For basic design tokens
    • Components & Modules: For reusable components
    • [Specific batches]: To view complete pages

  2. Use Asset Search (Cmd/Ctrl + /):

    • Type the component name you’re looking for
    • Filter by type (Components, Styles, etc.)

  3. Layer Navigation:

    • Use the layers panel to explore each component’s hierarchy
    • Components are organized with clear names and logical groupings

  4. Frames and Sections:

    • Similar components are grouped in same-colored frames
    • Large sections have descriptive names in colored labels

Using Developer Mode

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

Activating Developer Mode:

  • Click the “Dev Mode” button in the top-right corner
  • Or use the shortcut: Option + F (Mac) / Alt + F (Windows)

Design-to-Code Workflow 🔄

Section titled “Design-to-Code Workflow 🔄”

Step 1: Explore Foundations 🔍

Section titled “Step 1: Explore Foundations 🔍”

Description: Before creating any component, familiarize yourself with the design tokens available in the Foundations section.

  • Review available typography (Font a through Font g for larger sizes, using Hubot Sans and Syne)
  • Verify the color palette
  • Consult the spacing system (f--sp-a, f--sp-b, f--sp-c, f--sp-d, f--sp-e, f--sp-f, f--sp-g)
  • Consult the gap system (f--gap-a, f--gap-b)
  • Understand the grid system and breakpoints

Step 2: Locate the Component in Figma 🎯

Section titled “Step 2: Locate the Component in Figma 🎯”

Description: Find the specific component you need to implement in the Components & Modules section.

  • Navigate to the “Components & Modules” page
  • Locate the component using the pages panel or search
  • Inspect all component variations if multiple designs exist (e.g., default, —second, —third)
  • Check all interactive states (normal, hover, active, disabled, focus)
  • Review responsive states if available

Step 3: Extract Specifications 📋

Section titled “Step 3: Extract Specifications 📋”

Description: Activate Developer Mode and extract all necessary technical specifications.

  • Activate Developer Mode (Option/Alt + F)
  • Document:
    • Dimensions (width, height, padding, margin)
    • Colors used (background, text, borders)
    • Typography (font-family, size, weight, line-height)
    • Internal and external spacing
    • Border radius, shadows, effects
  • Export necessary assets (icons, background images)

Step 4: Map to Code Structure 🗂️

Section titled “Step 4: Map to Code Structure 🗂️”

Description: Identify where the component code should live in the project structure.

  • For basic components: src/components/[type]/
  • For complex modules: src/flexible/modules/
  • For heroes: src/flexible/hero/
  • For styles: — Normal components: src/scss/framework/components/[type]/ — Global components: src/scss/global-components/[type]/
  • For foundations: src/scss/framework/foundation/[type]/

Step 5: Implementation 💻

Section titled “Step 5: Implementation 💻”

Description: Develop the component following exact Figma specifications.

  • Create the component’s .astro file
  • Implement semantic HTML structure
  • Create corresponding SCSS file
  • Use classes and tokens (or extend them on scss file) defined in Foundations.
  • Implement states and variants
  • Ensure responsive behavior according to breakpoints

Step 6: Verification ✅

Section titled “Step 6: Verification ✅”

Description: Compare the implementation with the Figma design.

  • Verify exact measurements with Developer Mode
  • Check pixel-perfect colors and measurements
  • Test all states (hover, active, focus, disabled) if applicable
  • Validate responsiveness across all breakpoints
  • Review accessibility (contrast, keyboard navigation, ARIA labels)

Best Practices 💡

Section titled “Best Practices 💡”

Next Steps 🚀

Section titled “Next Steps 🚀”

Now that you understand the Figma structure and how it relates to code, continue with Chapter 2: Foundations, where we’ll dive deeper into:

  • ✍️ Detailed typography system
  • 🎨 Complete color palette and its uses
  • 📏 Spacing and grid system
  • 💻 Technical implementation of each foundation in SCSS
  • 📚 Usage guides and best practices for each token