[
  {
    "startMs": 1309,
    "text": "[music]"
  },
  {
    "startMs": 12960,
    "text": "All right, get started. Hi, I'm Jesse"
  },
  {
    "startMs": 15679,
    "text": "and I've been a software engineer at"
  },
  {
    "startMs": 17119,
    "text": "Figma for about three years and I'm"
  },
  {
    "startMs": 18480,
    "text": "going to talk to you about how we built"
  },
  {
    "startMs": 20240,
    "text": "Figma's first MCP server in about 3"
  },
  {
    "startMs": 22480,
    "text": "months. Um, and in case you don't know"
  },
  {
    "startMs": 24480,
    "text": "what it is, the Figma MCP server is a"
  },
  {
    "startMs": 26880,
    "text": "way for you to send context between"
  },
  {
    "startMs": 28320,
    "text": "production uh code and design and vice"
  },
  {
    "startMs": 30880,
    "text": "versa. AI tools don't need to build a"
  },
  {
    "startMs": 33360,
    "text": "dedicated integration. They can just use"
  },
  {
    "startMs": 35600,
    "text": "our Figma MCP and they kind of get"
  },
  {
    "startMs": 37760,
    "text": "started."
  },
  {
    "startMs": 39280,
    "text": "So, taking you back to November 2024,"
  },
  {
    "startMs": 42800,
    "text": "long long time ago, Anthropic released"
  },
  {
    "startMs": 45120,
    "text": "the MCP server spec and uh everyone in"
  },
  {
    "startMs": 47840,
    "text": "the world of AI was sort of starting to"
  },
  {
    "startMs": 49039,
    "text": "use it and experiment with it. Um but"
  },
  {
    "startMs": 51440,
    "text": "outside of anthropic none of the other"
  },
  {
    "startMs": 53520,
    "text": "AI agents or labs were really using it."
  },
  {
    "startMs": 55120,
    "text": "So OpenAI cursor VS Code they didn't"
  },
  {
    "startMs": 56960,
    "text": "support it yet. Um once we got access to"
  },
  {
    "startMs": 60320,
    "text": "the feature in cursor however uh we were"
  },
  {
    "startMs": 62719,
    "text": "able to kind of ideate and understand"
  },
  {
    "startMs": 64080,
    "text": "what it was capable of and we got"
  },
  {
    "startMs": 65439,
    "text": "something a little bit closer to an"
  },
  {
    "startMs": 66640,
    "text": "actual product and that's where my story"
  },
  {
    "startMs": 69520,
    "text": "begins. Um I was working on growth"
  },
  {
    "startMs": 71600,
    "text": "initiatives at the time and I saw our"
  },
  {
    "startMs": 73360,
    "text": "internal demo and I really wanted to use"
  },
  {
    "startMs": 75200,
    "text": "it. I thought it'd be great for"
  },
  {
    "startMs": 76159,
    "text": "non-designers uh to kind of be able to"
  },
  {
    "startMs": 78080,
    "text": "use Figma. Um, I started creating"
  },
  {
    "startMs": 80240,
    "text": "actually a Figma plug-in based MCP"
  },
  {
    "startMs": 82400,
    "text": "server and I started doing it one day a"
  },
  {
    "startMs": 84240,
    "text": "week. It was kind of my 20% project that"
  },
  {
    "startMs": 86479,
    "text": "we didn't we didn't really have 20%"
  },
  {
    "startMs": 87840,
    "text": "projects, but I really wanted to work on"
  },
  {
    "startMs": 89040,
    "text": "it, so I did. Um, and so I got staffed"
  },
  {
    "startMs": 91280,
    "text": "with some other folks um on the team. We"
  },
  {
    "startMs": 93439,
    "text": "were the MC Peeps. That's a peep. It's a"
  },
  {
    "startMs": 95520,
    "text": "candy if you don't know. Um, they're"
  },
  {
    "startMs": 97360,
    "text": "delicious. And I I just want to be very"
  },
  {
    "startMs": 99040,
    "text": "clear um I'm going to say I a lot and we"
  },
  {
    "startMs": 101920,
    "text": "there was a big team behind this so it's"
  },
  {
    "startMs": 103360,
    "text": "not just me and they're all fantastic."
  },
  {
    "startMs": 105200,
    "text": "Um a few weeks later after we started"
  },
  {
    "startMs": 108159,
    "text": "getting our initial architecture sorted"
  },
  {
    "startMs": 110000,
    "text": "a new version of the spec dropped uh"
  },
  {
    "startMs": 111840,
    "text": "deprecating the support type that we"
  },
  {
    "startMs": 113360,
    "text": "were going to use which was server"
  },
  {
    "startMs": 114960,
    "text": "events and while the MCP spec was sort"
  },
  {
    "startMs": 118079,
    "text": "of chugging along clients were adding"
  },
  {
    "startMs": 120000,
    "text": "features and support in different paces."
  },
  {
    "startMs": 122079,
    "text": "Uh cloud had early support cloud desktop"
  },
  {
    "startMs": 124640,
    "text": "but cloud code you was wasn't really"
  },
  {
    "startMs": 126880,
    "text": "supported uh with all the complete set"
  },
  {
    "startMs": 128560,
    "text": "of features. OpenAI and VS Code didn't h"
  },
  {
    "startMs": 131200,
    "text": "have support until that spec update and"
  },
  {
    "startMs": 133680,
    "text": "then it wasn't even then uh VS Code"
  },
  {
    "startMs": 135520,
    "text": "didn't go out of uh didn't get to G"
  },
  {
    "startMs": 137520,
    "text": "until July. It didn't mean that all the"
  },
  {
    "startMs": 139760,
    "text": "features were implemented either. There"
  },
  {
    "startMs": 141120,
    "text": "are lots of different pieces um and in"
  },
  {
    "startMs": 143360,
    "text": "many cases only tools were supported."
  },
  {
    "startMs": 146480,
    "text": "VS Code was truly like the golden"
  },
  {
    "startMs": 148560,
    "text": "client. Uh they eventually supported"
  },
  {
    "startMs": 150480,
    "text": "kind of all pieces of the spec, but it"
  },
  {
    "startMs": 152400,
    "text": "was it was hard to kind of understand"
  },
  {
    "startMs": 154239,
    "text": "what you were building towards because"
  },
  {
    "startMs": 155599,
    "text": "clients supported so many different"
  },
  {
    "startMs": 156959,
    "text": "things. [snorts]"
  },
  {
    "startMs": 157840,
    "text": "But even though we didn't know exactly"
  },
  {
    "startMs": 159360,
    "text": "what the MCP server spec would be"
  },
  {
    "startMs": 161120,
    "text": "supported, we we knew that it would be"
  },
  {
    "startMs": 162400,
    "text": "extremely powerful and a great product"
  },
  {
    "startMs": 164319,
    "text": "uh for us to to utilize. And so we"
  },
  {
    "startMs": 165920,
    "text": "started building"
  },
  {
    "startMs": 167680,
    "text": "um and so taking a a more highle re"
  },
  {
    "startMs": 170319,
    "text": "recap about a year ago uh we launched"
  },
  {
    "startMs": 173120,
    "text": "our local MCP server. And what local"
  },
  {
    "startMs": 175599,
    "text": "means it was heavily designed for"
  },
  {
    "startMs": 177519,
    "text": "developer use cases. You kind of had to"
  },
  {
    "startMs": 179680,
    "text": "know what you were doing a little bit"
  },
  {
    "startMs": 180879,
    "text": "and we targeted developers because they"
  },
  {
    "startMs": 183680,
    "text": "were the first to adopt AI workflows."
  },
  {
    "startMs": 185680,
    "text": "they would use a single plop prompt like"
  },
  {
    "startMs": 187519,
    "text": "help me implement this and a developer"
  },
  {
    "startMs": 189360,
    "text": "could pull everything that they would"
  },
  {
    "startMs": 190480,
    "text": "normally get from Figma's dev mode into"
  },
  {
    "startMs": 192800,
    "text": "their coding agent. This include things"
  },
  {
    "startMs": 195200,
    "text": "like component data, spacing, variables"
  },
  {
    "startMs": 198400,
    "text": "um and from there we just kept adding"
  },
  {
    "startMs": 200080,
    "text": "more and more re read tools like for fig"
  },
  {
    "startMs": 201840,
    "text": "jam for make um etc. But they all shared"
  },
  {
    "startMs": 204879,
    "text": "this kind of uh mutual goal to make"
  },
  {
    "startMs": 207599,
    "text": "Figma context available for develop"
  },
  {
    "startMs": 209120,
    "text": "develop developers wherever they are."
  },
  {
    "startMs": 212959,
    "text": "So, Figma, if you don't know about"
  },
  {
    "startMs": 214959,
    "text": "Figma, um Figma is a canvas. Um and it's"
  },
  {
    "startMs": 218879,
    "text": "represented as a scene graph in C++."
  },
  {
    "startMs": 221120,
    "text": "It's a graph of connected nodes, not"
  },
  {
    "startMs": 222640,
    "text": "unlike the HTML DOM. And we had a number"
  },
  {
    "startMs": 224959,
    "text": "of different ways we could represent the"
  },
  {
    "startMs": 226400,
    "text": "scene graph. We had this internal"
  },
  {
    "startMs": 228319,
    "text": "representation which was kind of akin to"
  },
  {
    "startMs": 230080,
    "text": "JSX or XML, effectively converting the"
  },
  {
    "startMs": 232560,
    "text": "scene graph into JSS tags and XML tags"
  },
  {
    "startMs": 235519,
    "text": "and passing those to the agent. It was"
  },
  {
    "startMs": 237599,
    "text": "abstract and sparse, but it didn't have"
  },
  {
    "startMs": 239680,
    "text": "super rigorous fidelity. Another option"
  },
  {
    "startMs": 242080,
    "text": "that we had internally was um D2R which"
  },
  {
    "startMs": 246400,
    "text": "is our like way of saying a react"
  },
  {
    "startMs": 248640,
    "text": "tailwind representation. Uh and the"
  },
  {
    "startMs": 250879,
    "text": "reason we had this is Figma has a sites"
  },
  {
    "startMs": 252799,
    "text": "product and so we already had a way of"
  },
  {
    "startMs": 254400,
    "text": "basically converting the scene graph"
  },
  {
    "startMs": 255920,
    "text": "into HTML."
  },
  {
    "startMs": 258160,
    "text": "If you actually copy the output of the"
  },
  {
    "startMs": 260000,
    "text": "Figma MCP today and you paste into like"
  },
  {
    "startMs": 261919,
    "text": "a simple MCP or simple HTTP server, it"
  },
  {
    "startMs": 264880,
    "text": "should be pixel perfect. Um and if it's"
  },
  {
    "startMs": 266880,
    "text": "not, file a bug. Uh but um we had a"
  },
  {
    "startMs": 271360,
    "text": "hunch that this representation would be"
  },
  {
    "startMs": 273280,
    "text": "the best one because lots of the models"
  },
  {
    "startMs": 274960,
    "text": "were sort of rldled on this React"
  },
  {
    "startMs": 276800,
    "text": "Tailwind type of code. Um and we we had"
  },
  {
    "startMs": 279120,
    "text": "a suspicion that it would work really"
  },
  {
    "startMs": 280240,
    "text": "well. The last one that we kind of"
  },
  {
    "startMs": 282080,
    "text": "considered was just a plain image. But"
  },
  {
    "startMs": 284000,
    "text": "back in early 2025, 2025 agents weren't"
  },
  {
    "startMs": 287280,
    "text": "great at converting images directly to"
  },
  {
    "startMs": 289120,
    "text": "HTML or CSS or sort of other languages."
  },
  {
    "startMs": 291520,
    "text": "And so we kind of use that as an"
  },
  {
    "startMs": 292960,
    "text": "additional piece of context, not as the"
  },
  {
    "startMs": 294720,
    "text": "sole one. And to give you what what this"
  },
  {
    "startMs": 296880,
    "text": "kind of looks like in practice, on the"
  },
  {
    "startMs": 298720,
    "text": "left here we have a a Figma frame and on"
  },
  {
    "startMs": 300960,
    "text": "the right we have the React Tailwind"
  },
  {
    "startMs": 303440,
    "text": "code. Um you can also see at the very"
  },
  {
    "startMs": 305759,
    "text": "top the image can crew meetup uh link."
  },
  {
    "startMs": 309600,
    "text": "Uh we also basically abstract out the"
  },
  {
    "startMs": 311600,
    "text": "images within the code or sorry within"
  },
  {
    "startMs": 313680,
    "text": "the scene graph and put them at the top"
  },
  {
    "startMs": 315280,
    "text": "level. Our first attempt was just"
  },
  {
    "startMs": 317280,
    "text": "passing B 64 data into the code and that"
  },
  {
    "startMs": 320080,
    "text": "was just a terrible idea. It it just"
  },
  {
    "startMs": 321520,
    "text": "blew up the context window and was bad"
  },
  {
    "startMs": 323280,
    "text": "all around. um don't do that. Um we'd"
  },
  {
    "startMs": 327199,
    "text": "also pass an image of the current node"
  },
  {
    "startMs": 329039,
    "text": "to the agent as well. While the image by"
  },
  {
    "startMs": 330960,
    "text": "itself did not do a good job of"
  },
  {
    "startMs": 332560,
    "text": "converting to uh code, having the code"
  },
  {
    "startMs": 335759,
    "text": "context plus the image actually had"
  },
  {
    "startMs": 338000,
    "text": "better agentic output."
  },
  {
    "startMs": 340479,
    "text": "So what do I mean by better? How did we"
  },
  {
    "startMs": 342400,
    "text": "know what was better? We tried to do"
  },
  {
    "startMs": 344240,
    "text": "evals. Um and so we did some sort of"
  },
  {
    "startMs": 346880,
    "text": "very simple eval to start with a mix of"
  },
  {
    "startMs": 349199,
    "text": "quantitative and qualitative data. Uh,"
  },
  {
    "startMs": 352160,
    "text": "from a quantitative standpoint, we we"
  },
  {
    "startMs": 353840,
    "text": "looked at did it use variables? Uh, did"
  },
  {
    "startMs": 355840,
    "text": "it use the theming we expected? Did it"
  },
  {
    "startMs": 357440,
    "text": "use the right spot? And from the"
  },
  {
    "startMs": 359520,
    "text": "qualitative side of things, does it look"
  },
  {
    "startMs": 361440,
    "text": "good? Did it make good decisions with"
  },
  {
    "startMs": 363120,
    "text": "incomplete information? And we spent"
  },
  {
    "startMs": 366000,
    "text": "like two hours grading an eval into an"
  },
  {
    "startMs": 368160,
    "text": "Excel spreadsheet. And we said, we're"
  },
  {
    "startMs": 369759,
    "text": "never we're never doing that again. It"
  },
  {
    "startMs": 371039,
    "text": "was awful. Don't do eval by hand if you"
  },
  {
    "startMs": 373120,
    "text": "can help it. Um, we had a bunch of toy"
  },
  {
    "startMs": 375680,
    "text": "repos that we kind of created or kind of"
  },
  {
    "startMs": 377680,
    "text": "had folks create for us. Um and we"
  },
  {
    "startMs": 380240,
    "text": "eventually ended up coding up a web app"
  },
  {
    "startMs": 383039,
    "text": "to sort of help us with the eval which"
  },
  {
    "startMs": 384479,
    "text": "made things a lot easier at least from"
  },
  {
    "startMs": 386080,
    "text": "like a um process perspective. One"
  },
  {
    "startMs": 388800,
    "text": "interesting thing is Figma um there are"
  },
  {
    "startMs": 392560,
    "text": "Figma files which we are converting"
  },
  {
    "startMs": 394080,
    "text": "there's a lot of open source code out"
  },
  {
    "startMs": 395600,
    "text": "there but there's not a lot of uh open-"
  },
  {
    "startMs": 397759,
    "text": "source code that also has fig files"
  },
  {
    "startMs": 399919,
    "text": "attached and so we had to either create"
  },
  {
    "startMs": 401680,
    "text": "our own or sort of find different ways"
  },
  {
    "startMs": 403039,
    "text": "to make automated systems. Um, and now"
  },
  {
    "startMs": 405600,
    "text": "we have a um, eval that sort of runs"
  },
  {
    "startMs": 408800,
    "text": "like hundreds of times a week. Engineers"
  },
  {
    "startMs": 410720,
    "text": "can kick this off and sort of grade"
  },
  {
    "startMs": 412479,
    "text": "against prompt changes um, with LLM"
  },
  {
    "startMs": 415039,
    "text": "judges. So, we kind of remove the human"
  },
  {
    "startMs": 416400,
    "text": "from the loop where we don't need it."
  },
  {
    "startMs": 418319,
    "text": "Um, but having an agent translate a"
  },
  {
    "startMs": 420960,
    "text": "pixel uh, perfect version of code isn't"
  },
  {
    "startMs": 423440,
    "text": "enough. Um, I mentioned that the React"
  },
  {
    "startMs": 426240,
    "text": "Tailwind version of our output was pixel"
  },
  {
    "startMs": 428800,
    "text": "perfect. That's really only half the"
  },
  {
    "startMs": 430160,
    "text": "story. An enterprise doesn't care if"
  },
  {
    "startMs": 432000,
    "text": "it's pixel perfect if it's not using its"
  },
  {
    "startMs": 433840,
    "text": "like battle tested accessible and"
  },
  {
    "startMs": 435360,
    "text": "internationalized components. At Figma,"
  },
  {
    "startMs": 437759,
    "text": "we already had this concept of code"
  },
  {
    "startMs": 439120,
    "text": "connect which allows you to link design"
  },
  {
    "startMs": 440880,
    "text": "components to components in your"
  },
  {
    "startMs": 442160,
    "text": "codebase. We needed a way to use this"
  },
  {
    "startMs": 444240,
    "text": "with our MCP server so that an a an"
  },
  {
    "startMs": 446560,
    "text": "agent used the correct components. For"
  },
  {
    "startMs": 448880,
    "text": "example, this beautiful button here. Uh"
  },
  {
    "startMs": 452160,
    "text": "this would be a perfect representation"
  },
  {
    "startMs": 454400,
    "text": "if you were to throw that into an HTML"
  },
  {
    "startMs": 456319,
    "text": "server. But you kind of see two"
  },
  {
    "startMs": 458080,
    "text": "problems. um if you had a primary button"
  },
  {
    "startMs": 460560,
    "text": "in your codebase, you wouldn't be"
  },
  {
    "startMs": 461680,
    "text": "referencing it. And that's not ideal if"
  },
  {
    "startMs": 463759,
    "text": "it has accessibil accessibility"
  },
  {
    "startMs": 465520,
    "text": "properties or internationalization"
  },
  {
    "startMs": 466960,
    "text": "properties. And then second, um you'd"
  },
  {
    "startMs": 469199,
    "text": "eat up the context window. We we use Oh,"
  },
  {
    "startMs": 472560,
    "text": "this happened last time. Uh we use React"
  },
  {
    "startMs": 474800,
    "text": "Tailwind to um basically convert things"
  },
  {
    "startMs": 477759,
    "text": "over. Um but we want to make sure we do"
  },
  {
    "startMs": 481120,
    "text": "it in the sparest way possible."
  },
  {
    "startMs": 484160,
    "text": "All right, just going to keep vamping a"
  },
  {
    "startMs": 486879,
    "text": "bit here. And so picture the same thing"
  },
  {
    "startMs": 488639,
    "text": "on screen. Uh but now we have like all"
  },
  {
    "startMs": 491039,
    "text": "this React Tailwind code. It's going to"
  },
  {
    "startMs": 492879,
    "text": "then be converted into sending over uh"
  },
  {
    "startMs": 495520,
    "text": "basically a sparse representation of it"
  },
  {
    "startMs": 497520,
    "text": "via code connect. Um and by connecting"
  },
  {
    "startMs": 499919,
    "text": "the user's code to the design, we're"
  },
  {
    "startMs": 502240,
    "text": "able to pass back effectively what is a"
  },
  {
    "startMs": 504319,
    "text": "pointer which allows the agent to use"
  },
  {
    "startMs": 506160,
    "text": "the code component leading to our higher"
  },
  {
    "startMs": 508080,
    "text": "fidelity uh implementation. So"
  },
  {
    "startMs": 510319,
    "text": "effectively you go from like this big"
  },
  {
    "startMs": 511599,
    "text": "old thing of uh react tailin to the"
  },
  {
    "startMs": 514479,
    "text": "small react component that just says use"
  },
  {
    "startMs": 516479,
    "text": "button component."
  },
  {
    "startMs": 520080,
    "text": "Um all right it's going to let you"
  },
  {
    "startMs": 523760,
    "text": "restart it. Okay cool pause"
  },
  {
    "startMs": 527440,
    "text": "that."
  },
  {
    "startMs": 535200,
    "text": "All right I can start talking a little"
  },
  {
    "startMs": 536399,
    "text": "bit about the next bit. Oh, wait. You"
  },
  {
    "startMs": 537920,
    "text": "can see this cool thing. You can ask"
  },
  {
    "startMs": 540720,
    "text": "yourself how I described it well, but"
  },
  {
    "startMs": 541839,
    "text": "yeah, it's basically like a React"
  },
  {
    "startMs": 542720,
    "text": "component that you're able to then bring"
  },
  {
    "startMs": 543839,
    "text": "into your code. Um, once we felt good"
  },
  {
    "startMs": 546560,
    "text": "about the serialization syntax, we"
  },
  {
    "startMs": 548320,
    "text": "started to look at what an MCB server"
  },
  {
    "startMs": 550480,
    "text": "can be. And the MCP spec had a lot of"
  },
  {
    "startMs": 553360,
    "text": "great pieces in it, but some features"
  },
  {
    "startMs": 555200,
    "text": "weren't quite fleshed out within"
  },
  {
    "startMs": 556640,
    "text": "clients, and other features we really"
  },
  {
    "startMs": 558000,
    "text": "wish existed. Many clients only"
  },
  {
    "startMs": 560080,
    "text": "implemented a subset of the spec, and"
  },
  {
    "startMs": 562000,
    "text": "many features were very experimental."
  },
  {
    "startMs": 564399,
    "text": "This is the client compatibility matrix"
  },
  {
    "startMs": 566640,
    "text": "from March 2025."
  },
  {
    "startMs": 568720,
    "text": "Today, for example, we expose a host of"
  },
  {
    "startMs": 571279,
    "text": "resources to an agent so that it can"
  },
  {
    "startMs": 573920,
    "text": "figure out um how to use our server as"
  },
  {
    "startMs": 575680,
    "text": "well as different help articles within"
  },
  {
    "startMs": 576959,
    "text": "Figma. Um whereas before we would send"
  },
  {
    "startMs": 579279,
    "text": "that information down with like an air"
  },
  {
    "startMs": 581200,
    "text": "for example, and the agent would have to"
  },
  {
    "startMs": 582480,
    "text": "call uh wasting inference and sort of"
  },
  {
    "startMs": 584640,
    "text": "reasoning to sort of figure out what is"
  },
  {
    "startMs": 586320,
    "text": "actually going wrong. Um one small part"
  },
  {
    "startMs": 589360,
    "text": "of the spec uh that was missing was"
  },
  {
    "startMs": 590959,
    "text": "server instructions. I shouldn't say"
  },
  {
    "startMs": 592160,
    "text": "missing from the spec. it was in the"
  },
  {
    "startMs": 593440,
    "text": "spec, but no clients implemented it. Um,"
  },
  {
    "startMs": 595519,
    "text": "and it wasn't really highlighted in the"
  },
  {
    "startMs": 597360,
    "text": "docs until Anthropic added a nice blog"
  },
  {
    "startMs": 599760,
    "text": "post uh to sort of talk about it and"
  },
  {
    "startMs": 601279,
    "text": "then some clients started adding it. And"
  },
  {
    "startMs": 602800,
    "text": "therefore, we would add uh additional"
  },
  {
    "startMs": 605360,
    "text": "instructions into each tool call."
  },
  {
    "startMs": 607200,
    "text": "Basically instructing the LLM how to use"
  },
  {
    "startMs": 609760,
    "text": "our server um even though server"
  },
  {
    "startMs": 612240,
    "text": "descriptions weren't necessarily written"
  },
  {
    "startMs": 614000,
    "text": "out yet. Some other features that we"
  },
  {
    "startMs": 616240,
    "text": "really really wanted were elicitation"
  },
  {
    "startMs": 618160,
    "text": "and sampling. Um, elicitation, if you"
  },
  {
    "startMs": 621760,
    "text": "haven't heard of it, is a way for you to"
  },
  {
    "startMs": 623360,
    "text": "ask the user a question, take that"
  },
  {
    "startMs": 625519,
    "text": "input, and pass it back to your server."
  },
  {
    "startMs": 627519,
    "text": "So, here we have it's VS Code, uh, and"
  },
  {
    "startMs": 630240,
    "text": "basically just asking, you know, what's"
  },
  {
    "startMs": 631440,
    "text": "my name? And you're able to take that"
  },
  {
    "startMs": 632800,
    "text": "input and pass it back, uh, to the"
  },
  {
    "startMs": 634800,
    "text": "server. Um, which is interesting on its"
  },
  {
    "startMs": 638160,
    "text": "own, but we thought in combination with"
  },
  {
    "startMs": 640160,
    "text": "sampling, which is unfortunately"
  },
  {
    "startMs": 641440,
    "text": "deprecated, but it's fine because you're"
  },
  {
    "startMs": 642959,
    "text": "able to work around it."
  },
  {
    "startMs": 644320,
    "text": "Sampling is a way of having a server"
  },
  {
    "startMs": 648240,
    "text": "query the client's LLM from from our"
  },
  {
    "startMs": 651360,
    "text": "server and in kind of the canonical case"
  },
  {
    "startMs": 653200,
    "text": "was for small queries. We thought it'd"
  },
  {
    "startMs": 655200,
    "text": "be really useful to combine elicitation"
  },
  {
    "startMs": 656959,
    "text": "and sampling into a single workflow. We"
  },
  {
    "startMs": 659760,
    "text": "talked about how code connect improves"
  },
  {
    "startMs": 661760,
    "text": "users workflows quite a bit and kind of"
  },
  {
    "startMs": 663600,
    "text": "makes outputs a lot better. What we"
  },
  {
    "startMs": 665760,
    "text": "wanted to do was ask a user can we map"
  },
  {
    "startMs": 668160,
    "text": "out your code code base for code"
  },
  {
    "startMs": 670160,
    "text": "connections so that our MC MCP server"
  },
  {
    "startMs": 672959,
    "text": "can link them so that the output would"
  },
  {
    "startMs": 674399,
    "text": "be better and reduce the amount of"
  },
  {
    "startMs": 675600,
    "text": "context we send. Unfortunately though"
  },
  {
    "startMs": 677680,
    "text": "most of the clients didn't implement"
  },
  {
    "startMs": 679040,
    "text": "these features and didn't allow you to"
  },
  {
    "startMs": 680880,
    "text": "properly query the the agent in the"
  },
  {
    "startMs": 682720,
    "text": "context of the codebase. So for sampling"
  },
  {
    "startMs": 684480,
    "text": "even when VS code supported it you could"
  },
  {
    "startMs": 686399,
    "text": "only really query it as a general agent"
  },
  {
    "startMs": 688640,
    "text": "not specific to the codebase. But we"
  },
  {
    "startMs": 690959,
    "text": "were able to kind of hack around it"
  },
  {
    "startMs": 692079,
    "text": "using tools."
  },
  {
    "startMs": 693839,
    "text": "When you got the context of a particular"
  },
  {
    "startMs": 695839,
    "text": "component or sorry of a particular"
  },
  {
    "startMs": 697360,
    "text": "design in Figma, if we noticed it was a"
  },
  {
    "startMs": 699360,
    "text": "component and that it wasn't code"
  },
  {
    "startMs": 701040,
    "text": "connected, we'd send down a prompt to"
  },
  {
    "startMs": 703120,
    "text": "ask the user if they'd want to map the"
  },
  {
    "startMs": 704880,
    "text": "unlink component component. Kind of"
  },
  {
    "startMs": 706720,
    "text": "mimicking elicitation."
  },
  {
    "startMs": 709279,
    "text": "If the user said yes, we'd send down"
  },
  {
    "startMs": 711040,
    "text": "another prompt to have the agent scan"
  },
  {
    "startMs": 713040,
    "text": "the code for potential matches,"
  },
  {
    "startMs": 714959,
    "text": "mimicking sampling. We then service them"
  },
  {
    "startMs": 717200,
    "text": "in a specified format or ask the agent"
  },
  {
    "startMs": 719040,
    "text": "to do so and then have them send it back"
  },
  {
    "startMs": 720880,
    "text": "in bulk to make a bunch of code"
  },
  {
    "startMs": 722720,
    "text": "connections. Um the screenshot on the"
  },
  {
    "startMs": 725279,
    "text": "right is the MCP inspector and if you"
  },
  {
    "startMs": 727920,
    "text": "haven't used it and you're developing an"
  },
  {
    "startMs": 729120,
    "text": "MCP server, you're doing yourself a"
  },
  {
    "startMs": 730560,
    "text": "disservice. It's a really great tool and"
  },
  {
    "startMs": 732079,
    "text": "it's open source and great. Um but the"
  },
  {
    "startMs": 735680,
    "text": "magic in our case was combining these"
  },
  {
    "startMs": 737760,
    "text": "two features because we could ask the"
  },
  {
    "startMs": 739680,
    "text": "user for for permission. we can have the"
  },
  {
    "startMs": 741680,
    "text": "agent give us those suggestions and we"
  },
  {
    "startMs": 743200,
    "text": "can map them and in the end the users"
  },
  {
    "startMs": 744480,
    "text": "got a better experience. Um that's"
  },
  {
    "startMs": 746560,
    "text": "pretty great. Um the last sort of little"
  },
  {
    "startMs": 749360,
    "text": "thing that we did was we wanted to make"
  },
  {
    "startMs": 751519,
    "text": "our output the best it could be and we"
  },
  {
    "startMs": 753600,
    "text": "didn't necessarily know when we were"
  },
  {
    "startMs": 754880,
    "text": "starting you know we had our eval but we"
  },
  {
    "startMs": 756560,
    "text": "didn't know if the react tailwind code"
  },
  {
    "startMs": 758000,
    "text": "would be successful for other types of"
  },
  {
    "startMs": 759279,
    "text": "code bases. Um and outside of the"
  },
  {
    "startMs": 761200,
    "text": "elicitation and sampling which didn't"
  },
  {
    "startMs": 762800,
    "text": "really work as we wanted there was no"
  },
  {
    "startMs": 764079,
    "text": "way of getting that information from the"
  },
  {
    "startMs": 765279,
    "text": "user. So we added some optional query"
  },
  {
    "startMs": 767360,
    "text": "arguments to our tool calls for ones"
  },
  {
    "startMs": 769040,
    "text": "like get design context where they would"
  },
  {
    "startMs": 770639,
    "text": "send back what sort of language what"
  },
  {
    "startMs": 772160,
    "text": "sort of framework the user might be"
  },
  {
    "startMs": 773519,
    "text": "using. This is imperfect uh agents lie"
  },
  {
    "startMs": 776560,
    "text": "but it was at least a signal for us to"
  },
  {
    "startMs": 778800,
    "text": "understand like oh this type of user"
  },
  {
    "startMs": 780720,
    "text": "this felt user may not have had a good"
  },
  {
    "startMs": 782160,
    "text": "experience. Perhaps it's because our"
  },
  {
    "startMs": 784240,
    "text": "translation layer wasn't working as"
  },
  {
    "startMs": 785600,
    "text": "well. We have found that that works"
  },
  {
    "startMs": 787040,
    "text": "pretty well but this was kind of our way"
  },
  {
    "startMs": 788320,
    "text": "of verifying that."
  },
  {
    "startMs": 790399,
    "text": "Um while we were working towards our"
  },
  {
    "startMs": 793279,
    "text": "first beta, we know we wanted four"
  },
  {
    "startMs": 795279,
    "text": "things. We wanted to launch quickly. Um"
  },
  {
    "startMs": 798240,
    "text": "we wanted to have the highest possible"
  },
  {
    "startMs": 800240,
    "text": "bar for our security. We wanted to"
  },
  {
    "startMs": 801680,
    "text": "respect file permissions. And we wanted"
  },
  {
    "startMs": 803760,
    "text": "to respect our pricing impact packaging"
  },
  {
    "startMs": 806079,
    "text": "so we didn't have abuse vectors. And so"
  },
  {
    "startMs": 808320,
    "text": "after the spec changed and introduced"
  },
  {
    "startMs": 810000,
    "text": "OOTH in March 2025, we had to decide"
  },
  {
    "startMs": 812320,
    "text": "whether to keep our MCP server local or"
  },
  {
    "startMs": 814480,
    "text": "sort of switch to the new remote server"
  },
  {
    "startMs": 816160,
    "text": "using streamable HTTP and kind of like"
  },
  {
    "startMs": 818240,
    "text": "work on all the off problems. Um we"
  },
  {
    "startMs": 821360,
    "text": "punted so until HMR there wasn't this"
  },
  {
    "startMs": 824079,
    "text": "offspec to to build from and we could"
  },
  {
    "startMs": 826000,
    "text": "easily relay off from our web app to our"
  },
  {
    "startMs": 828880,
    "text": "desktop app. So for folks who don't know"
  },
  {
    "startMs": 830560,
    "text": "the Figma desktop app is Electron and so"
  },
  {
    "startMs": 833440,
    "text": "the front end of it is a web app and we"
  },
  {
    "startMs": 835360,
    "text": "basically just run figma.com in that and"
  },
  {
    "startMs": 837279,
    "text": "then we have an um IPC uh bridge between"
  },
  {
    "startMs": 841360,
    "text": "the two and that sends it to our node"
  },
  {
    "startMs": 842639,
    "text": "process that allows us to talk to the"
  },
  {
    "startMs": 844079,
    "text": "user's file system. Um we then sort of"
  },
  {
    "startMs": 846959,
    "text": "expose a server events server in node"
  },
  {
    "startMs": 850079,
    "text": "and that way clients could talk directly"
  },
  {
    "startMs": 851839,
    "text": "locally. The local story was also really"
  },
  {
    "startMs": 853760,
    "text": "great with enterprises because they kind"
  },
  {
    "startMs": 855120,
    "text": "of like the idea of our data not being"
  },
  {
    "startMs": 856560,
    "text": "sent anywhere. Um, this architecture was"
  },
  {
    "startMs": 859680,
    "text": "our fastest path to getting something"
  },
  {
    "startMs": 861199,
    "text": "into the hands of users to understand"
  },
  {
    "startMs": 862720,
    "text": "product market fit and what kind of"
  },
  {
    "startMs": 864480,
    "text": "tools and use cases folks had."
  },
  {
    "startMs": 868480,
    "text": "Um, we launched the MCP server"
  },
  {
    "startMs": 870560,
    "text": "internally and the reception was"
  },
  {
    "startMs": 873440,
    "text": "extremely honest. Um, we [laughter]"
  },
  {
    "startMs": 876800,
    "text": "uh but we we worked out a lot of the"
  },
  {
    "startMs": 878399,
    "text": "kinks and we started to get some really"
  },
  {
    "startMs": 879600,
    "text": "positive feedback in the community um"
  },
  {
    "startMs": 881839,
    "text": "from from a bunch of nice folks. Um, but"
  },
  {
    "startMs": 884639,
    "text": "launching this part was just the"
  },
  {
    "startMs": 885839,
    "text": "beginning. Um we had a lot of"
  },
  {
    "startMs": 887440,
    "text": "improvements that we wanted to make and"
  },
  {
    "startMs": 888639,
    "text": "we immediately started working on the"
  },
  {
    "startMs": 889760,
    "text": "remote server as soon as we launched."
  },
  {
    "startMs": 892399,
    "text": "Um clients were on different timelines"
  },
  {
    "startMs": 895279,
    "text": "and we were still trying to figure out"
  },
  {
    "startMs": 896800,
    "text": "you know where we're going but we knew"
  },
  {
    "startMs": 897839,
    "text": "we wanted to get the remote server out"
  },
  {
    "startMs": 899040,
    "text": "so that's what we worked on. Um in"
  },
  {
    "startMs": 901600,
    "text": "September we launched the remote server."
  },
  {
    "startMs": 903760,
    "text": "We ged both servers in October 2025. Um,"
  },
  {
    "startMs": 907519,
    "text": "and then we started adding read and"
  },
  {
    "startMs": 909199,
    "text": "write capabilities and kind of all these"
  },
  {
    "startMs": 911680,
    "text": "things combined ended up making for"
  },
  {
    "startMs": 913360,
    "text": "Figma one of the fastest growing"
  },
  {
    "startMs": 914720,
    "text": "products that they've ever had, which"
  },
  {
    "startMs": 915920,
    "text": "was not something we expected when we"
  },
  {
    "startMs": 917360,
    "text": "started working on this."
  },
  {
    "startMs": 919519,
    "text": "Um, so late last year, I started working"
  },
  {
    "startMs": 921839,
    "text": "on a slightly different thing. Um, we"
  },
  {
    "startMs": 924560,
    "text": "started to see some research that"
  },
  {
    "startMs": 925680,
    "text": "designers really wanted to shift to"
  },
  {
    "startMs": 927120,
    "text": "writing production code in certain cases"
  },
  {
    "startMs": 929040,
    "text": "and we didn't really have a dedicated"
  },
  {
    "startMs": 930399,
    "text": "product for this. So I started hacking"
  },
  {
    "startMs": 932320,
    "text": "with a bunch of MCP MCP folks at an"
  },
  {
    "startMs": 934800,
    "text": "offsite and this eventually became"
  },
  {
    "startMs": 936240,
    "text": "something called make in your local"
  },
  {
    "startMs": 937519,
    "text": "codebase uh which is kind of Figma's"
  },
  {
    "startMs": 940399,
    "text": "agent solution for for working on on git"
  },
  {
    "startMs": 943040,
    "text": "GitHub and and local code bases. Um and"
  },
  {
    "startMs": 945519,
    "text": "the reason I bring this up is only"
  },
  {
    "startMs": 946880,
    "text": "slightly self- serving but it relates to"
  },
  {
    "startMs": 948320,
    "text": "this this next slide. Um if there's one"
  },
  {
    "startMs": 951120,
    "text": "thing you want to take away from this"
  },
  {
    "startMs": 952240,
    "text": "talk it's that we're so early like this"
  },
  {
    "startMs": 955680,
    "text": "has not been a long time. The MC MCP"
  },
  {
    "startMs": 958480,
    "text": "spec is only two years old and we're"
  },
  {
    "startMs": 960160,
    "text": "still figuring out the best way to do"
  },
  {
    "startMs": 961920,
    "text": "things. And then second, um, Figma's"
  },
  {
    "startMs": 965120,
    "text": "done a great job of letting engineers"
  },
  {
    "startMs": 966800,
    "text": "build and figure out, uh, what's next"
  },
  {
    "startMs": 968959,
    "text": "and letting them run with it run with"
  },
  {
    "startMs": 970399,
    "text": "it. I wasn't staffed on MCP. I wasn't"
  },
  {
    "startMs": 973040,
    "text": "staffed on our make product, but I ended"
  },
  {
    "startMs": 975120,
    "text": "up helping them be built um, just"
  },
  {
    "startMs": 977279,
    "text": "because I was kind of given the leeway"
  },
  {
    "startMs": 978639,
    "text": "to do so and learning a ton along the"
  },
  {
    "startMs": 980320,
    "text": "way. Um, that's all for my talk. I'll be"
  },
  {
    "startMs": 984320,
    "text": "around today and tomorrow, but feel free"
  },
  {
    "startMs": 985680,
    "text": "to reach and happy to talk about MCP,"
  },
  {
    "startMs": 987279,
    "text": "Figma and all that. Thanks so much for"
  },
  {
    "startMs": 988800,
    "text": "your time."
  }
]