TensorFlow or Figma First: What Beginners Should Learn

# TensorFlow — a minimal training loop.
# This is the "hello world" of machine learning.

import tensorflow as tf
import numpy as np

# Build a small model
model = tf.keras.Sequential([
    tf.keras.layers.Dense(64, activation="relu", input_shape=(20,)),
    tf.keras.layers.Dense(3, activation="softmax"),
])

model.compile(
    optimizer="adam",
    loss="sparse_categorical_crossentropy",
    metrics=["accuracy"],
)

# Dummy data — replace with your real dataset
X = np.random.randn(1000, 20).astype("float32")
y = np.random.randint(0, 3, 1000)

# Train the model
history = model.fit(
    X, y,
    epochs=10,
    batch_size=32,
    validation_split=0.2,
    verbose=0,
)

# What this teaches:
# - Layers, activations, loss functions, optimisers
# - The fit/compile/evaluate pattern
# - The training loop, abstracted by Keras
#
# What this is NOT:
# - Designing a UI
# - Building a user-facing app
# - Anything visual, in any sense
#
# TensorFlow is the model layer. It runs in the backend,
# not in the browser, and it produces predictions — not pixels.

// Figma — a component structure.
// Figma is not code, but this JSX shows what a designer
// actually builds inside Figma using auto-layout, components,
// and variants.

// A Card component with variants — the equivalent of a Figma
// component with a "default" and a "highlighted" variant.

function Card({ title, description, imageUrl, variant = "default", onClick }) {
  const styles = variant === "highlight"
    ? { border: "2px solid #0B6E75", background: "#E4F1F1" }
    : { border: "1px solid #DCE4E2", background: "#FFFFFF" };

  return (
    <article
      style={{
        borderRadius: 12,
        padding: 20,
        display: "flex",
        flexDirection: "column",
        gap: 12,
        cursor: onClick ? "pointer" : "default",
        ...styles,
      }}
      onClick={onClick}
    >
      {imageUrl && (
        <img
          src={imageUrl}
          alt=""
          style={{ width: "100%", borderRadius: 8 }}
        />
      )}
      <h3 style={{ fontSize: 18, fontWeight: 600 }}>{title}</h3>
      <p style={{ fontSize: 14, color: "#5B6B72" }}>{description}</p>
    </article>
  );
}

// What this teaches:
// - Components are reusable UI elements
// - Variants keep styles consistent
// - Props map to Figma's component properties
// - Layout, spacing, color, and typography all matter
//
// What Figma produces:
// - A clickable prototype
// - A design system
// - A handoff document for developers
#
// What Figma does NOT do:
// - Train a model
// - Run on a GPU
# - Make predictions
//
// Figma is the interface layer. It produces pixels, not predictions.

# Building an AI product — where each tool fits.
# The clearest answer to "TensorFlow or Figma first?"

# ── Step 1: Someone defines the problem ──
# A product manager decides:
# "We want an app that recommends outfits based on photos."
#
# ── Step 2: A designer uses Figma ──
# - Mocks up the app's screens
# - Designs the upload flow, the results screen, the error states
# - Prototypes the interaction
# - Hands off to developers
#
# Figma's output: a design for the interface.
#
# ── Step 3: An ML engineer uses TensorFlow ──
# - Trains a model on a dataset of photos and outfit labels
# - Evaluates it against accuracy and fairness metrics
# - Deploys it as an API
#
# TensorFlow's output: a model that can make predictions.
#
# ── Step 4: A developer (React, Node) builds the app ──
# - Wires the interface (from Figma) to the model (from TensorFlow)
# - Builds the upload, calls the prediction API, displays results
# - Handles auth, payments, monitoring
#
# The developer's output: a working product.
#
# ── The two answers ──
#
# "Learn Figma first if..." you want to work on the interface,
#   the user experience, and the visual product. Your work is
#   designing what people see and touch.
#
# "Learn TensorFlow first if..." you want to work on the model,
#   the training pipeline, and the prediction quality. Your work
#   is designing what the system learns and how it generalises.
#
# Both paths are real. Both are valuable. They are not the
# same job, and one does not teach you the other.
#
# The wrong answer: trying to learn both at the same time as a
# beginner. You will learn neither well. Pick one, go deep,
# then add the other later — if you need it.