Automate Design Systems - Figma to Jira with MCP
1.5K views · 2025-11-22
UI Design
If you've ever spent hours copying design specs from Figma into Jira user stories, you know how tedious it gets. And then someone on your team writes their stories completely differently, so there's zero consistency. There's a better way.
This walkthrough shows how to use Model Context Protocol (MCP) with AI agents like Claude Code to automate your design-to-dev handoff. Tim Gremore (Development Lead at Headway) walks through four different approaches—from the old manual way to AI-assisted workflows—so you can see exactly what works and what doesn't.
The surprising part? Custom MCP servers can actually give you better results than Figma's own MCP solution, and they're cheaper to maintain. You'll see real JSX output comparisons and learn why design system context makes all the difference between generic AI output and code that actually matches your component library.
Key Topics Covered:
→ The real benefits of design systems (and why they're worth the effort)
→ Four workflows compared: Manual transcription vs various AI approaches
→ How MCP actually works under the hood
→ Design system-informed JSX vs generic AI output
→ Why Shipwright MCP outperformed Figma's MCP in our testing
→ Building your own MCP server for any UI kit
→ Figma Code Connect: what it does well and where it falls short
→ Cost breakdown: Figma MCP seats vs custom solutions
→ The non-deterministic LLM problem for design systems
→ Real talk: Setup takes about 10 minutes from start to finish
Segments
00:00 - Intro
01:15 - Design Systems: Benefits & Challenges
04:36 - Why Write User Stories?
05:33 - Anatomy of a Well-Written User Story
09:13 - Approach 1: Manual Figma to Jira (Traditional)
11:24 - Approach 2: Claude Without Design System Context
12:34 - Approach 3: Claude with Figma MCP (Authorization Issues)
14:21 - Approach 4: Shipwright MCP (Best Results)
15:55 - JSX Output Comparison: Design System Components
17:54 - How MCP Protocol Works
20:48 - MCP Use Cases Beyond Design Systems
22:12 - Shipwright MCP Tools: List & Get Component Details
23:36 - With vs Without MCP: Button Component Example
24:55 - Limitations: Non-Deterministic LLMs
27:39 - Future: Figma Code Connect Overview
29:23 - Figma MCP vs Custom MCP: Cost & Maintenance
34:10 - Portability: UI Kit-Agnostic MCP Servers
35:13 - Q&A: Team Implementation & Learning Curve
37:11 - Q&A: Setup Time & Configuration
39:07 - Closing Thoughts
Connect with Headway:
https://headway.io
#designsystems #developertools #modelcontextprotocol
This walkthrough shows how to use Model Context Protocol (MCP) with AI agents like Claude Code to automate your design-to-dev handoff. Tim Gremore (Development Lead at Headway) walks through four different approaches—from the old manual way to AI-assisted workflows—so you can see exactly what works and what doesn't.
The surprising part? Custom MCP servers can actually give you better results than Figma's own MCP solution, and they're cheaper to maintain. You'll see real JSX output comparisons and learn why design system context makes all the difference between generic AI output and code that actually matches your component library.
Key Topics Covered:
→ The real benefits of design systems (and why they're worth the effort)
→ Four workflows compared: Manual transcription vs various AI approaches
→ How MCP actually works under the hood
→ Design system-informed JSX vs generic AI output
→ Why Shipwright MCP outperformed Figma's MCP in our testing
→ Building your own MCP server for any UI kit
→ Figma Code Connect: what it does well and where it falls short
→ Cost breakdown: Figma MCP seats vs custom solutions
→ The non-deterministic LLM problem for design systems
→ Real talk: Setup takes about 10 minutes from start to finish
Segments
00:00 - Intro
01:15 - Design Systems: Benefits & Challenges
04:36 - Why Write User Stories?
05:33 - Anatomy of a Well-Written User Story
09:13 - Approach 1: Manual Figma to Jira (Traditional)
11:24 - Approach 2: Claude Without Design System Context
12:34 - Approach 3: Claude with Figma MCP (Authorization Issues)
14:21 - Approach 4: Shipwright MCP (Best Results)
15:55 - JSX Output Comparison: Design System Components
17:54 - How MCP Protocol Works
20:48 - MCP Use Cases Beyond Design Systems
22:12 - Shipwright MCP Tools: List & Get Component Details
23:36 - With vs Without MCP: Button Component Example
24:55 - Limitations: Non-Deterministic LLMs
27:39 - Future: Figma Code Connect Overview
29:23 - Figma MCP vs Custom MCP: Cost & Maintenance
34:10 - Portability: UI Kit-Agnostic MCP Servers
35:13 - Q&A: Team Implementation & Learning Curve
37:11 - Q&A: Setup Time & Configuration
39:07 - Closing Thoughts
Connect with Headway:
https://headway.io
#designsystems #developertools #modelcontextprotocol