---
title: "Write Effective Prompts for Figma MCP"
aliases: [figma-prompts, figma-mcp-prompting]
tags: [figma, mcp, prompts, claude-code, design-to-code]
sources: [raw/Write effective prompts to guide the AI.md]
created: 2026-05-15
updated: 2026-05-15
---

# Write Effective Prompts for Figma MCP

The Figma MCP gives your AI structured design data — but the output quality depends entirely on how specific your prompt is. Treat it like briefing a teammate: the clearer your intent, the better the result.

## What a Good Prompt Controls

| Dimension | What to specify |
|-----------|----------------|
| Framework | SwiftUI, React, Chakra UI, Tailwind, etc. |
| Component source | `src/components/ui`, design system library |
| File target | exact file path to add/modify |
| Layout system | flexbox, grid, absolute, custom Stack |
| Codebase conventions | naming, file structure, existing patterns |

## Prompt Patterns

### Specify the framework or library
```
Generate iOS SwiftUI code from the selected Figma frame
Implement the selected frame using Chakra UI components
```

### Point to existing components
```
Generate this using components from src/components/ui
Implement this using our Stack layout component
```

### Target a specific file (add, don't create)
```
Add this component to src/components/marketing/PricingCard.tsx
```
> Use this when you want code inserted into an existing file, not a new one generated alongside it.

### Specify layout approach
```
Implement using flexbox layout only
Build this with CSS Grid — no absolute positioning
```

## Key Takeaways

- The MCP supplies structured Figma data; your prompt determines what the AI does with it
- Vague prompts → generic code; specific prompts → codebase-aligned output
- Always specify: framework, component source, target file path, layout system
- Use imperative language: "Add to", "Generate using", "Implement with"
- The more constraints you give, the less cleanup you do afterward

## Related

- [[wiki/claude-code/figma-mcp-trigger-tools|figma-mcp-trigger-tools]] — nudge the AI toward specific Figma MCP tools
- [[wiki/claude-code/figma-mcp-custom-rules|figma-mcp-custom-rules]] — bake prompt conventions into CLAUDE.md so you don't repeat them
- [[wiki/claude-code/figma-mcp-guide|figma-mcp-guide]] — Figma MCP overview and capabilities
- [[wiki/claude-code/figma-mcp-tools-reference|figma-mcp-tools-reference]] — full tool list with descriptions

## Sources

- [Write effective prompts to guide the AI — Figma Developers](https://developers.figma.com/docs/figma-mcp-server/write-effective-prompts/) (clipped 2026-05-13)
