NumPy vs Figma — Comparison for Beginners

# NumPy — compute the data that will appear on a dashboard.
# NumPy's job: fast, correct numbers.

import numpy as np

# Imagine 90 days of sales data — one number per day
np.random.seed(42)
daily_sales = np.random.normal(loc=5000, scale=800, size=90).round(2)

# Core metrics — the numbers a dashboard actually shows
total = daily_sales.sum()
average = daily_sales.mean()
median = np.median(daily_sales)
best_day = daily_sales.max()
worst_day = daily_sales.min()
std = daily_sales.std()

print(f"Total sales (90 days): ₹{total:,.0f}")
print(f"Average daily sales:   ₹{average:,.0f}")
print(f"Median daily sales:    ₹{median:,.0f}")
print(f"Best day:              ₹{best_day:,.0f}")
print(f"Worst day:             ₹{worst_day:,.0f}")
print(f"Std deviation:         ₹{std:,.0f}")

# Trend — compare last 30 days to first 30 days
first_30 = daily_sales[:30].mean()
last_30 = daily_sales[-30:].mean()
growth = (last_30 - first_30) / first_30 * 100
print(f"Growth:                {growth:+.1f}%")

# Weekly totals — a common dashboard chart
weekly = daily_sales.reshape(-1, 7).sum(axis=1)
print("Weekly totals:", weekly.round(0))

# What NumPy does here:
# - Computes metrics without loops
# - Handles the statistics cleanly
# - Outputs numbers a dashboard can render
#
# What NumPy does NOT do:
# - Decide how the metrics are displayed
# - Pick the colors, fonts, or layout
# - Render a chart, a card, or a page
#
# That's Figma's job — plus a frontend framework like React.

// Figma — the design side of the same dashboard.
// Figma is not code — but its plugin API is JavaScript.
// Here is a small Figma plugin that creates a metric card,
// which is exactly what a designer does by hand.

// A simple Figma plugin that builds a metric card.
// Designers build these by hand — this shows what "the design" actually is.

const card = figma.createFrame();
card.name = "Metric Card";
card.resize(280, 140);
card.cornerRadius = 12;
card.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }];
card.strokes = [{ type: "SOLID", color: { r: 0.9, g: 0.9, b: 0.9 } }];
card.strokeWeight = 1;
card.layoutMode = "VERTICAL";
card.primaryAxisSizingMode = "AUTO";
card.counterAxisSizingMode = "AUTO";
card.paddingTop = 20;
card.paddingBottom = 20;
card.paddingLeft = 24;
card.paddingRight = 24;
card.itemSpacing = 8;

// Label
const label = figma.createText();
await figma.loadFontAsync({ family: "Inter", style: "Medium" });
label.characters = "TOTAL SALES";
label.fontSize = 11;
label.letterSpacing = { value: 1.5, unit: "PIXELS" };
label.fills = [{ type: "SOLID", color: { r: 0.5, g: 0.5, b: 0.5 } }];
card.appendChild(label);

// Value — the number a data scientist would hand over
const value = figma.createText();
await figma.loadFontAsync({ family: "Inter", style: "Bold" });
value.characters = "₹4,48,320";
value.fontSize = 32;
value.fills = [{ type: "SOLID", color: { r: 0.1, g: 0.1, b: 0.15 } }];
card.appendChild(value);

// Trend indicator
const trend = figma.createText();
await figma.loadFontAsync({ family: "Inter", style: "Medium" });
trend.characters = "▲ 12.4% vs last period";
trend.fontSize = 12;
trend.fills = [{ type: "SOLID", color: { r: 0.1, g: 0.6, b: 0.3 } }];
card.appendChild(trend);

figma.currentPage.appendChild(card);
figma.viewport.scrollAndZoomIntoView([card]);

// What this Figma plugin does:
// - Creates a card frame with layout
// - Adds a label, value, and trend text
// - Applies colors, fonts, and spacing
// - Renders it on the canvas for designers to review
//
// What it does NOT do:
// - Compute the "₹4,48,320" number
// - Calculate the "+12.4%" trend
// - Decide that this data means anything
//
// That's NumPy's job.

# The pipeline — NumPy computes, Figma designs, code renders.
# This is how a real analytics team actually works.

# ── STEP 1: A data scientist writes a Python script ──
#
#   import numpy as np
#   daily_sales = load_from_database()
#   metrics = {
#       "total":     float(daily_sales.sum()),
#       "average":   float(daily_sales.mean()),
#       "growth":    float(compute_growth(daily_sales)),
#       "weekly":    daily_sales.reshape(-1, 7).sum(axis=1).tolist(),
#   }
#   save_as_json(metrics, "dashboard_metrics.json")

# ── STEP 2: The JSON looks like this ──

{
  "total": 448320,
  "average": 4981,
  "growth": 12.4,
  "weekly": [35000, 37200, 33900, 41000, ...]
}

# ── STEP 3: A designer opens Figma ──
#
# The designer already has a "Metric Card" component and a
# "Dashboard" template. They place the metrics — Total, Average,
# Growth, Weekly Trend — into the layout, decide typography,
# spacing, colors, and states. They build the clickable
# prototype the client will review.

# ── STEP 4: A frontend developer implements it ──

# In React (or any framework):
#   const metrics = await fetch("/dashboard_metrics.json");
#   return (
#     
#       
#       
#     
#   );

# ── STEP 5: The final product ──
#
# The user opens the dashboard and sees:
#   - A clean layout with metric cards
#   - Numbers computed by NumPy
#   - Design that came from Figma
#   - Code that ties them together
#
# NumPy answered: "What are the numbers?"
# Figma answered:  "How should they look?"
# React answered:  "How do we render them live?"

# ── Why beginners get confused ──
#
# Both tools appear in "learn to build dashboards" tutorials.
# They look equally important in a project, but they operate
# at completely different layers. You would not ask whether
# you should learn "arithmetic or painting" — you need both,
# and they serve different purposes in the same product.