figma-design-workflowlisted

# Figma Design Workflow Figma is not a screenshot oracle. When a Figma file, selection, component library, design system, or design handoff exists, use the official Figma MCP to retrieve structured design context and preserve the intent encoded in variables, components, layout, assets, and Code Connect mappings. ## Connection policy Prefer Figma's official **remote MCP** (`https://mcp.figma.com/mcp`) and its OAuth flow. Do not store Figma credentials in the repository. Before a Figma-dependent task, inspect Agentit MCP state. If Figma is not configured, use Agentit's MCP catalog/setup path rather than silently approximating a referenced design. Useful current client setup patterns: - Claude Code: `claude mcp add --transport http figma https://mcp.figma.com/mcp` - Codex CLI: `codex mcp add figma --url https://mcp.figma.com/mcp` - Cursor/other MCP clients: configure the remote HTTP URL using the client's supported remote-MCP flow. Authentication/available tools are controlled by Figma and the user's seat/permissions. Treat missing write capabilities as a real constraint, not an error to work around with unofficial write automation. ## Design-to-code workflow When implementing from Figma: 1. Resolve the exact frame/selection whenever possible instead of reading an entire large file. 2. Retrieve structured design context: hierarchy, layout, sizes, spacing, typography, colors/variables, components, and relevant assets. 3. Check Code Connect/component mappings when availa