Spotlight on Canva | Code w/ Claude
00:00:00.000 | Hello everyone.
00:00:08.300 | Hi everyone.
00:00:09.100 | Hello, hello.
00:00:12.820 | Thank you.
00:00:13.400 | Thank you all so much for joining me today.
00:00:16.120 | My name is Danny Wu.
00:00:17.960 | I'm head of AI products at Canva,
00:00:20.360 | and we're a visual communications platform.
00:00:23.040 | Today, I'm really excited to share a bit about how
00:00:26.760 | we have built Canva Cloud and how we've
00:00:29.360 | been working with Anthropik and using the amazing Cloud models.
00:00:33.600 | I'll be first starting by giving an intro to Canva,
00:00:36.500 | as well as taking it behind the story of Canva code,
00:00:38.960 | like what gave us the idea, why we built it,
00:00:41.900 | as well as the things we learned, and finish up
00:00:44.620 | by sharing a few lessons that will hopefully
00:00:47.420 | be helpful and some time in Q&A.
00:00:49.700 | So I'm incredibly excited, and let's jump right in.
00:00:55.160 | Firstly, just a little bit of context about Canva, in case
00:00:58.720 | you don't know what we are.
00:01:00.720 | What we do is we really bring the entire design journey and experience
00:01:05.320 | in to one simple page and one simple experience.
00:01:08.320 | A decade ago, design used to be quite inaccessible,
00:01:11.980 | and it was just quite hard.
00:01:13.980 | you had to learn how to use fairly complex tools that could cost a lot of money,
00:01:19.740 | and you had to go to so many different platforms and services to complete a design,
00:01:25.580 | like finding stock photos, getting the right fonts, starting with a template, or publishing.
00:01:31.220 | And what we do is we really have integrated all the different steps of this journey into just one page
00:01:37.820 | and one platform, so you can create a presentation, or you can create a poster, use all the templates, generate some amazing AI images, create some text, and publish to a website, publish to, or print it out, and get it delivered to your door.
00:01:52.820 | That's really what we do.
00:01:54.820 | And so we have a pretty simple mission, and we've had the same mission for the past decade and a bit, and it's really to empower the world to design.
00:02:04.820 | When we think about this, we really think about empowering absolutely everyone, whether you're a student, whether you're a teacher, whether you're a non-profit, or whether you're a marketer and creative,
00:02:16.820 | creative in a large enterprise, to design just about anything, publish it anywhere, with every ingredient, like photos, video, music, and more, supporting every language, as well as every single device.
00:02:29.820 | And the thing about AI is that we really see it as something that absolutely supercharges the core premise of what Canva was built to do, which is to allow everyone to make designs really simply and really easily,
00:02:44.820 | and make it take less time, instead of this being time-consuming and tedious, that you create amazing outputs really, really quickly.
00:02:52.820 | And as I'm sure you all know, the power of generative AI is just really helping us, helping us accelerate on all of those fronts.
00:03:01.820 | So when it comes to our AI strategy, we have a three-pronged approach.
00:03:05.820 | When it comes to things like really, to things like specialized things, like design generation and visual understanding, that's where we're really investing our efforts into developing our own models for our unique needs.
00:03:18.820 | But we're also really huge fans of our flexible approach, where we add magic everywhere to the Canva product, to the best commercially available and open-source models.
00:03:28.820 | And this really helps us deliver AI-powered features and workflows to users much faster, much more scalably, and also much cheaper.
00:03:38.820 | And finally, to round things off, we have our app ecosystem where any developer can build apps, including AI apps, for all of our 300 million-plus users.
00:03:50.820 | And just a bit of a short timeline of our AI journey, we started in 2017 using machine learning for search rankings and counter-recommendations, and that was already really cool.
00:04:02.820 | We launched Background Remover, which lets you take any image and would use computer vision to remove the background from it.
00:04:09.820 | And that continues to be one of our most popular and highest revenue driving features.
00:04:14.820 | With Diffusion Models and Gen AI Wave, we launched Text-to-Image, Magic Write, Magic Edit, Magic Design, and so much more as part of Canvas Magic Studio, which is a collection of integrated and native AI features that help you with just about every step of design.
00:04:30.820 | And actually, just a month ago in LA, we had Canva Create, and we had some very exciting launches.
00:04:39.820 | We launched Canva AI, we launched Canva Sheet, and of course, Canva Code, which I'm here to talk about.
00:04:46.820 | So what is Canva Code? Let me play a little video.
00:04:49.820 | If you have an idea, a dream, of what you want to create, just in Canva AI, just prompt it, describe what you want, and we use Quad to generate amazing interactive prototypes that really understand you and really help just about everyone, especially non-technical folks and non-engineers, create their dreams.
00:05:11.820 | And then with one click, including a Canva design, you can publish your website, get a custom domain, everything without touching a single line of code or knowing what CLI is.
00:05:23.820 | So what's the story behind it? And you might also think, you know, design and code, they don't seem like they naturally mix, right? So why did we, I guess, why did we make Canva code?
00:05:35.820 | So I actually want to zoom out a little bit. And when we build products at Canva, we like to describe it as going from the chaos to clarity spectrum.
00:05:47.820 | So at the very start, it might just be a low idea, it might just be like a simple vision deck that's not really thought through of something that's really, really cool.
00:05:57.820 | And there's a stage where there's just a lot of openness, but also a lot of confusion and chaos and just, what do we actually want to build? How should the flows work? Like, who is this for? Like, how might we build it?
00:06:10.820 | And as we answer those questions and get more designs, really refine them, we navigate through those stages and get to extreme clarity on the other end, which is definitely all of our happy place.
00:06:24.820 | We found that interactive prototypes are just so, so, so incredibly helpful at the earliest stages of chaos.
00:06:32.820 | They're so much more expressive. They allow, they allow teams, they allow teams, product engineer and design leads to communicate ideas using the highest fidelity.
00:06:41.820 | They allow stakeholders to actually try through, try and click through all the different, the actual experience and give feedback, test it with users.
00:06:52.820 | And this really helps us go from one to the very, very end.
00:06:58.820 | The thing about interactive prototypes is that they can actually take a bit of engineering time, very precious engineering time, while we're working on so many different plans, so many different goals, closing the loop with our users and fixing bugs from our past launchers.
00:07:12.820 | So they can, so they can, there's a resource cost to making really amazing high fidelity prototypes.
00:07:18.820 | And oftentimes, you know, if you have, if you have a triad of a product manager, a designer, engineer, like, jamming on this, there can also be a lot of back and forth to get something really right and really captured, especially for very wild ideas.
00:07:34.820 | We actually discovered just how amazing it is to be prototyping using Claude internally.
00:07:42.820 | And a lot of our teams have started actually using Claude to make interact with artifacts.
00:07:46.820 | Artifacts really changed how we do product development and dreaming at Canva.
00:07:50.820 | So when we had new ideas and new features that we want to build or new flows, like we're making an active prototype and putting it and sharing it around.
00:07:59.820 | And that really accelerated things that enabled us to make way more prototypes.
00:08:05.820 | So we started prototyping with Claude, and we started embedding them in Canva designs.
00:08:10.820 | You can actually see like a super early Claude artifact.
00:08:14.820 | We were trying, we're trying to, to update our search box and include, include our latest AI features.
00:08:21.820 | So we did a very, very low fidelity like Tailwind prototype.
00:08:25.820 | And if you've used Canva recently, you see that, you see that we've launched, we call this internally the Wonder Box.
00:08:32.820 | But then we also kind of realized, this is so cool, this is absolutely amazing power.
00:08:38.820 | But just using it for internal prototypes, that's like 1% of the way there.
00:08:43.820 | We realized just how much, like bringing the power of coding to everyday people and non-technical users unlocks.
00:08:52.820 | It's a whole, whole world of possibility.
00:08:54.820 | So whether you're, say, like a teacher creating an educational game, or whether you're like a wedding planner creating a seating charter tool,
00:09:01.820 | or like a marketer building interactive activation experiences, the possibilities are truly endless.
00:09:09.820 | And internally in Canva, across all of our teams, we really started using this functionality more and more for just about everything.
00:09:18.820 | But just like, you know, just like kind of Canva's like DNA, we also realized that this power is something that is very broadly inaccessible.
00:09:28.820 | Just about 0.5% of internet users are engineers and know how to code, which is a pretty small number.
00:09:36.820 | So what if we could bring this amazing power to the whole world, the rest of the 99.5?
00:09:44.820 | And that's really where like the idea, the idea and the vision for Canva code was born.
00:09:50.820 | We really wanted to make it incredibly easy for people to create entirely new interactive experiences.
00:09:59.820 | Like whether it's, you know, like a lovely thank you card to the team, whether it's a checklist for closing out the office, whether it's a meal plan generator, or even something like a timeline in a Canva presentation.
00:10:13.820 | There's so many possibilities, and these are actually real examples that our team has been creating.
00:10:19.820 | So what did we do?
00:10:21.820 | We did something that was actually pretty new to how we do product back then, which was just maybe two or three months ago.
00:10:27.820 | And we started making a functional prototype using Claude.
00:10:32.820 | Claude code wasn't out yet.
00:10:33.820 | So we just used, yeah, we just used, that was Sonnet 3.5 back then.
00:10:37.820 | And what we did, what we did with a functional prototype was it was a fully working experience that's not part of the main Canva code base.
00:10:46.820 | And just really allowed us to test, like, test different ideas, test different UI and concepts, and do that much faster and actually play around with it and use it every day.
00:10:58.820 | So it let us test ideas and test concepts, including really dreamy and really wacky ones, very quickly.
00:11:05.820 | It also allowed us to get real user feedback.
00:11:08.820 | So we did user testing sessions, and we put this in front of users, and gave them very little guidance, and just saw what the use cases were, saw how they used it, saw where they got confused, saw where the magic moment was.
00:11:20.820 | And it was also a really efficient ground for us to be experimenting with all the different models that are out there.
00:11:27.820 | And so we started building it in Canva for Rails, because after we got really confident about it,
00:11:34.820 | we hooked it up to Canva code base.
00:11:37.820 | We handled things like responsiveness, nine slicing, and editing, and camera design.
00:11:42.820 | But we also continued to iterate on our prototype, and basically that was essentially the next version, where we did things like div-based support, which is coming very, very soon.
00:11:55.820 | And that's also when we tested this experience across all the different camera surfaces Canva code can end up in.
00:12:02.820 | Like, you know, whether it's in the editor, whether it's on mobile, or whether you're on a presentation mode.
00:12:07.820 | We actually even printed out a T-shirt with a Canva code, just to make sure that it actually worked, which was pretty fun.
00:12:14.820 | Like, obviously it wasn't interactive, it was like more of just a static screenshot, but you can print it on a mug or a T-shirt.
00:12:21.820 | And the way it works is that we put Canva code creations on an iframe, since it is really arbitrary user-generated content.
00:12:29.820 | And we just used a similar approach to how we support embeds in Canva designs.
00:12:36.820 | When it comes to choosing the model, and why we ended up with Claude's solid models, this is definitely a really, really fun question to explore.
00:12:47.820 | And the first thought you all probably have is, you know, evals, evals, and evals.
00:12:51.820 | And that's definitely really important, especially for correctness.
00:12:54.820 | But when we looked at the model choice for Canva code, we had a few additional considerations as well.
00:13:00.820 | We really value how magical it is, and really like the delightfulness, as we like to call it.
00:13:06.820 | And when we tested across real user requests, the ability for models to handle very short and very under-specified user prompts.
00:13:15.820 | Things like, "Hey, can you make me a game that does blah?"
00:13:19.820 | Or, "Hey, can you make me a menu planner?"
00:13:23.820 | The user isn't really giving you very, very specific requirements, and the LLM just has to be inferred.
00:13:30.820 | That was really, really important to us.
00:13:32.820 | The model's ability to make amazing web designs was also super important.
00:13:37.820 | We are a visual communication platform after all.
00:13:40.820 | And finally, of course, things like latency as well as scalability and capacity were also very, very real and important factors.
00:13:51.820 | Back around March, we tested a series of models across not just whether it generated valid code, but also, subjectively, how good was that web design at following the instructions we have in the prompt around things like UI, UX, the information hierarchy, all that kind of stuff?
00:14:16.820 | How good is it?
00:14:17.820 | How good is that?
00:14:17.820 | How good is that?
00:14:17.820 | How good is that?
00:14:17.820 | How good is that?
00:14:18.820 | Things like SVG generations, which is something that we're always really impressed by with Claude's family of models.
00:14:23.820 | Things like animations, like it's able to set things like C index correctly.
00:14:28.820 | It's able to, you know, do colors, do timings really, really well.
00:14:32.820 | And we were just really delighted with -- we were already really delighted with Sonic 3.5 V2.
00:14:38.820 | 3.7 was a huge, huge step up.
00:14:41.820 | And with today's announcement of Claude 4, like that's something that's really a transformational leap in intelligence for coding.
00:14:49.820 | And we're also super excited about that as well.
00:14:51.820 | But I guess my takeaway here is like really think about, especially when you're launching to users, like think about the complete user experience and what they care about.
00:15:02.820 | Don't be super academical and just focus on, you know, things like how good it does at benchmarks or how good it does at, you know, like large code bases or really big requests.
00:15:12.820 | Like, does it actually do the things like generating icons and SVGs really well too?
00:15:18.820 | Because those are really important to all of our users.
00:15:24.820 | And finally, three lessons we've learned.
00:15:27.820 | The first one, and this is a pretty interesting one to us, was just how important it is to actually communicate AI's limitations in all the different places where there are AI limitations.
00:15:39.820 | So one of the product principles that we have at Canva is that everything should just work.
00:15:44.820 | It should just do what it says on the tin.
00:15:47.820 | And when coding and building interfaces with LLMs, like generative -- yeah, LLMs can be -- can make very beautiful things, but they might not actually work.
00:15:59.820 | And so when we did some in-real-life user testing sessions, we had users like make things like portfolio pages, just kind of galleries and things like that.
00:16:09.820 | They included contact forms, but since Kevin code right now is just front-hand only, those contact forms didn't work, and users thought it was broken.
00:16:19.820 | They don't really understand, like, you know, it's just front-hand only.
00:16:22.820 | Like, it needs a destination, needs to hook it up to, you know, like an email sender and things like that.
00:16:27.820 | So one of the things we did is we made sure to prompt the model to actually very visibly communicate things that wouldn't work so that they don't -- so that they at least understand that it's the limitations and that it's intentional, and it's not them doing something wrong.
00:16:46.820 | So the second lesson is we are absolutely in love with the power of building functional prototypes.
00:16:54.820 | So if you don't know -- so we have a monorepo at Canva with just about half a million commits over the past decade.
00:17:02.820 | We support more than 100 languages, many different platforms.
00:17:06.820 | There's also -- there's also global laws and regulations in all the environments we operate.
00:17:10.820 | We have enterprise customers with a lot of contracts, SLA's and all that kind of stuff.
00:17:14.820 | So building things like in Canvas repository, it enables us to scale and serve all of our customers, but it's not really the fastest place to be experimenting and testing new concepts, especially in the fast-moving world of AI.
00:17:29.820 | So by building and -- we're starting to build and iterate and develop and test and working prototypes, we could move so much more faster and dream heaps and heaps of a head.
00:17:41.820 | What we found really useful was that our team was really actively using these prototypes day-to-day for real work and real tasks, and that really gave us a lot of learnings and outstanding.
00:17:52.820 | The live user testing helps identify issues, bugs, and really inform our roadmap before we even started actually building it for real.
00:18:01.820 | And it's kind of -- it was kind of entirely closing the loop.
00:18:05.820 | We built it very, very heavily with quad models and just allowed us to move -- just how to make magic.
00:18:13.820 | The last lesson I want to share is, like, the importance of really differentiating and playing to your strengths.
00:18:21.820 | So in this AI world, like, there's so many products and a barrier to entry, like, especially with things like cloud code and AI coding can be really, really low.
00:18:30.820 | So it's really important to be thinking about what are your unique strengths?
00:18:34.820 | What are our unique strengths in this market and the product that we're building?
00:18:38.820 | When it comes to camera code, it's two things.
00:18:41.820 | But the first one, the most important, is really we're explicitly not building camera code for technical users or engineers right now.
00:18:49.820 | We're starting bottoms up with non-technical users because we want to basically bring the superpower to just about everyone, to the billions of internet users out there.
00:18:59.820 | And then move bottoms up and get to higher and higher levels of sophistication.
00:19:04.820 | So for us, things like how easy it is to start, how guided it can be, and how well it turns people's dreams or screenshots of loss in reality is really important as we move up and up into more advanced functionality.
00:19:18.820 | And I think that's a really important thing to think about.
00:19:21.820 | You might not necessarily start bottoms up, but definitely have a focus for what you target.
00:19:27.820 | And leveraging your unique strengths and what you already have and what your users already use is really important.
00:19:35.820 | So here's a preview, for example.
00:19:37.820 | Like we are working on integrating the camera code creations with Canvas Editor.
00:19:41.820 | So you can do things like change the colors using our color picker, apply your brand fonts, or drag and drop your photos from your asset library,
00:19:49.820 | and get what you see is what you get editing experience.
00:19:52.820 | And, of course, we're spiking this on our interactive prototype.
00:19:59.820 | Finding and figuring out just what's the best way to leverage your unique strengths is definitely really, really important,
00:20:05.820 | for not just building something that offers value to users that other people can't.
00:20:12.820 | And we're just so excited about this era that we're now in and all the possibilities that we can unlock.
00:20:19.820 | So, yeah.
00:20:20.820 | That's everything I have.
00:20:22.820 | Hope you -- we do have time for some Q&As if you want to chat.
00:20:27.820 | And I think there's microphones up there and there.
00:20:30.820 | Hope you -- thanks for having me.
00:20:32.820 | And I hope you found this session useful.
00:20:34.820 | Thanks so much.
00:20:42.820 | Could you share some tips on how you get the models to produce such beautiful frontends?
00:20:45.820 | Oh, yeah.
00:20:46.820 | Yeah.
00:20:46.820 | Absolutely.
00:20:47.820 | So, we had -- we had a lot of our designers actually just really experiment a lot.
00:20:52.820 | Like, really just try from engineering.
00:20:54.820 | But some examples are really simple.
00:20:56.820 | Like, one is we instruct Claude to, you know, never have, like, a white, gray, or black background unless it's requested.
00:21:03.820 | You always pick, you know, say, a nice color.
00:21:06.820 | Another one is we've incorporated things like just basically our product design principles.
00:21:10.820 | Like, you know, like we have just a set of guidelines on how information hierarchy should be, where controls and what buttons should be.
00:21:17.820 | And we just basically summarize and put that in there as defaults it tries to follow.
00:21:23.820 | So, yeah.
00:21:24.820 | Everything's more or less, like, just in the prompt.
00:21:26.820 | Thank you.
00:21:27.820 | Hello.
00:21:28.820 | Hi.
00:21:29.820 | I'm interested in what is your perspective on, like, the future of AI and design more broadly?
00:21:34.820 | And how should people who design be thinking about how much you integrate AI?
00:21:38.820 | Yeah.
00:21:39.820 | That's a really great question.
00:21:40.820 | Like, what we're really excited about is how AI, like, can unlock and supercharge human creativity.
00:21:47.820 | Like, this technology is allowing people who normally, like, you know, would normally take, like, say, weeks or days to get to some output.
00:21:55.820 | Like, you can now use AI to, firstly, like, clean up all your tedious, to not do all your tedious tasks, but it also allows you to dream and prototype.
00:22:04.820 | I think a good example is when we were planning our event, kind of, create event.
00:22:08.820 | Like, our creative and motion teams were using diffusion models to really quickly make storyboards for different talks and different activations and experiences.
00:22:17.820 | And that allowed us to just, like, get an impression of those ideas, get some inspiration, and make the actual creative process, like, basically give superpowers to the creative process.
00:22:30.820 | So, I think, like, what we're really excited about is just how much, like, how much AI can actually help, like, exponentially increase human creativity.
00:22:40.820 | Cool. Well, thank you.
00:22:41.820 | Thank you all so much for having me.
00:22:43.820 | Bye.
00:22:44.820 | Bye.
00:22:45.820 | Bye.
00:22:46.820 | Bye.
00:22:47.820 | Bye.
00:22:47.820 | Bye.
00:22:48.820 | you
00:22:50.880 | you