This collection highlights my ongoing explorations at the intersection of AI and design systems, along with the tools we’ve been building at Southleft to bridge the gap between design and engineering. From new workflows and MCP integrations to AI-powered auditing tools, these posts share experiments, insights, and practical applications that help digital teams ship faster with higher quality.
Introducing a new model for AI-enhanced product development, where structured context flows seamlessly between design and engineering.
**Doing More With Your Design System in Figma 🎥**
A hands-on workshop hosted with Joey Banks (Baseline Design), covering how to build and scale robust design systems directly in Figma. This session dives into structuring flexible, maintainable components and libraries; connecting design and engineering using Figma MCP; and exploring how tools like Figma Make and Storybook bring your system to life beyond the canvas.
A diagnostic and reporting tool for Figma that goes far beyond what Dev Mode MCP offers, giving AI and design teams deep, project-wide intelligence—from token usage to plugin debugging to cross-project audits. Unlike generator tools, Console MCP provides raw, structured context for analysis, validation, and scalable design system diagnostics.
Part 1: Why Figma Console MCP?
Explains the limitations of Dev Mode MCP and introduces Console MCP as a way to scan, audit, and monitor all layers of your Figma projects—including real-time console logs and system-wide diagnostics.
Part 2: From System-Wide Awareness to Pinpoint Precision
Demonstrates how Console MCP lets you audit multiple projects at scale, zoom in on component details, spot inconsistencies early, and achieve true cross-project intelligence—all within Figma.
Part 3: Figma Console MCP vs. Dev Mode MCP – Component Creation
A side-by-side demo of Figma Console MCP and Dev Mode MCP generating the same component, highlighting the value of raw, adaptable data and framework flexibility (including a bonus: generating for Fractal, not just React or Storybook). Shows how pairing both MCPs gives teams both fast scaffolding and deep system intelligence that can align to any stack.
Figma MCP → Web Components → React Storybook → Story UI
A behind-the-scenes look at an end-to-end workflow for turning Figma components into production-ready UI.
Using Claude Desktop with Figma MCP, Story UI, and Design Systems Assistant