L1: Figma and HTML Integration

Figma and HTML Integration

In Module 5, we focused heavily on backend logic, APIs, and functional code structure. Module 6 shifts the focus to the presentation layer: the User Interface (UI) and User Experience (UX). Translating a static design from a tool like Figma into functional, pixel-perfect HTML/CSS is historically one of the most time-consuming and error-prone phases of the SDLC.

This lesson covers how AI Architects use Claude to bridge the gap between design intent and frontend code.

What is Figma? (The Architectural View)

To the average user, Figma is a cloud-based UI/UX design and prototyping application. To an AI Architect, Figma is the Visual System of Record —the single source of truth for your frontend architecture before a single line of code is written.

Unlike legacy design tools (like Photoshop or Illustrator) that treat designs as flat canvases of pixels, Figma is structurally designed to mimic the Document Object Model (DOM) of a web browser.

Why Figma is Critical for Agentic Workflows:

The Node Tree Structure: Under the hood, a Figma file is not an image; it is a massive, deeply nested JSON object. Every text box, button, and frame is a "node" with explicit mathematical properties (width, height, X/Y coordinates, border radii). This makes it mathematically compatible with LLMs like Claude, which excel at translating structured JSON data into HTML/React components.
Auto Layout (The Flexbox Bridge): Figma features a core mechanic called "Auto Layout." When a designer uses Auto Layout, they are effectively writing CSS Flexbox visually. An Auto Layout frame with a vertical direction and 16px spacing maps exactly a 1:1 ratio to Tailwind CSS classes like flex flex-col gap-4. Claude uses this mathematical mapping to generate pixel-perfect responsive code without guessing.
The Visual BRD: In an agentic SDLC, you can think of the Jira ticket as the backend BRD (Business Requirements Document) and the Figma file as the Visual BRD. It provides the explicit boundaries—colors, typography, and spacing variables—that constrain the UI Generation Agent from hallucinating rogue designs.

1. The Design-to-Code Chasm

In a traditional workflow, a designer creates a mockup in Figma, hands it off, and a frontend developer spends days translating border radii, flexbox layouts, and hex codes into a DOM tree.

The Agentic Workflow:

Claude transforms this process from manual translation to automated compilation. By feeding design data into Claude, you effectively treat the UI mockup as a "Business Requirements Document" for the frontend. However, just like backend generation, if you do not provide strict architectural boundaries, Claude will generate messy, unmaintainable markup.

2. Vision-Driven Extraction vs. Programmatic Translation

There are two primary architectural patterns for passing Figma designs to Claude:

Pattern 1: Vision-Driven Extraction (The Screenshot Method)
- How it works: You provide Claude 3.5 Sonnet with a high-resolution export (PNG/JPEG) of the Figma frame and prompt it to recreate the layout.
- Best For: Rapid prototyping, building internal dashboards, or bootstrapping a new project where exact pixel-perfection is less critical than structural layout.
- The Vulnerability: Vision models estimate spacing and colors. If the Figma design uses #1A2B3C, the vision model might output #1A2B3D.
Pattern 2: Programmatic Translation (The API/JSON Method)
- How it works: Using a Figma plugin or the Figma REST API, your pipeline extracts the exact node tree of the design into a massive JSON payload. You pass this JSON to Claude along with a strict prompt: "Map these Figma text nodes to<p> tags, and these Auto Layout frames to flex containers."
- Best For: Enterprise design systems and pixel-perfect production code.
- Architectural Advantage: Because the LLM is reading raw structural data rather than guessing from an image, it mathematically guarantees correct colors, typography tokens, and spacing variables.

3. Prompting for Semantic and Maintainable HTML

A common failure state when generating HTML with LLMs is "Div Soup"—a massive nested hierarchy of <div> tags with inline styles.

Architectural Constraints for UI Generation:

When setting up your CLAUDE.md or System Prompt for UI tasks, you must explicitly enforce modern web standards:

Semantic HTML: "You are strictly forbidden from using <div> for clickable elements. You must use <button> or <a>. You must use semantic landmarks like <header>, <main>, <section>, and <footer>."
Utility-First CSS (Tailwind): "Do not write custom CSS or inline styles. You must use Tailwind CSS utility classes. If a Figma element has a gap of 16px, map it to gap-4."
Component Extraction: "Do not output a single 500-line HTML file. Analyze the design and break it down into reusable functional components (e.g., Header.jsx, Sidebar.jsx, ProductCard.jsx)."

4. Claude Artifacts and the Feedback Loop

When integrating design to code, the feedback loop must be visual. Reading a 300-line generated HTML file in a terminal does not tell you if the UI looks right.

Leveraging Artifacts:

Claude's native UI (and supported SDK environments) feature "Artifacts"—a dedicated window that instantly compiles and renders generated code (React, HTML/JS/CSS, SVG).

The Workflow: You upload the Figma design. Claude generates the React component and renders it instantly in the Artifact window.
Iterative Refinement: You (or a Reviewer Agent) compare the rendered Artifact to the Figma original. You can then prompt: "The padding on the hero button is too small compared to the design, and the grid needs to wrap on mobile screens. Update the component."
This creates a highly iterative, visual TDD (Test-Driven Development) loop for the frontend before any code is committed to the repository.

5. Managing Design Tokens

Enterprise frontend architecture relies on Design Systems (variables for colors, typography, spacing).

If your company's primary brand color is updated in Figma, you don't want to manually prompt Claude to change every component.

The Architecture: Extract your Figma design tokens into a JSON file (e.g., theme.json).
Inject this file into the context window for all UI generation tasks.
The Prompt: "Whenever the design calls for the primary brand color, you must use the variable var(--color-primary) defined in theme.json, never the hardcoded hex value."

This ensures that all AI-generated code remains synchronized with the global design system.