Flask vs Figma Comparison for Beginners

# Figma component structure — how a real design system is organised
# This is the thinking behind good Figma files, not a code file.

# Pages:
#   01 — Foundations (color, typography, spacing, shadows)
#   02 — Components (buttons, inputs, cards, modals)
#   03 — Patterns (form flows, navigation, empty states)
#   04 — Screens (Home, Login, Profile, etc.)
#   05 — Prototypes (interactive flows)

# Component naming:
#   Button/Primary/Default
#   Button/Primary/Hover
#   Button/Secondary/Default
#   Input/Text/Default
#   Card/Product/Compact
#   Modal/Confirmation

# Why this structure matters:
# - Team members can find what they need fast.
# - Design changes propagate through the component system.
# - Developers get a clean spec to build against.

# What separates a Figma beginner from a Figma professional:
# - Organised file structure (not 500 unnamed layers).
# - Component variants for button/input states.
# - Auto-layout so screens adapt to content.
# - Consistent spacing scale (4, 8, 12, 16, 24, 32, 48).
# - Accessibility-first thinking (contrast, focus states).

# Why Figma is in such high demand:
# - Every modern product team uses it.
# - Design → developer handoff is dramatically easier.
# - It combines design, prototyping, and collaboration in one tool.

# app.py — a minimal Flask backend that powers a designed product
# Notice how this pairs with a Figma design.

from flask import Flask, jsonify, request

app = Flask(__name__)

# Sample data — in production this would come from a database
projects = [
    {"id": 1, "name": "Marketing site", "status": "active"},
    {"id": 2, "name": "Mobile redesign", "status": "in_review"},
]


@app.get("/health")
def health():
    return jsonify(status="ok")


@app.get("/api/projects")
def list_projects():
    return jsonify(projects)


@app.post("/api/projects")
def create_project():
    data = request.get_json()
    if not data or "name" not in data:
        return jsonify(error="name is required"), 400

    new_project = {
        "id": len(projects) + 1,
        "name": data["name"],
        "status": data.get("status", "active"),
    }
    projects.append(new_project)
    return jsonify(new_project), 201


if __name__ == "__main__":
    app.run(debug=True)


# Why this pairs with Figma:
# - Figma defines the screens: project list, project card, create modal.
# - Flask defines the data: what fields exist, what validation applies.
# - Both describe the same product from different angles.
#
# What this teaches:
# - Routes, requests, JSON responses.
# - How to model product data.
# - How design decisions translate into backend constraints.

# Figma → Flask workflow — how real teams use both tools together

# 1. Discovery and planning
#    - Product manager writes user stories.
#    - Designer sketches flows in Figma (low-fidelity).
#    - Developer and PM review before investing in code.

# 2. Design
#    - Designer builds component library in Figma.
#    - Screens are composed from components.
#    - Interactive prototype shows click-through flows.
#    - Accessibility check (contrast, keyboard focus, labels).

# 3. Developer handoff
#    - Developer inspects Figma:
#        * Spacing values (auto-layout)
#        * Colors (from foundations)
#        * Text styles
#        * Component variants
#    - Developer implements screens in frontend (HTML/CSS/React).
#    - Developer wires the UI to Flask endpoints.

# 4. Backend work
#    - Developer builds Flask routes for each screen state.
#    - Data validation matches the fields in the design.
#    - Backend errors map to UI error states.

# 5. Iteration
#    - Figma changes propagate to code via a shared design system.
#    - Feedback from users flows back into Figma, then into Flask.

# Why both matter:
# - Figma without Flask is just a prototype.
# - Flask without Figma is a working app that often looks unpolished.
# - Together they make products people actually want to use.

# What this teaches:
# - Design and engineering are two sides of the same product.
# - The best product people learn both — at least at a basic level.
# - Figma + Flask is a rare and valuable combination.