{"id":229,"date":"2026-04-14T15:31:25","date_gmt":"2026-04-14T15:31:25","guid":{"rendered":"https:\/\/bkbc.net\/index.php\/2026\/04\/14\/figma-design-to-code-code-to-design\/"},"modified":"2026-04-14T15:31:25","modified_gmt":"2026-04-14T15:31:25","slug":"figma-design-to-code-code-to-design","status":"publish","type":"post","link":"https:\/\/bkbc.net\/index.php\/2026\/04\/14\/figma-design-to-code-code-to-design\/","title":{"rendered":"Figma Design to Code, Code to Design: Clearly Explained"},"content":{"rendered":"<div>\n<h2><a href=\"https:\/\/go.bytebytego.com\/ResolveAI_041426\">Are your AI investments paying off? (Sponsored)<\/a><\/h2>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/go.bytebytego.com\/ResolveAI_041426\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png\" width=\"1456\" height=\"768\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":768,\"width\":1456,\"resizeWidth\":null,\"bytes\":666469,\"alt\":null,\"title\":null,\"type\":\"image\/png\",\"href\":\"https:\/\/go.bytebytego.com\/ResolveAI_041426\",\"belowTheFold\":false,\"topImage\":true,\"internalRedirect\":\"https:\/\/blog.bytebytego.com\/i\/194091845?img=https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png\",\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!ED4s!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F316a8058-ec8b-4ddf-85da-304121b843ed_3216x1696.png 1456w\" sizes=\"100vw\" fetchpriority=\"high\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><\/figure>\n<\/div>\n<p>AI budgets are under the microscope and most engineering teams only cite time savings from code generation when asked if it\u2019s working.<\/p>\n<p>The real impact is in production, where teams spend 70% of engineering time investigating incidents, jumping between tools, and losing time that could go toward shipping product.<\/p>\n<p>That operational load only grows with every line of AI-generated code that hits prod.<\/p>\n<p>Learn how engineering teams at Coinbase, Zscaler, and Salesforce are seeing AI impact across the full engineering lifecycle. Plus, get a practical worksheet for modeling AI ROI with your own operational data.<\/p>\n<p class=\"button-wrapper\" data-attrs='{\"url\":\"https:\/\/go.bytebytego.com\/ResolveAI_041426\",\"text\":\"Get the free playbook \u2192\",\"action\":null,\"class\":null}' data-component-name=\"ButtonCreateButton\"><a class=\"button primary\" href=\"https:\/\/go.bytebytego.com\/ResolveAI_041426\"><span>Get the free playbook \u2192<\/span><\/a><\/p>\n<div>\n<hr>\n<\/div>\n<p>Turning a design into working code is one of the most common tasks in frontend development, and one of the hardest to automate. The design lives in Figma. The code lives in a repository. Bridging the two has traditionally required a developer to manually interpret layouts, colors, spacing, and component structure from a visual reference. AI coding agents promise to close that gap, but the naive approaches fall short in important ways.<\/p>\n<p>Figma launched its MCP server in June 2025 to bring design context into code. This year, they released two new workflows: the ability to generate designs from coding tools like Claude Code and Codex, and the ability for agents to write directly to Figma design.<\/p>\n<p>We spoke with <a href=\"https:\/\/www.linkedin.com\/in\/emilsjolander\">Emil Sj\u00f6lander<\/a>, <a href=\"https:\/\/www.linkedin.com\/in\/adityamuttur\/\">Aditya Muttur<\/a>, and <a href=\"https:\/\/www.linkedin.com\/in\/shannontoliver\/\">Shannon Toliver<\/a> from the Figma team behind these releases to understand the details and engineering challenges. This article covers how Figma\u2019s design-to-code and code-to-design workflows actually work, starting with why the obvious approaches fail, how MCP solves them, and the engineering challenges that remain.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Us9U!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/f53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png\" width=\"1456\" height=\"1742\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/f53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":1742,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Us9U!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff53dd546-d966-4485-bfe9-5d410d319a3c_1712x2048.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><\/figure>\n<\/div>\n<h2>The Gap Between Design and Code<\/h2>\n<p>Before diving into how Figma\u2019s MCP server works, it helps to understand the approaches that came before it, and why each one hits a wall. There are two natural ways to give an LLM access to a design: show it a picture, or hand it the raw data. Both have fundamental limitations that motivated a different approach.<\/p>\n<h3>Approach 1: Screenshot the design<\/h3>\n<p>The most obvious way to turn a design into code with an LLM is to take a screenshot of your Figma file and paste it into a coding agent. The LLM sees the image, interprets the layout, and generates code.<\/p>\n<p>This works for simple UIs. But it breaks down for anything complex. The LLM has to guess values based on pixels. It doesn\u2019t know the exact color or that the spacing between cards is 24px, not 20px. The output may look close, but not identical.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Quhd!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Quhd!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F86806b50-f300-4a03-bfbc-82f3733458aa_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 1: The LLM guesses pixel values from a screenshot.<\/figcaption><\/figure>\n<\/div>\n<p>So screenshots give the LLM a visual reference but no precise values. The next natural step is to go in the opposite direction: give it all the data.<\/p>\n<h3>Approach 2: Get Design JSON via Figma\u2019s API<\/h3>\n<p>Figma exposes a REST API that returns a file\u2019s entire structure as JSON. Every node, property, and style is included. Now the LLM has real data instead of pixels.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!8Wkm!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!8Wkm!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0bd9fcb6-7897-483a-9e36-e515d074dd3c_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 2: The REST API returns the full file structure as JSON<\/figcaption><\/figure>\n<\/div>\n<p>But having all the data introduces its own problem: there is far too much of it. A single Figma page can produce thousands of lines of JSON, filled with pixel coordinates, visual effects, internal layout rules, and other metadata that are not useful for code generation. Dumping all of this into a prompt can exceed the context window. Even when it fits, the LLM has to wade through pixel coordinates, blend modes, export settings, and other visual metadata that have nothing to do with building a UI,  which degrades the output quality.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!qf0-!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png\" width=\"1456\" height=\"625\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":625,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!qf0-!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0b60503f-9e1f-47e9-abfd-efc7d1f79360_1464x628.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 3: Raw JSON exceeds the context window and degrades output quality<\/figcaption><\/figure>\n<\/div>\n<p>Neither approach works on its own. Screenshots lack precision. Raw API data has precision but drowns the LLM in noise. What you actually need is something in between: structured design data that preserves exact values like colors, spacing, and component names, but strips out the noise that is not needed for code generation.<\/p>\n<h3>The middle ground: Figma\u2019s MCP server<\/h3>\n<p>That is what Figma\u2019s MCP server does. MCP stands for Model Context Protocol, a standard that defines how AI agents discover and call external tools. Figma\u2019s MCP server takes the raw design data from Figma\u2019s REST API, filters out the noise, and transforms what remains into a clean, structured representation. Pixel positions become layout relationships like \u201ccentered inside its parent.\u201d Raw hex colors become design token references. Deeply nested layers get flattened to match what a developer would actually build. The result is a compact, token-efficient context that an LLM can act on directly.<\/p>\n<p>With that context, let\u2019s look at how the two main workflows, design to code and code to design, actually work under the hood.<\/p>\n<h2>Design to Code<\/h2>\n<p>The design-to-code workflow starts when a developer selects a frame in Figma, copies its URL, and pastes it into a coding agent like Claude Code or Codex with a prompt like \u201cImplement this design.\u201d The agent then produces working code that matches the design. Here is what happens behind the scenes.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Ox_s!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/bb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/bb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Ox_s!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb4c854b-475b-43fc-ac5e-13f8a0a355df_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 4: Design to code workflow<\/figcaption><\/figure>\n<\/div>\n<p>The coding agent and Figma\u2019s MCP server work together through four steps. The first two are generic MCP mechanics: tool discovery and tool calling. The last two are where Figma\u2019s engineering makes the difference.<\/p>\n<p><strong>Step 1. The agent discovers available tools<\/strong><\/p>\n<p>When you first connect the Figma MCP server, the agent receives a list of available tools. These include get_design_context, get_screenshot, get_metadata, and more. Each tool comes with a name, description, and parameter schema.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!c6gU!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!c6gU!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6325cf79-9fc0-4537-8718-8fe34c2ab6e2_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 5: Each MCP tool has a name, description, and parameter schema<\/figcaption><\/figure>\n<\/div>\n<p>The agent does not know how Figma works internally. It reads these descriptions the same way a developer reads API documentation, then decides which tool to call based on the user\u2019s prompt.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!3432!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!3432!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F73160044-4e01-4ed9-bb9b-5a5b8037a353_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 6: The agent picks the right tool by matching the user\u2019s intent to tool descriptions.<\/figcaption><\/figure>\n<\/div>\n<p><strong>Step 2. The agent prepares the arguments and calls the tool<\/strong><\/p>\n<p>The agent prepares the arguments to call the selected tool. In this case, since the selected tool is get_design_context, it needs a file key and a node ID. So it parses both from the Figma URL you pasted and calls the tool.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!tPIb!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/c0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png\" width=\"1456\" height=\"867\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/c0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":867,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!tPIb!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0fa70ed-4c65-4795-b852-bee3ffad833c_2048x1219.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 7: The agent calls the get_design_context tool with the parsed arguments<\/figcaption><\/figure>\n<\/div>\n<p><strong>Step 3. The request hits Figma\u2019s backend<\/strong><\/p>\n<p>The tool call is sent over the network to Figma\u2019s MCP server at mcp.figma.com\/mcp over Streamable HTTP. The MCP server handles authentication, then calls Figma\u2019s internal services to read the design data such as node trees, component properties, styles, and variable definitions.<\/p>\n<p><strong>Step 4. Transform raw design data into LLM-friendly context<\/strong><\/p>\n<p>This is where the most important engineering happens. The MCP server transforms the raw JSON from Figma\u2019s REST API into a structured representation that maps to how a developer thinks about building a UI. Pixel positions become layout relationships like \u201cthis element is centered inside its parent.\u201d Color values become references to design tokens like brand-blue instead of raw color codes. Deeply nested layers get simplified to reflect what the user actually sees. And components get enriched with code mappings. For example, when a Figma button component is mapped to src\/components\/ui\/Button.tsx through Code Connect, that reference appears in the output. The LLM reuses the existing component instead of recreating it from scratch.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!hp92!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!hp92!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F4ab52390-ca7b-4be1-9653-da7bb7b0b5a5_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 8: The MCP server transforms raw Figma JSON into a structured representation<\/figcaption><\/figure>\n<\/div>\n<p>The output defaults to a React + Tailwind framing because that is the most common frontend stack. But it is a structured representation of the design, not generated code. The LLM takes this representation and generates actual code in whatever framework the developer specifies.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!7qry!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png\" width=\"1456\" height=\"780\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":780,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!7qry!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F59f75488-1bf5-4f02-9bb0-119b7e03b6d8_2048x1097.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 9: The LLM uses the representation to generate actual code<\/figcaption><\/figure>\n<\/div>\n<h2>Code to Design<\/h2>\n<p>Design to code is only half the story. In practice, the code often evolves faster than the design files. A developer ships a feature, tweaks the layout based on user feedback, adds a new section, and now the Figma file no longer matches what is actually running in production. Code to design closes that gap. A developer opens Claude Code, types \u201csend this to Figma,\u201d and a few seconds later the live UI appears in Figma as fully editable layers. Not a flat screenshot, but real frames with auto-layout, editable text, and separate components.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!NQKY!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!NQKY!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06fda3d8-d885-4b3c-aa1a-f973aeb3ebef_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure10: Figma\u2019s MCP server enables a bidirectional loop.<\/figcaption><\/figure>\n<\/div>\n<p>This is powered by one key tool in the MCP server: generate_figma_design. Here is what happens under the hood.<\/p>\n<p><strong>Step 1: The Figma tool launches the capture tool<\/strong><\/p>\n<p>When the developer prompts \u201csend this to Figma,\u201d the agent calls MCP server\u2019s generate_figma_design tool.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!dBYS!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/ed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png\" width=\"1456\" height=\"867\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/ed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":867,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!dBYS!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed58bc29-bd1b-42aa-ad2f-4fc545aabcdc_2048x1219.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 11: coding agents picks generate_figma_design and calls it<\/figcaption><\/figure>\n<\/div>\n<p>The tool opens the target URL in a browser and injects a JavaScript capture script. For a local dev server, it connects directly. For production or staging URLs, it uses a browser automation tool like Playwright to open the page and inject the script programmatically.<\/p>\n<p>When the browser window opens, two things appear: the running UI and a capture toolbar overlay. An initial capture happens automatically when the page loads. From there, the developer can capture the entire screen or select specific elements.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!eDkB!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png\" width=\"1456\" height=\"780\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":780,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!eDkB!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F117a89c9-b630-4775-88ad-7fb3af8fdea8_2048x1097.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 12: A capture toolbar overlays the running UI<\/figcaption><\/figure>\n<\/div>\n<p><strong>Step 2: The script reads the DOM<\/strong><\/p>\n<p>When the user selects the desired UI from the live capture, the injected script does not take a screenshot. It reads the live DOM.<\/p>\n<p>It walks the DOM tree and extracts computed styles, layout properties, text content, and image sources for every visible element. It also preserves the parent-child hierarchy. A flex container with three children stays structured as a container with three children, not a flat collection of boxes.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!LF8Z!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png\" width=\"1456\" height=\"771\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":771,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!LF8Z!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F261cb37d-73a3-40c0-80a5-40e64f0730ea_2048x1085.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 13: The injected script walks the live DOM tree and extracts selected properties<\/figcaption><\/figure>\n<\/div>\n<p>This is what makes the output editable in Figma. A screenshot captures pixels. The DOM walk captures structure and relationships between elements.<\/p>\n<p><strong>Step 3: DOM data becomes Figma layers<\/strong><\/p>\n<p>The captured DOM data gets sent to Figma\u2019s backend, where it is reconstructed as native Figma design layers. Each HTML element maps to a Figma frame or shape. CSS flexbox and grid layouts become Figma auto-layout groups. Text nodes become editable Figma text layers with the correct font, size, weight, and color. Images get extracted and embedded as image fills.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Gy_w!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/f59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png\" width=\"1456\" height=\"780\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/f59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":780,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Gy_w!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff59d56ce-99fd-44a4-8ab7-35f62940ce8d_2048x1097.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 14: Each HTML element maps to a native Figma layer<\/figcaption><\/figure>\n<\/div>\n<p>That covers the two core workflows. But making them work reliably in production, across millions of Figma files, multiple coding agents, and real design systems, introduces a different set of problems.<\/p>\n<h2>Engineering Challenges<\/h2>\n<p>Here are some of the most important challenges Figma\u2019s team faced, and how they addressed them.<\/p>\n<h3>Challenge 1: Context window limits<\/h3>\n<p>LLMs have fixed context windows, so token count is a hard constraint. The design data for a complex Figma page can be enormous, far more than what a coding agent can handle in a single call. Claude Code, for example, defaults to a 25,000-token limit for MCP tool responses. If you call get_design_context on an entire page instead of a specific node, the response can easily exceed that limit and get truncated. This challenge is not unique to Figma. Any MCP server that exposes large structured data like a codebase, a document store, or a design file, has to solve the same problem: how to give the LLM enough context to be useful without exceeding what it can process.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Es2r!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png\" width=\"1456\" height=\"970\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":970,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Es2r!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8049e926-5602-4610-88b3-d5d15b281fee_2048x1365.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 15: First scan the outline with get_metadata, then zoom into specific nodes.<\/figcaption><\/figure>\n<\/div>\n<p>To mitigate this, Figma developed the get_metadata tool. Instead of the full styled representation, it returns a sparse XML outline. A developer can call get_metadata on an entire page to see the structure, identify the specific nodes they need, and then call get_design_context only on those nodes. It is a two-step pattern: scan first, then zoom in.<\/p>\n<h3>Challenge 2: Component mapping<\/h3>\n<p>By default, the coding agent has no way to know which Figma components map to which code components. Without that mapping, the agent will spend time searching the codebase to find the right component. If it does not find a match, it will create a new one from scratch. Multiply that across every reusable component in a design system, and the generated code diverges from the codebase fast.<\/p>\n<p>Figma mitigates this with Code Connect, which lets teams create explicit mappings between Figma node IDs and code file paths. Once set up, the MCP server includes these mappings in its response, and the agent reuses the actual component instead of guessing.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!KLNA!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/ba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png\" width=\"1456\" height=\"970\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/ba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":970,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!KLNA!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fba932039-95f8-44c4-ba1b-0b7152c5852f_2048x1365.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 16: Code Connect creates explicit mappings between Figma components and code files<\/figcaption><\/figure>\n<\/div>\n<p>Setting up Code Connect requires manual effort. Someone has to create and maintain those mappings. Figma has been working to reduce this friction with tools like get_code_connect_suggestions, which automatically detects and proposes mappings. But the quality of the generated code is still directly tied to how much the team has invested in connecting their design system to their codebase.<\/p>\n<h3>Challenge 3: The lossy roundtrip<\/h3>\n<p>The bidirectional loop sounds seamless, but each handoff loses information. When a design goes from Figma to code, the structured context captures layout, styles, and component references, but not business logic, event handlers, state management, or API calls. The agent fills those in when generating code.<\/p>\n<p>When that code gets captured back to Figma through generate_figma_design, the DOM walk captures visual structure and styles but strips out everything that is not visible: the React state, the API integration, the route handling.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Q82g!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png\" width=\"1456\" height=\"780\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":780,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Q82g!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F23b2fcca-ff3e-42ed-94e4-6ad4ec3487b4_2048x1097.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 17: The design \u2194 code roundtrip is not lossless. Each handoff strips some information<\/figcaption><\/figure>\n<\/div>\n<p>The result is that each roundtrip requires re-inference. When a designer modifies a captured UI in Figma and a developer pulls it back into code with get_design_context, the agent is translating visual decisions into implementation from scratch. It does not have access to the previous version of the code. Code Connect mappings help here by preserving the link between design components and their code implementations across roundtrips, but the non-visual logic still has to be re-added each time.<\/p>\n<h3>Challenge 4: Serving multiple agents with different capabilities<\/h3>\n<p>Figma\u2019s MCP server does not serve a single client. It serves Claude Code, Cursor, Codex, and any other MCP-compatible tool. Each agent has different context window sizes, different tool-calling behaviors, and different levels of sophistication in how it sequences multiple tool calls. A workflow that works well in one agent may not work the same way in another.<\/p>\n<div class=\"captioned-image-container\">\n<figure><a class=\"image-link image2 is-viewable-img\" target=\"_blank\" href=\"https:\/\/substackcdn.com\/image\/fetch\/%24s_!Lim0!,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png\" data-component-name=\"Image2ToDOM\"><\/p>\n<div class=\"image2-inset\"><picture><source type=\"image\/webp\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_424,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_848,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_1272,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 1456w\" sizes=\"100vw\"><img decoding=\"async\" src=\"https:\/\/bkbc.net\/wp-content\/uploads\/2026\/04\/f4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png\" width=\"1456\" height=\"787\" data-attrs='{\"src\":\"https:\/\/substack-post-media.s3.amazonaws.com\/public\/images\/f4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png\",\"srcNoWatermark\":null,\"fullscreen\":null,\"imageSize\":null,\"height\":787,\"width\":1456,\"resizeWidth\":null,\"bytes\":null,\"alt\":null,\"title\":null,\"type\":null,\"href\":null,\"belowTheFold\":true,\"topImage\":false,\"internalRedirect\":null,\"isProcessing\":false,\"align\":null,\"offset\":false}' class=\"sizing-normal\" alt=\"\" srcset=\"https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_424,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 424w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_848,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 848w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_1272,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 1272w, https:\/\/substackcdn.com\/image\/fetch\/$s_!Lim0!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep\/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4ac6945-5809-4733-aa21-293ab3641158_2048x1107.png 1456w\" sizes=\"auto, 100vw\" loading=\"lazy\"><\/picture>\n<div class=\"image-link-expand\">\n<div class=\"pencraft pc-display-flex pc-gap-8 pc-reset\"><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container restack-image\"><svg role=\"img\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\" stroke-width=\"1.5\" stroke=\"var(--color-fg-primary)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><title><\/title><path d=\"M2.53001 7.81595C3.49179 4.73911 6.43281 2.5 9.91173 2.5C13.1684 2.5 15.9537 4.46214 17.0852 7.23684L17.6179 8.67647M17.6179 8.67647L18.5002 4.26471M17.6179 8.67647L13.6473 6.91176M17.4995 12.1841C16.5378 15.2609 13.5967 17.5 10.1178 17.5C6.86118 17.5 4.07589 15.5379 2.94432 12.7632L2.41165 11.3235M2.41165 11.3235L1.5293 15.7353M2.41165 11.3235L6.38224 13.0882\"><\/path><\/g><\/svg><\/button><button tabindex=\"0\" type=\"button\" class=\"pencraft pc-reset pencraft icon-container view-image\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize2 lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"><\/polyline><polyline points=\"9 21 3 21 3 15\"><\/polyline><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"><\/line><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<p><\/a><figcaption class=\"image-caption\">Figure 18: Different agents have different context limits and tool-calling capabilities.<\/figcaption><\/figure>\n<\/div>\n<p>The generate_figma_design tool, for instance, is now available in a growing number of coding tools, including Claude Code and Codex. Code-to-design requires tighter integration with the browser (script injection, capture toolbar, multi-screen state) than most agents currently support.<\/p>\n<p>Building an MCP server that works well across a growing ecosystem of agents with varying capabilities is one of the harder ongoing challenges in this space.<\/p>\n<p>The recent opening of the Figma canvas to agents marks an important evolution in this workflow. Agents can now not only read and understand design context, but actively modify and create designs using the use_figma MCP tool. This tool complements the design-to-code workflow by enabling agents to edit designs directly on the Figma canvas and create new assets using your components and variables.<\/p>\n<h2>What\u2019s Next?<\/h2>\n<p>The hardest part of building an MCP server is not implementing the protocol. It is making the design decisions that Figma\u2019s team had to work through: what context to include, what to leave out, how to structure it so LLMs can reason about it, and how to stay within token budgets. Those decisions are what separate a useful MCP server from one that just wraps an existing API.<\/p>\n<p>Figma\u2019s server is a useful reference point not because of the design tool specifics, but because the design decisions behind it like what to include, how to structure it, and how to handle token budgets, are well-documented and applicable to anyone building an MCP server for a complex domain.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<div>This article covers how Figma\u2019s design-to-code and code-to-design workflows actually work, starting with why the obvious approaches fail, how MCP solves them, and the engineering challenges that remain.<\/div>\n","protected":false},"author":1,"featured_media":230,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,6],"tags":[113,115,112,114],"class_list":["post-229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-to-head-2-head-comparison","category-technology","tag-architecture","tag-diagrams","tag-software","tag-system-design"],"_links":{"self":[{"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":0,"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bkbc.net\/index.php\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}