• Design is not just about creating the end result, but also a collaborative process.
  • Exposing the process makes design more accessible and iterative.

    Kris Rasmussen
    So we knew from day one that we had to care about performance, but we also felt like the design process was a little bit broken. We were still stuck in this kind of world of, you know, almost like print artifacts, like, you know, where, you know, you’re creating something and like, you’re literally shipping The result and you’re just like embedding it into, you know, a newspaper or, you know, a simple static website or something like that. Um, and the reality is like design has become so much bigger than that in the context of building digital products, you’re not actually even producing the end result. Oftentimes you’re usually, you know, visualizing what the end result could be to help bring your team along in the line. Um, and so
    • Figma wanted a vibrant plugin ecosystem like Sketch’s but without the instability.
  • They solved this by compiling a small JavaScript runtime to WebAssembly and using it as a sandbox, controlling access and enhancing security.

    Kris Rasmussen
    Yeah. Um, yeah, that was a really interesting time. I think, um, like to your point, I think a lot of people nowadays take it for granted that it’s, like, totally possible to allow third-party developers to run custom code inside of the Same kind of web process that your application’s running and not get access to sensitive data and whatnot, or not totally screw up your application. But we knew that we wanted to provide an extensibility model. Sketch had a very vibrant plugin ecosystem at the time that we were developing, and we knew that we needed to be competitive. But we also had learned that there was a lot of problems with the model they had created and that they had exposed their entire internal kind of object model to third-party developers. And as a result, every time they updated their application or their own you know their own kind of object model a lot of plugins were breaking and so we wanted to be really intentional Around what we exposed to third-party developers both from the perspective of security but also from the perspective of like ensuring that they’re they’re binding to the interfaces That we actually can maintain over time um and so yeah we explored realms um which had some issues at the time i’m not actually up to speed on where it’s at now, just because we don’t really Need it anymore. But ultimately what the team did, which I think it just, it still sounds so crazy, is we basically found a small JavaScript runtime that we could compile into a LASM, you know, executable Inside of our address space. And then we expose scripting languages or scripting interfaces via that runtime just like you would in developing a game engine and essentially use that embedded javascript runtime That’s running inside of effectively a javascript runtime as a sandbox in order to really control what these third-party developers could do with with customer files and limit access Accordingly to build trust and ensure that people could install things without worrying too much about it. So yeah, it’s amazing in retrospect that all of that worked out and that it’s as fast and performant as it is. But yeah, it’s credit to the team for really taking their time to look at the solution space and pick something something pretty bold that ultimately I think contributed a lot to our Success over the years.
    • Connect Figma design systems to code libraries.
  • This helps ensure developers reuse existing code, promoting accessibility and consistency.

    Kris Rasmussen
    And so we’ve been working with a number of our customers who had been building kind of internal prototypes and internal tools to connect their figment design systems to code so that It’s very clear that like there is already code that your team should be using. Right. Because sometimes like we build these like complex engineering design systems, but then we struggle to get people to use them. People like end up recreating the same button over and over again. You get all this accidental complexity and one button’s accessible, the other one’s not or whatnot. And so now with DevMode, we have this ability in code to configure the mapping of your code libraries, like say your kind of Swift UI framework or your React frameworks and the corresponding Design systems in Figma.
  • Balancing Code Transparency and Editability

  • Code generation tools should expedite the development process while remaining predictable and controllable.

  • Engineers need to understand the broader system and fine-tune generated code, so transparency is key.

  • Code Connect acts as a primitive, allowing explicit viewing and adjustment of system mappings.

  • This approach provides context for AI-driven streamlining, enabling a balance between automation and control.

  • Direct design-to-code translation has limitations, as design often prioritizes alignment over explicit detail.

    Kris Rasmussen
    And so you got to do it in a way where it expedites the process, but also does it in a predictable way that you can still control and fine tune and adapt. And so for us, like Code Connect in its current form is essentially like a basic primitive in that process. So it’s like a way to more explicitly view the mapping that the system has and potentially will come up with in the future and then fine tune it accordingly. So you still have control over that output. And then of course, the next step from there is now that you have this, you know, these, these mappings it’s essentially like, if you think about in modern AI terminology, like you have, You have a lot of information that provides a very good kind of rag based workflow to find the right context, to continue to kind of streamline the conversion and remove a lot of the tedious Aspects of the process of translating from this design medium to this code medium. The thing that I think people underestimate though is that it’s not just about direct translation. There’s definitely a lot of things you can
  • Design Tool Intent

  • Designs are created to build alignment, not explicit details, leading to mismatches with engineering implementation.

  • Engineers infer intent from designs, codebase knowledge, and designer interaction, requiring context beyond the design file.

  • Direct design-to-application conversion is flawed due to this missing context, which isn’t always encoded in design tools.

  • DevMode aims to bridge this gap by enhancing design explicitness for production, both magically during code generation and by facilitating design exploration across states and form factors.

    Kris Rasmussen
    The thing that I think people underestimate though is that it’s not just about direct translation. There’s definitely a lot of things you can just directly consume from a design tool in code, but oftentimes the design process is like optimized to build alignment more so than to kind Of build explicit details. And what a lot of engineers are doing, I’m sure you all have experienced this, is trying to actually infer that intent from not just the design file itself, but also what you know about The code base and the company and the designer you’re working with and whatnot. And so that’s why oftentimes like, you know, going all the way to working application is imperfect because there’s missing context, right? The tool, even if you could encode it in the tool, people don’t always take the time to encode it in the tool. And so I think the other area we’re really excited about with DevMode and the design tool in general is figuring out how to help people bring these sort of designs closer to the level of Explicitness that is required to correctly implement them in production. And I think that can happen on both ends of the spectrum.
    • Use AI to lower the floor for design so more people can participate.
  • Also use it to raise the ceiling of what people can create.

    Kris Rasmussen
    I think there’s just I mean, because AI is at the basic level of technology, rather than a, you know, a product in and of itself, I think there’s just so many different ways you can apply It, especially in the context of the ecosystem that we’re creating in Figma. There’s a couple of different extremes that we tend to kind of anchor ourselves on just for sake of discussion and alignment. I think Noah, our head of design at our config a couple of years ago, sort of laid out this kind of framework of thinking around like you know using ai to lower the floor for design so that More people can process can participate in this design process and as i said it’s not just about you know using the design tool it’s also about figuring out how to bring designs to life And you know handle all the different responsive edge cases and whatnot i think we can also raise the ceiling of what people can create. I think Figma is a testament to the fact that differences in degree can yield differences
    • Professionals want more than just generating something from a prompt; they need direct manipulation.
  • AI tools should marry new input modalities (like natural language) with existing interfaces and direct manipulation.

    Kris Rasmussen
    So I think that we’re really excited about exploring for our own use cases, how to marry the best of these new input modalities that the technology unlocks, like natural language, maybe Voice someday and whatnot, with existing interfaces and direct manipulation. And in trying to give people the choice so that, you know, maybe when you’re just kind of roughly trying to visualize someone else’s idea, you can ask the tool to kind of help you get started, But do it in a way that is consistent with your brand and your identity and, you know, your existing code base. But then you still can just like, you know, grab the keyboard or grab the mouse and, you know, go click on the thing and like drag a color wheel and figure it out and build up your own strong Mental model so you can reason about it better for yourself rather than relying on some random model to do so with the context you give it. So I think there’s just a ton of opportunity for us and we’re excited about all aspects of it. I think we’re excited about helping people explore the design solution space faster. We’re also excited about how to help designers do more of the productionization inside of the tool. And then engineers basically consume that more directly. So basically trying to figure out how to infer a lot of the kind of implicit context that we all take for granted that actually takes a lot of time and it’s very tedious to make explicit.
    Andrew
    Yeah, I like how you guys are approaching it. It’s like a lot of AI tools are like one shot, I’m just going to generate everything. I have no ability to like go in and tweak it and like you wouldn’t want something like that in Figma. And you guys aren’t just stopping at like generation, you’re also like where I find AI features like really