Django vs Figma — Comparison for Beginners

# Django — a small view and URL.
# The minimum viable backend — and a real portfolio piece.

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="home"),
    path("products/", views.product_list, name="product_list"),
    path("products/<int:pk>/", views.product_detail, name="product_detail"),
]

# views.py
from django.shortcuts import render, get_object_or_404
from .models import Product

def home(request):
    return render(request, "home.html")

def product_list(request):
    products = Product.objects.filter(in_stock=True).order_by("-created_at")
    return render(request, "products/list.html", {"products": products})

def product_detail(request, pk):
    product = get_object_or_404(Product, pk=pk)
    return render(request, "products/detail.html", {"product": product})

# models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    in_stock = models.BooleanField(default=True)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

# What this teaches:
# - Django routes URLs to views
# - Views fetch data from models and render templates
# - The ORM handles database queries
#
# What Django does NOT do:
# - Decide how the page looks
# - Choose fonts, colors, or spacing
# - Make the interface easy to use
#
# That's the designer's job — with Figma.

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

// A ProductCard component with variants — the equivalent
// of a Figma component with "default" and "featured" variants.

function ProductCard({ product, variant = "default", onAdd }) {
  const styles = variant === "featured"
    ? { 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,
        ...styles,
      }}
    >
      <img
        src={product.image}
        alt={product.name}
        style={{ width: "100%", borderRadius: 8 }}
      />
      <h3 style={{ fontSize: 18, fontWeight: 600 }}>{product.name}</h3>
      <p style={{ fontSize: 16, color: "#0B6E75", fontWeight: 600 }}>
        ₹{product.price}
      </p>
      <button onClick={() => onAdd(product)}>Add to cart</button>
    </article>
  );
}

// What this teaches:
// - Components are reusable UI elements
// - Variants keep styles consistent
// - Layout, spacing, color, and typography matter
#
// What Figma produces:
// - A clickable prototype
// - A design system
// - A handoff document for developers
//
// What Figma does NOT do:
// - Serve the app to users
// - Handle authentication
# - Query the database
//
// Figma is the interface layer. Django is the server.

# The full pipeline — Figma + Django together.
# This is how a real product team ships a feature.

# ── Step 1: A designer defines the interface in Figma ──
# - Wireframes the product list page
# - Designs the product card, filter, and empty state
# - Prototypes the "click to add to cart" flow
# - Hands off specs, spacing, and assets to engineers
#
# Figma's output: a design the team agrees on.

# ── Step 2: A backend developer builds the Django server ──
# - Models the Product table
# - Writes views for list, detail, and add-to-cart
# - Exposes the data via template rendering or DRF API
# - Handles authentication, cart state, and orders
#
# Django's output: the data and logic behind the interface.

# ── Step 3: A frontend developer wires them together ──
# - Implements the Figma design in HTML/CSS or React
# - Calls the Django backend for data
# - Handles loading, empty, and error states
#
# Frontend's output: the interface users actually see.

# ── Step 4: The result ──
# Users visit the live URL:
#   - They see the design (from Figma)
#   - Their data is real (from Django)
#   - Their clicks work (from frontend)
#
# The product exists because all three layers came together.

# ── Why the comparison is a category error ──
#
# 1. Different jobs
#    - Django: how the app works (backend logic)
#    - Figma: how the app looks and feels (design)
#
# 2. Different people
#    - Django: backend developers
#    - Figma: product designers
#
# 3. Different skills
#    - Django: Python, databases, HTTP, security
#    - Figma: visual design, interaction, user research
#
# Neither replaces the other. Both are necessary.
#
# ── The real question ──
#
# "Which one should I learn first?" depends entirely on
# which role you want to play:
#
#   - Backend developer / full-stack → Django first
#   - Product designer / UI/UX → Figma first
#
# If you want to build your own full app end to end,
# you need both — but one at a time.