Angular vs Figma Comparison for Beginners

// Angular — a simple component with data binding
// The first pattern every Angular beginner writes.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>Users</h2>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }} — {{ user.email }}
      </li>
    </ul>
  `,
})
export class UserListComponent {
  users = [
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' },
  ];
}

// What this proves:
// - You understand standalone components (Angular 17+)
// - You can render a list with *ngFor
// - You use TypeScript, not plain JS
// - You know the shape of a component (template + logic)

// Angular is a real framework — it gives you structure,
// but requires more setup than Figma for a first screen.

// Angular — a service that fetches data via HttpClient
// The pattern every Angular interview expects you to write.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UserService {
  private readonly apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getAll(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }
}

// What this proves:
// - You understand dependency injection
// - You use HttpClient, not fetch() directly
// - You type the response (not `any`)
// - You know Observables (RxJS) as Angular's async primitive

// Angular is widely used in enterprise teams — banks,
// large SaaS products, and internal tools — because
// the structure is consistent across projects.

// Figma — design tokens as a JSON structure
// The pattern that separates a beginner file from a
// team-ready design system.

{
  "color": {
    "primary": {
      "500": "#0B6E75",
      "700": "#0A5A61"
    },
    "neutral": {
      "100": "#F1F4F3",
      "500": "#8A9398",
      "900": "#1E2A36"
    },
    "danger": {
      "500": "#D94848"
    }
  },
  "space": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "full": "999px"
  },
  "font": {
    "family": "Inter",
    "size": {
      "body": "16px",
      "h2": "24px",
      "h1": "32px"
    }
  }
}

// What this proves:
// - You think in reusable tokens, not one-off values
// - You can name and document your decisions
// - Your design system is a system, not a grid of screens
// - A developer could implement this

// In Figma, tokens live as "styles" and "variables" —
// but the underlying thinking is the same. Hiring
// managers want to see that you can think in systems,
// not just produce screens.

// Figma — component structure for a Button
// (Pseudocode representation of how a real component
// is organised in a Figma file.)

Button
├── Properties
│   ├── Variant: Primary | Secondary | Ghost
│   ├── Size: S | M | L
│   ├── State: Default | Hover | Focus | Disabled
│   ├── Icon: None | Left | Right
│   └── Text: "Button label"
├── Tokens used
│   ├── background.primary (Primary variant)
│   ├── text.onPrimary
│   ├── space.sm / space.md
│   └── radius.md
├── Auto-layout
│   ├── Direction: row
│   ├── Padding: space.sm space.md
│   ├── Gap: space.xs
│   └── Alignment: center
└── Accessibility notes
    ├── Focus ring: 2px offset, primary.700
    ├── Disabled: opacity 0.4, not colour-only
    └── Contrast: 4.5:1 minimum

// What this proves in a portfolio:
// - You build components, not pages
// - You think in variants and states
// - You design with tokens, not magic numbers
// - You consider accessibility as part of the design
// - You can hand off to a developer without a call

// This kind of file is what a UI/UX hiring manager
// actually looks at when reviewing a portfolio case
// study — not the final screenshot.