How to Use Figma Make and VS Code Together: A Practical Setup for Mock API Login and UI Editing

Figma Make and VS Code workflow is one of the most practical combinations for planners, PMs, and non-engineers who need to build UI quickly and connect it to a real API later. But there’s one common pain point:

“If Figma Make can’t call APIs, how do I edit screens that appear after login?”

It feels like a big blocker at first. But once the structure is separated properly, the solution becomes surprisingly simple.

Here’s the entire answer in one sentence:

“Use a Mock API for Figma and a real API for VS Code — just maintain one shared UI file.”

Let’s break this into a practical, real-world guide you can use immediately.

---

1. Why Figma Make Can’t Show Post-Login Screens

Figma Make’s preview environment runs JavaScript but blocks all external network requests:

• fetch()
• axios.get()
• Any server authentication call → All fail.

So although Figma handles:

• Button clicks
• Page transitions
• Layout and typography
• Component behavior

…it still cannot handle:

• OTP requests
• Token generation
• Login success/failure from server

This means you cannot see or test any UI that exists past the login step.

---

2. The Real Solution → “Use a Mock API in Figma Make”

The cleanest and most reliable workflow is this:

Add a Figma-only Mock API file that always returns success

Example structure:

📁 Figma Make Preview
├─ LoginPage.tsx (same UI code)
│   └─ Only calls API
└─ /lib/projectClient.ts (Mock API)
    └─ Always returns a ‘success’ response

Mock API behavior:

• Always returns a successful login
• No actual authentication
• Instantly navigates to the next screen
• Enables full UI editing after login

This lets you freely adjust:

• Layout
• Buttons
• Components
• Spacing
• Typography
• Interaction patterns

…all without needing an active backend.

---

3. VS Code Uses the Real API

The production project keeps a completely separate API file:

📁 VS Code Project
├─ LoginPage.tsx (same UI code)
│   └─ Only calls API
└─ src/lib/projectClient.ts (Real API)
    └─ Sends real requests to the server

This version performs:

• OTP request
• Token issuance
• Login validation
• User data return

Everything works with full authentication — exactly as intended.

---

4. Core Rule: “LoginPage.tsx Stays Identical in Both Environments”

This is the strongest part of the workflow.

You maintain one UI file

Figma Make → Reads from /lib/projectClient.ts (Mock)

VS Code → Reads from src/lib/projectClient.ts (Real API)

LoginPage.tsx never changes. Only the API implementation changes under the hood.

Benefits:

• UI stays perfectly consistent
• Code logic separates cleanly
• Cursor understands the structure better
• Lower chance of side effects or broken flows

---

5. But Figma Can’t Create Folders… What Then?

True — Figma Make doesn’t let you manually create folders or files.

But the solution is simple:

Just ask with a prompt

Example:

“Create /lib/projectClient.ts and implement a Mock API that always returns a login success.”

Figma Make will automatically:

• Generate the file
• Create the folder
• Insert the code
• Connect imports correctly

You can mirror the VS Code folder structure with almost no manual work.

---

6. In the End, You Only Maintain Two Files

Here’s the entire workflow simplified:

File	Figma Make	VS Code
LoginPage.tsx	Same file	Same file
projectClient.ts	Mock API	Real API

This structure gives you:

• Full UI editing even after login
• A safe mock environment
• A real backend in development
• A stable, predictable flow
• Perfect compatibility with Cursor

In other words, UI work and backend work never block each other again.