From Figma to Code: A Designer's Journey

Two years ago, I couldn't write a single line of JavaScript. Today, I build my own prototypes in React and think in component systems. Here's how learning to code transformed my design practice.

Why Bother?

The most common question I get from other designers: "Why would you learn to code when that's what engineers are for?"

The answer is simple: understanding the medium makes you better at designing for it.

Where to Start

If you're a designer thinking about learning to code, here's my recommended path:

1. HTML & CSS — Start here. These are the building blocks of everything on the web.
2. JavaScript basics — Variables, functions, loops. Don't try to learn everything at once.
3. React fundamentals — Component thinking maps directly to how we design in Figma.
4. Tailwind CSS — As a designer, this will feel natural. It's like designing with utility classes.

The Unexpected Benefits

Learning to code didn't just help me communicate with engineers. It fundamentally changed how I design:

• I think in systems and components from the start
• I understand state management and design for all states
• I can build interactive prototypes that feel like the real thing
• I make better handoff decisions because I know what's easy and what's hard

The Balance

I'm not trying to become a full-stack engineer. I'm a designer who codes — and that distinction matters. Code is a tool in my design toolkit, not my primary craft.