Skip to lesson
Exit
Front-End Craft Deep Dive1 / 2

2 min lesson

Designing in Cursor: the round-trip with Figma

Describe what "The interview screens raw React" changes in practice.

Step 1 of 2

The interview screens raw React. The job is something else: at Cursor, designers and design engineers prototype directly in the product, against a live design system, and publish finished work back to Figma. Knowing that loop is what separates a Design Engineer from a React generalist.

Start in the Agents WindowCursor's surface listing your agent runs; open a run to read its diff and search transcripts from the command palette. Press Enter for the full definition., not the editor. Over the last few releases Cursor shifted its primary surface away from the VS Code-style file tree toward an agent-first view. Reach it with the Agents Window button top-right, or Command+Shift+P then "Agents Window", and toggle back anytime. For a designer who doesn't want a debugger and a file tree staring back, this is the place to live.

Heard in the field

On the move toward an agent-first surface:

“I think over the past couple months we've seen a departure from this type of view and we've seen more of a focus on agents.”

THE FIGMA ROUND-TRIP

Interactive diagram. Step through it with the Next and Previous controls below, or Tab to a region to read its detail.

diagram: figma-roundtrip

Pull a design system in, prototype freely in Cursor, publish finished components back out. Figma stays the source of truth engineers build from.