Crafting design context for agentic coding workflows
summary
Figma demonstrates linking design to production by shipping Code Connect to map components to repo files, exposing variables with custom code syntax and a plugin API, and promoting local and remote MCP servers from beta to GA. The demo calls five MCP tools (get_metadata, get_screenshot, get_code_connect_map, get_variable_defs, get_design_context) to return React/Tailwind snippets and precise token defs, generates working React/CSS, and claims the pipeline reduces developer friction and AI token waste.
AI-written summary · about
chapters (13)
- 0:00Agentic coding workflows intro
- 1:09Design systems as tools
- 3:02Optimizing agentic coding
- 5:08Code context in Figma
- 7:16Design systems for LLMs
- 8:18Variables for code context
- 10:04Code connect rendering
- 11:51Components to codebases
- 13:55Model Context Protocol
- 15:22Code from Figma designs
- 17:08MCP for design systems
- 20:03Design systems future
- 21:30Closing and call
related talks
31mDesign to Code in 2026: Context-First Development with Figma MCP
32mFigma deep dive: Agentic workflows and the MCP
34mFrom Figma to Quality Code: Code Connect + AI
20mConnecting code with craft
31mCreating a more connected design system with Code Connect
22mUnlocking creativity with GitHub and Figma
16mDesign Language on Autopilot: How Figma and Code Can Automate Your Workflow
43mDesigning in code