How to Read React Code as a Designer

Reasons why it feels alien

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. The good news is that there are fewer patterns to learn than it seems.

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 your page/component/modal frame in the canvas.
<div className="p-4 text-gray-900"> — a container element. In Figma terms: a frame or rectangle 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 (colors, fonts, font size, padding, gap, border, corner radius, etc.). 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:

Tailwind class	Figma equivalent
`p-4`	Padding: 16
`text-black`	Text colour: black
`rounded-xl`	Corner radius: 12
`border`	Stroke: 1px

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 }, it means "stop treating this as markup/plain text and evaluate it as JavaScript":

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

This renders "Hello, Amarneethi" if name variable 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.

DIY Exercise

Info

Copy paste the code snippets below into an AI chat and ask it to explain them. Try to understand the patterns without worrying about the syntax.

1. Component Composition

AI models generate self-contained components. Understanding how smaller pieces (a button, a card, an input) nest inside larger ones (a form, a dashboard, a page) lets you speak the same language as the generated code and request changes precisely — "move the avatar component inside the header" instead of "move that circle thing up."

Example 1 Code

function Avatar({ src, name, size = 'md' }) {
  const sizes = {
    sm: 'w-8 h-8 text-xs',
    md: 'w-12 h-12 text-sm',
    lg: 'w-16 h-16 text-base',
  };
  return (
    <div
      className={`${sizes[size]} rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-bold shrink-0`}
    >
      {name.charAt(0)}
    </div>
  );
}

function UserCard({ name, role }) {
  return (
    <div className='flex items-center gap-3 p-3 rounded-xl bg-white/60 backdrop-blur border border-gray-200'>
      <Avatar name={name} />
      <div>
        <p className='font-semibold text-gray-900'>{name}</p>
        <p className='text-sm text-gray-500'>{role}</p>
      </div>
    </div>
  );
}
function CompositionExample1() {
  const team = [
    { name: 'Aarav Mehta', role: 'Design Lead' },
    { name: 'Priya Sharma', role: 'Engineer' },
    { name: 'Rohan Kapoor', role: 'PM' },
  ];
  return (
    <div className='space-y-3 p-6 bg-gray-50 rounded-2xl max-w-sm'>
      <h3 className='font-bold text-gray-800 text-lg'>Design Team</h3>
      {team.map((person) => (
        <UserCard key={person.name} name={person.name} role={person.role} />
      ))}
    </div>
  );
}

How to Read React Code as a Designer

Design Team

Brand Refresh

Mobile App

Design System

Notifications