How to Read React Code as a Designer

It's Closer to Figma Than You Think

When designers see React code for the first time, the instinct is to back away. Angle brackets, curly braces, unfamiliar keywords — it looks like a different language. But the underlying structure maps almost directly onto what you already know from Figma.

Let's break it down.

The Basic Shape of a React Component

Here's the simplest React component you'll encounter:

export default function HelloWorld() {
  return (
    <div className="p-4 text-gray-900">
      <p>Hello, world</p>
    </div>
  );
}

Reading it top to bottom:

• export default function HelloWorld() — this is the component's name. Like a Figma component named "HelloWorld".
• return (...) — everything inside here is what gets rendered on screen. Think of it as the canvas.
• <div className="p-4 text-gray-900"> — a container element. In Figma terms: a frame with padding and a text colour.
• <p>Hello, world</p> — a paragraph of text inside that frame.

className vs class

If you've ever seen HTML, you might know that class is used to apply styles. In React, it's className instead — a small quirk, but important to know so it doesn't trip you up.

Tailwind Classes Are Figma Properties

When you see className="p-4 text-gray-900 rounded-xl border", you're looking at design decisions written as utility classes:

Once you know a handful of these mappings, AI-generated code becomes much more readable. You can scan a className and immediately visualise what the element looks like.

Nesting = Layers

The nesting in JSX (the HTML-like part of React) maps directly to Figma's layer hierarchy:

<div>          {/* Frame */}
  <div>        {/*   Frame */}
    <p>Title</p>  {/*     Text */}
    <p>Body</p>   {/*     Text */}
  </div>
</div>

Each indented level is a child inside a parent. Exactly like nesting frames in Figma.

Curly Braces Mean "JavaScript Here"

Whenever you see { and } inside JSX, it means "stop treating this as markup and evaluate it as JavaScript":

<p>Hello, {name}</p>

This renders "Hello, Amarneethi" if name is the string "Amarneethi". Think of it like a Figma text layer with a variable bound to it.

What to Do When You Don't Understand Something

Copy the confusing snippet and paste it into Claude or ChatGPT with the prompt: "Explain this React code to me as if I'm a designer who knows Figma but not code."

You'll get a plain-English explanation. Do this enough times, and the patterns start to feel familiar on their own.

The Payoff

The moment you can read a React component and roughly understand its structure, you become a much more effective collaborator with AI. You can verify that what it generated matches your intent. You can ask for specific changes. You can spot when it's gone off-track.

You don't need to write React from scratch to benefit from understanding it. You just need to read it well enough to drive.