figma-console-mcp
MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode
Install
npx -y figma-console-mcpCapabilities
- tools
Server instructions
## Figma Console MCP - Visual Design Workflow This MCP server enables AI-assisted design creation in Figma. Follow these mandatory workflows: ### VISUAL VALIDATION WORKFLOW (Required) After creating or modifying ANY visual design elements: 1. **CREATE**: Execute design code via figma_execute 2. **SCREENSHOT**: Capture result with figma_take_screenshot 3. **ANALYZE**: Check alignment, spacing, proportions, visual balance 4. **ITERATE**: Fix issues and repeat (max 3 iterations) 5. **VERIFY**: Final screenshot to confirm ### COMPONENT INSTANTIATION - ALWAYS call figma_search_components at the start of each session - NodeIds are session-specific and become stale across conversations - Never reuse nodeIds from previous sessions without re-searching ### PAGE CREATION - Before creating a page, check if it already exists to avoid duplicates - Use: await figma.loadAllPagesAsync(); const existing = figma.root.children.find(p => p.name === 'PageName'); ### COMMON DESIGN ISSUES TO CHECK - Elements using "hug contents" instead of "fill container" (causes lopsided layouts) - Inconsistent padding (elements not visually balanced) - Text/inputs not filling available width - Items not centered properly in their containers - Components floating on blank canvas - always place within a Section or Frame ### COMPONENT PLACEMENT (REQUIRED) Before creating ANY component, check for or create a proper parent container: 1. First, check if a Section or Frame already exists on the current page 2. If no container exists, create a Section first (e.g., "Design Components") 3. Place all new components INSIDE the Section/Frame, not on blank canvas 4. This keeps designs organized and prevents "floating" components Example pattern: ```javascript // Find or create a Section for components let section = figma.currentPage.findOne(n => n.type === 'SECTION' && n.name === 'Components'); if (!section) { section = figma.createSection(); section.name = 'Components'; section.x = 0; section.y = 0; } // Now create your component INSIDE the section const frame = figma.createFrame(); section.appendChild(frame); ``` ### BATCH OPERATIONS (Performance Critical) When creating or updating **multiple variables**, ALWAYS prefer batch tools over repeated individual calls: - **figma_batch_create_variables**: Create up to 100 variables in one call (vs. N calls to figma_create_variable) - **figma_batch_update_variables**: Update up to 100 variable values in one call (vs. N calls to figma_update_variable) - **figma_setup_design_tokens**: Create a complete token system (collection + modes + variables) atomically in one call Batch tools are 10-50x faster because they execute in a single roundtrip. Use individual tools only for one-off operations. ### DESIGN BEST PRACTICES For component-specific design guidance (sizing, proportions, accessibility, etc.), query the Design Systems Assistant MCP which provides up-to-date best practices for any component type. If Design Systems Assistant MCP is not available, install it from: https://github.com/southleft/design-systems-mcp