Build from Figma

Plyy’s agent can look inside your Figma files: point it at a frame and it reads the design — layout, spacing, text, colors, and type styles.

There are two ways to connect. Plyy picks the best one automatically.

Option A — the Figma app is open (no setup)

If the Figma desktop app is running, Plyy talks to it directly:

1. In Figma: Figma menu → Preferences → Enable local MCP Server (needs a seat with Dev Mode access).
2. Done. Account → Integrations shows Figma app: detected.

This route has a bonus: the AI can read your current selection. Select a frame in Figma and just say:

Build my current Figma selection as the hero section.

No link needed.

Option B — an API token (works with Figma closed)

Connect Figma from Account → Integrations:

1. In Figma: Settings → Security → Personal access tokens → generate one (file read access is enough).
2. In Plyy: open Account, paste the token under Integrations, and hit Connect. Plyy verifies it with Figma and shows who’s connected.

Disconnect any time from the same place. If both are set up, the open app wins; the token is the fallback for when Figma isn’t running.

The workflow

1. In Figma, select the frame or component you want built.

2. Copy its link — ⌘L (or skip this if the app is open and you’re building the current selection).

3. Paste the link into the AI chat with what you want, e.g.:

   https://www.figma.com/design/…?node-id=12-34 Build this as the hero section of the homepage.

The agent fetches the design and implements it with your project’s existing components and styles. Works in plan mode too, if you first want a breakdown of how it would build it.

Tips

• Link specific frames, not whole pages — tighter selections produce more faithful builds.
• Auto-layout in Figma translates best: direction, gaps, and padding carry straight into the implementation.
• With the Figma app open, the design context is richer (component and variable names come through), so results tend to be more faithful.
• You can also paste a screenshot of the frame into chat (see Editing with AI) so a vision-capable model sees the pixels alongside the structure the agent fetches.
• Iterate in chat: “tighten the spacing to match the design” after the first pass works well.