Jordan Singer: Building AI Design Tools at Figma

0:05Hey, everyone, and welcome to Generative Now. I am Michael Magnano, and I am a partner at Lightspeed. And today, we're sitting down with Jordan Singer, a founder, designer, developer, and in his words, a builder. Jordan's been tinkering with AI and design for about 10 years. And in 2020, he amazed the design community with a tool called Designer, which he then elevated into a full-fledged AI design startup called Diagram. In 2023, Figma acquired Diagram when the company was doubling down on their AI strategy. I talked to Jordan about being a product designer at Figma and building the next generation of AI design tools.

0:44So check out this conversation I had with Jordan Singer at Figma. Hey, Jordan. Hey, Michael. It's great to see you. Yeah, you too. Thanks so much for doing this. Thank you for having me on. I'm very, very excited to talk to you, not only because you've been the founder of a really cool company within the design community and because you do AI at Figma, one of the coolest companies in the world, in my opinion, but really wanted to get to understand your background, how you got to this point of doing AI at Figma. So if you don't mind, take us back. Give us the story of Jordan Singer. I really got my start, I think, in code first, actually, despite being more of a designer as of the past several years.

1:29And I did the whole computer science thing in school, and I was just really fascinated by the idea to write code, to create experiences, to build my ideas, as I call it. I think there's a lot of times where I wish software existed and I find the opportunity to sort of build things, little side projects and solve a problem for myself that I can also put out into the world and help others and open source. and the design stuff started to come in, I think, when I was building my own side projects and they just didn't look so good visually. Apple was one of my kind of North Star inspirations. And so as I was building things, I started to also design them and try to really learn by doing.

2:19I don't really have a formal education in design specifically, I used to just copy, you know, but back then just copy what I thought looked good and mimic things and just take a lot of inspiration from what I enjoyed using personally. And so that kind of intersection of design and code is really where I got my start in building things and designing them at the same time and just kind of getting generally into creating products that one, I think solved a need or a desire that I had for something to exist in the world. but then also, again, being able to put something out there and have other people use it and turn it into a product and give it a domain and let it take on a life of its own.

3:03So that's how I started to get into this world of the intersection of design and code and for as long as I can remember, just have kind of been hacking side projects together and building things. And that spirit certainly has lived on through starting a company, getting into design meets AI with Diagram and, you know, more recently joining Figma. I feel like this is a somewhat of a common pattern transitioning from, uh, develop, you know, being a developer to being a designer. I can relate to that. I was also a CS major and started my career coding. And then I probably now identify more as a designer.

3:45Um, when I, when I did something very similar, I designed, uh, the company, the product for the company I found at anchor without having ever done it before much. It sounds like much like you may be curious. Like, how do you, how do you identify right now? Do you identify more as a developer or more as a designer? Like where does your identity fall on that spectrum? Yeah, I think within Figma specifically, I'm officially a product designer, but I like to think of myself as just kind of a builder in general. And that accounts for design and code and marketing and brand and all of these things together.

4:22specifically when I work on side projects, I love touching all of those aspects and thinking about the whole picture, not just one given, you know, specific kind of role. So I think of myself as a generalist more in that way. But as of recently, you know, and one of the things I really love is in a design role, you really have the opportunity to sort of visualize what the future looks like and get people really excited and, you know, having a visual to allow people to react and kind of see and viscerally, you know, think about something I think is really important. And I love the way that design as a discipline allows you to sort of think about the future and really dream, you know, dream about what it looks like.

5:10So that's, I would say I leave more designer these days, but certainly I love, you know, all of it. Yeah, like you said, you're a builder. And I think from the outside looking in, I definitely get that impression. I think other people do. They have this impression of you as a builder. You've built a lot of different things. I mean, chat HTTP, airport, obviously, diagram. Maybe I'd love to hear a little bit about some of these things that you build, maybe before diagram. Talk about some of these experiments, build your own ideas. What led to that? And maybe what are some of the experiments that you're really proud of?

5:45I was tinkering with natural language as far back as, you know, I think 10 years ago. I was still in college and thinking about experiences where there was something always so fascinating to me about the computer's ability to understand natural language. And there was this moment in time in like the 2015 era of like invisible apps and chatbots. And it was very, it's funny to see the evolution now, but it was very naive back then, which was, you know, you could understand the general maybe sentiment of a given natural language string and sort of parse certain parts out and create a basic chat experience.

6:29And so some of my earliest ideas that I was thinking about were, I worked on this project a while back called Wonder, for example, that let you in natural language sort of store these memories into this database. You could say like, remember that my gate code is 1234 or something. And later on, you could ask for that memory in natural language, like what's the gate code? And so natural language as an input was always really fascinating to me. Even back when sketch, you know, was kind of the design tool of that era, thinking about natural language inputs into a design tool. There's something so fascinating to me about the idea that you could say, you know, draw a rectangle.

7:15And it understood what that meant and it could do that for you on the canvas. And those were some of the things, you know, going back to, you know, 10 years ago, some of the natural language stuff I was exploring. I went, everyone was at home during COVID. There was this huge kind of cultural moment around test flight apps and getting access to the newest things. And airport was this iOS-based experience where it was effectively an app store for test flight apps. and just the opportunity to help developers sort of distribute their test flight apps to people who are interested in living on the cutting edge was something I worked on.

7:57So just, you know, I think lots of experimentation and just being curious and seeing how I could apply technology to the skills I had and see, you know, kind of what products I could come up with. A quick side note detour about AirPort. You know, I know that Apple has a rule around, like, You're not allowed to make app store like products. Just curious, something I actually always wondered about this product. Like did Apple ever take issue with this notion of creating a marketplace for test flight apps? And what was that like? Indeed. Yeah, we had lots of back and forth with, with Apple actually, um, you know, test flight when you, when you get approval initially has a 10 ,000 person tester limit.

8:36We tried on several occasions. This was a few years ago to, uh, get it live on the app store. and we ended up making its way to executive app store review with Apple and having conversations with folks. And ultimately, that idea specifically got held up around this idea that you can't have an app that redistributes other third-party apps on the app store. So we were kind of stuck in this 10 ,000 tester world on iOS and we had to adopt ourselves to web to open it up to more people but uh that was certainly a fascinating time of kind of going back and forth with apple and seeing you know how far we could push their their guidelines lots of good startup stories uh include include a story around going to battle with apple yes obviously i want to hear about diagram and i believe diagram um came from an experiment called designer is is is that accurate and and maybe you could tell us a little about designer and that transition of being a full fledged startup.

9:41Absolutely. Yeah. I mean, back to some of my earlier talk about focusing more on design. My first job out of school was was as a designer at Square. So I moved out to New York and worked with the Square team and joined the Cash App team inside of Square. And that was an amazing moment in time to see that, you know, rapid growth and development of that app and whole ecosystem. And this was also around the time that Figma really started to make its way into larger design teams as this real-time collaborative platform that just changed the way we designed. I mean, we used to have to send files back and forth and have an outdated version and all of these things several years ago at this point.

10:30But you use Figma for the first time and you realize, like this is the way design should be. It should be real-time, collaborative, not having to deal with versions. And one of the things at Square that happened was we made the transition from Sketch at the time to Figma, which was a breakthrough for remote collaboration across our team. But also, it came with a developer ecosystem and a really great API to build on top of the platform. And so some of the earliest things I did there were just building plugins again that I wanted myself to be able to use to save time and automate certain tasks and share those with our team to make them more efficient.

11:17And there was a moment in time when the GPT-3 beta first was making the rounds on Twitter. I think this was in the summer of 2020. So I think close to four years ago at this point. And I saw all the amazing things that people were doing with it online, just creating mind-blowing demos. And I immediately thought back to some of my early sketch meets natural language explorations, where I could say, you know, again, simple things like, draw me a rectangle. But if you fast forward to GPT-3 and what that empowered, not only could it understand the sentiment of what you were trying to say in natural language, but also give you a structured response that you could do something with.

12:06Sam Altman talks about the GPT models as sort of these reasoning engines. And so the idea that you could take some input and have it spit out some really smart output was what empowered this idea that made me start to connect a few dots across my experiences on a design team using Figma and how design systems was really at the core of the way teams started working, which was that you want to create consistency across what design is doing and your code base. You want designers to be designing really consistent experiences, no matter who's designing them or what feature it may be. And I saw design systems as sort of these Lego pieces and these blocks that you had to work with to compose a screen together.

12:59And there was a lot of pattern recognition that kicked in with that idea of design systems. And so the first thing I tried, like you mentioned, this idea of what I called designer at the time, was this notion that you could take an existing design system and describe a design that you wanted to create with it in words. And it would be really smart about how to compose those different design system pieces together to give you a screen that you wanted to design. And so that was the earliest explorations I did around true kind of modern, what we think of as modern AI meets a design tool like Figma.

13:41And the developer ecosystem sort of empowered that. And it's true that, you know, while I was at Square, I was kind of tinkering with that as a side project. I was thinking about maybe what was next for me. I've always wanted to start a company. And, you know, one thing led to another and that that certainly that experiment kind of formed the basis for what went on to be diagram and thinking about exploring, you know, AI meets design. And what does that sort of future look like? What's that transition like? You know, you're starting to tinker on this while you're working a full time job. When do you decide to make the leap?

14:18How do you actually make that leap? That was a really tricky decision because I loved my experience at Square, especially on the Cash App team. We were moving so fast and seeing the growth during that period. I was there, you know, I think from like 2017 to 2021. And I always loved to just tinker on the side with ideas and designer and the GPT meets Figma stuff was kind of a side project for me. and it really, when I shared it, sort of took on a life of its own. People found it really polarizing, which I took as an interesting sign that I was on to something. I had always wanted to start a company.

14:59I felt really great about my experience at Square and I learned so much and grew so much, especially as a designer, working with an amazing design team there. And I just kind of wanted to try something new. And I actually left Square, I think in the summer of 2021, not knowing exactly what I was going to work on. But I, given my side projects, I had a sort of backlog of ideas that I wanted to go deeper on. And something about that designer exploration that GPT and AI meets design and Figma just kept coming back to me and was staying top of mind. And that's really when I decided to sort of go all in on that and start a company around it because I saw the wave of AI sort of continuing to grow.

15:49And it felt like the future to me and I wanted to live at the forefront of what that looked like and decided to start Diagram. So talk to us about Diagram. I mean, obviously, like, you know, it was a number of really amazing Figma plugins evolving around AI. Maybe what were some of the really exciting learnings and what were the plugins that really, really resonated with the community? Yeah, you know, I think one thing that's really amazing to look back on is just the fact that you can now build a business on top of Figma, I think really speaks to the extensibility of the platform and this infinite canvas and their APIs.

16:29So it is quite amazing how a Figma plugin you can kind of think of as just a little mini website and you can do almost anything inside of Figma that you can imagine. So that premise and that bet was really the idea that we wanted to meet designers and teams where they spent the majority of their time, which was inside of Figma. So we actually started with non-AI plugins, ironically enough, kind of focusing around design automation. So if you're familiar, for example, with this app that Apple makes called Shortcuts, which sort of allows you to stack these automations together that trigger at certain times to do things really quickly.

17:18Diagram worked on a plugin called Automator that's still alive in the community today that basically takes all the possible things you can imagine doing in Figma like drawing shapes or doing you know for loops or more advanced kind of variable stuff and styles and all of these things and and distilling it down into a visual kind of scripting plugin where you could piece together these really complex automations that in a button click can save you literally 20 minutes of time. And so that really kind of was our first experiment with Figma plugins and thinking about how to weave our way into design automation and what AI meant for Figma.

18:05So that's where we got our start, which was purely with no AI, but just design automation in general. And that today is one of our more popular plugins that Diagram made. And we started to make our way into AI as the timing was just right, as things like image models were advancing, you know, things like Dolly, Mid Journey were, you know, becoming all the craze at the time. And so one of our kind of primary AI plugins that we introduced atop Figma was called Magician. And it was this idea that we could take smaller subsets of what was happening in AI and apply them to the design process. So think about things like as image models were advancing, the ability to ask Magician for generating you an SVG icon that you could use in your design.

19:04or the ability for you to intelligently rename your layers in Figma that typically go unnamed and you end up with frame 7532. How do you decipher the context of the canvas to intelligently understand what's happening and make use of AI? So Magician was kind of a bundle of a lot of little AI features like that that was really our foray into true kind of AI inside of design. And is that all happening in Magician? Is that all happening through natural language prompts? Like you're, you know, you're, you're, hey, create me an icon that does X, Y, and Z. Is that how it works? Some of the different features within Magician were either prompted by natural language.

19:55So, of course, we had kind of the general create an image or create an icon that were prompted. And you also had things like even copywriting, which is one of the more kind of frequent things you do as a designer that might sometimes be an afterthought or you just want some placeholder copy. You know, you could select the text layer and hit a button and it'll, you know, understand the context of your design and try to come up with a string to replace that that makes sense without you having to think through like, what should I say here? So little things like that to sort of speed up some of the design process in interesting ways.

20:32And was Magician kind of, I mean, like you said, it's sort of the first foray into AI for Diagram, but is that the thing that really got Figma's attention? That maybe led to the acquisition, or was it kind of all things combined? We sort of took this really interesting path where we were experimenting quite a bit. So we started with Automator and design automation, which actually had nothing to do with AI, ironically. Then we got into Magician, which started to sprinkle in hints of AI for design tasks. And what we started to work towards was this vision of a product in a true sort of design co-pilot that we referred to as Genius.

21:13Genius was an exploration that took a lot of inspiration from things like GitHub co-pilot that really seamlessly integrated into your code editor as you're writing code. It's just suggesting what comes next. And we wanted to see how we could apply that experience to a design tool. We got so far along before we started having further discussions directly with Figma. But we had a lot of, I think, really fun ideas around this notion that Genius was kind of another user in your Figma file that had its own cursor that could show what it's thinking about and what it's doing. And you could chat with it back and forth and instruct it to do things and help you and make suggestions as you're designing.

21:59And so that was kind of the North Star that we were working towards until we started going a little bit deeper with Figma. Talk to us about the acquisition. Obviously, acquisitions are always really intense, exciting, stressful processes. What was this one like? With the added layer of, I believe at the time, Figma was obviously a negotiations to be acquired by Adobe. Would love to hear the story of the acquisition. Going back as far as when I first started using Figma, one thing that always struck me was the community and the team and how open and receptive they were to listening to feedback and engaging with people on Twitter.

22:44So through that, I got to meet a lot of the folks that are still at Figma to this day, including when we started raising money for Diagram, I had a few conversations with Dylan at the time. On one hand, he was trying to recruit me to join Figma and forego the whole starting a company thing. But long story short, Figma Ventures, sort of their venture fund ended up investing in Diagram and we always stayed in really close contact. And I think it was early last year, we had joined OpenAI's Converge startup fund and started working with them and getting early access to new models and things like that.

23:32And this was around the time that Figma and Dylan had reached out saying, you know, hey, we're starting to think a lot more about AI these days. We know and we've seen what you guys are up to, you know, what might a closer collaboration look like. And this was, again, all under the, and after the Adobe stuff sort of was announced, all things considered, when Dylan, you know, kind of came to us and said, hey, we'd love to find a way to work together. I think it was a matter of a few months from those initial discussions to joining Figma. So we were really, really excited about the opportunity to continue the vision that we started with a diagram.

24:19And, you know, the same is very much true today. And I think we're getting really excited about the ways that AI is starting to manifest inside of Figma itself. Sounds like the relationship with Dylan that you had was really important to this acquisition happening. I mean, maybe like as you think about acquisitions, I mean, can they happen without that? Like you hear these stories about big companies kind of swooping in and buying up startups. But a lot of the stories that I hear, like this one, seem somewhat predicated on an existing relationship. Would you say that's accurate? Yeah, I think it certainly helped that we knew the team very well, and we were always in contact with a lot of people at Figma, staying close, given we were building on their developer API with things we wanted to see and how to help advance some of the things we were thinking about and push the envelope there.

25:11So there were plenty of warm leads at Figma and close relationships that we held that I think, you know, certainly I think when Figma thought about how to advance sort of some of their AI efforts and find folks to help push what they were thinking about forward, I think we were certainly top of mind there. So, yeah, absolutely. I think the relationship with Dylan and the Figma team certainly helped as there was a lot of trust and past experiences together. That's awesome. Shifting gears to AI at Figma. Figma is arguably the most exciting company in the world when it comes to design, product. Definitely the most exciting private company.

25:58I think the tool is amazing. I use it. I love it. So many people do. and now sounds like Figma is very focused through the work you're doing and maybe some others on AI. Maybe starting at a high level, what can you tell us about the AI initiatives at Figma and what can we expect? Yeah, I think that AI is going to continue to play a really central role across the entire Figma platform. And as of late last year, we got a really great start with FigJam AI. So the whiteboarding kind of brainstorming tool. and you know I think a lot of the things we think about when we're when we're adopting AI inside of Figma and why we've you know perhaps taken a bit a bit longer to sort of manifest these ideas is because we're really trying to be incredibly thoughtful about the ways that AI impacts everyone that uses Figma across the product you know development team and find use cases that really strike a balance of utility and making people work faster and freeing up some of their time and unleashing their creativity.

27:08And so FigJam AI, I think, is a great example of the ways we've been thinking about in the context of FigJam with using that tool for meetings, for example. It can be quite time consuming to compose an initial board or template together to conduct a meeting and the ability to sort of distill some of that down into describing a board or a template in a prompt and having it output exactly what you want. And then again, I say this a lot, I think the infinite canvas is actually one of the best places for AI because you've got this sort of really nice back and forth with AI where it can output something for you on the canvas, but also you've got this direct manipulation after the fact and you can tweak things yourself.

27:59And it's this really nice kind of flow that you get into. And so there are a number of features there that we thought about, like after you do a huge brainstorm of sticky notes with your team, how do you distill that down and summarize it into its essential parts and things like that. So that's where we got started with FigJam. And I think the fun part about designing for AI at Figma is there's really no shortage of ideas for where we think AI can manifest and apply itself. And I think we think about it in a few ways. We refer to this idea often of raising the ceiling for those existing designers and kind of pushing the envelope and raising the bar.

28:44and lowering the floor and allowing more people to participate in the design process and contribute. And so when we think about what Figma AI looks like in the design editor, I think one of the more kind of interesting things we've been exploring is how do we solve a lot of these little paper cuts and gripes in the design process that really add up and compound as you're designing something. And you wonder, you know, why is this the way it is? or maybe you have to jump out of your flow and do a Google search or something to reference and pull back into Figma. How do we make the flow of using Figma much easier, much faster, and bring some of those core workflows into Figma itself thanks to AI?

29:33For those that, quite a large audience of those that use Figma are non-designers, and how do we allow them to contribute and visualize their ideas? I think a big kind of theme we're thinking about is how you go from imagination to reality. And, you know, there's no shortage of ideas that people have. And sometimes it's limited to sort of your skill set as to how well you can convey an idea inside of Figma. And people might find the editor somewhat intimidating. And I think AI has a tremendous opportunity to make that feel a lot simpler and easier to go from idea to a design inside of Figma. So we're really excited about all the ways that AI will play a role there.

30:23When you say raise the ceiling, the way I interpret that is that kind of like the quality or the capability of design will increase on sort of like a per designer basis. And when I hear you say lower the floor, I think more accessibility, more people will be able to design. You mentioned there are a lot of, you know, sort of non-designers using Figma. I guess through those two things, like how does the role of a designer change in the world of AI? I mean, do the hard design skills matter as much? Can anyone design a product or an app or a website now? Like what does a designer look like several years into the future thanks to AI?