<insights>
Design Systems
Everything we’ve filed under Design Systems — newest first.
← All insights19 posts · newest first
Design Systems
Context-Based Design Systems, Revisited
A year into the AI-driven design systems era, the framework holds up. Here’s what’s changed, what’s clearer, and why context still beats autonomy.
Design Systems
Designers, You’re Not at the Kids’ Table Anymore
There’s never been a better time for designers to ship real code, and you don’t need to “learn to code” to do it.
Design Systems
Code to Design Isn’t the Point. System Parity Is.
Figma’s new Claude Code to Figma workflow captures screens. Figma Console MCP understands systems. Both are useful, they just operate at different layers of the stack.
AI
Introducing Our New Course: AI & Design Systems
We’re teaming up with Brad and Ian Frost to share a grounded, real-world approach to using AI inside design system workflows while preserving the quality, clarity, and standards your products depend on.
Design Systems
Your Documentation Can Do More Than You Think
Company Docs MCP turns your existing documentation into an intelligent assistant that can serve your team and even power AI to build and validate better products.
AI
The Cascade Effect in Context-Based Design Systems
A clean design system should behave like well-structured CSS, where inheritance flows smoothly, overrides are rare, and each layer respects the next. Here’s how we apply that mindset to building resilient, AI-ready systems.
Design Systems
What Happens When AI Actually Understands Your Design System
A quick demo showing how Claude, the Figma MCP, and the Design Systems Assistant MCP work together to deliver smarter, context-aware design system support.
Design Systems
Context-Based Design Systems: A New Model for the AI-Driven Product Lifecycle
What happens when every step in the product lifecycle inherits context from the one before it? You get a smarter, faster, more accurate way to build and the start of a new design systems era.
Design Systems
Designing for Developers—and the AI Agents Working Beside Them
How FigmaLint helps bridge the gap between design, development, and the AI agents transforming the product lifecycle.
Design Systems
Introducing Story UI: Accelerating Layout Generation with AI + MCP
Story UI is a new open-source tool that empowers non-developers to generate real layouts from design system components using AI and MCP, bridging the gap between development and product.
AI
Rethinking Design-to-Product Workflows with MCP, Design Systems, and Generative UI
By combining Figma’s MCP server, a structured design system, and natural language UI generation, we’re not just speeding up design-to-dev, we’re rethinking the entire path from idea to product.
AI
From Figma to Front-End: Using AI to Generate Real Code in Seconds
A behind-the-scenes look at how we’re using an open-source tool—Figma-Context-MCP—and repurposing it to generate scalable front-end code from structured design system components.
Design Systems
Unveiling the Complexity of Enterprise Design Systems
Some of the most recognizable companies in the world trust us to build and refine their design systems—but you’ll never see our work, and that’s exactly the point.
Design Systems
Building Multi-Brand Design Systems: The Developer’s Perspective
Discover how developers can create scalable, multi-brand design systems that seamlessly bridge design and code for consistent, adaptable, and efficient front-end workflows.
Design
A Guide to Streamlining Design and Development Collaboration with Token Studio
Discover how Token Studio streamlines design and development collaboration, enhancing workflows and maintaining consistency across projects.
Design Systems
Token Naming Conventions: The Key to a Scalable Design System
Discover the power of structured token naming conventions in building a scalable, consistent, and collaborative design system across all tiers.
Design Systems
Introducing Altitude, Southleft’s Comprehensive Design System Solution
Discover how Altitude by Southleft reimagines the intersection of design and development, offering a versatile, scalable system that seamlessly adapts from concept to code.
Design Systems
Accessible Design Systems: Building a Focus Trap With Web Components
Web component encapsulation can hinder keyboard navigation. Discover a reusable code pattern for accessible focus trapping, solving this critical accessibility challenge in your design system.
Design Systems
The Value of Design Tokens in Modern Web Development
Design tokens are the secret to building consistent, maintainable websites – discover their power and how to implement them in your workflow.
<cta>
Is your design system AI-ready?
A 30-minute discovery call is the fastest way to find out where your leverage is.