Cursor for Designers

0:00 All right. Um, we'll do some quick intros and then I'm happy to to get started. Hi everyone. I'm Amrita. I am a field engineer here at Cursor. So basically I go out and I get to spread the good word of Cursor technically. People come to me for trainings and workshops. I go to customer on sites and show folks how to make the most of the product and I'll let Bryson introduce himself as well. Awesome. Thanks Amrita. Nice to meet everyone. My name is Bryson. I am on the go to market team here at Cursor. So

0:36 based in New York City. So for those of you who are in New York, come and say hi at some point, but but yeah, I uh I'm responsible for a number of different things and here to to Amrita's point, share the good word of Cursor and help answer any questions that you might have. So I'll be monitoring the chat on the side for for any questions as Amrita kind of steals the show here.

0:57 So nice to meet everyone. Cool. I will try and get to as many questions as I can. It's a pretty packed agenda in terms of what I want to cover today. So again, if you have questions, please put them in the chat and I will try and get to them when I can and I'm sure Bryson will try and tackle some as well. Sweet. All right, let's go ahead and get started. I'm going to share my screen and I'm going to cover the all the first thing I'm going to cover today is Cursor Agents window.

1:28 So I'm going to share my screen. So for a lot of folks who are familiar with Cursor, this is what most of you may see. This is the editor window. This is kind of how Cursor first got its start. It was our bread and butter. It's a fork of an IDE that a lot of engineers used called VS Code and it's really great for you know, coding and being able to see your extensions and your debugger and all the things that developers have come to know and love. I think over the past couple months we've seen a departure from this

2:01 type of view and we've seen more of a focus on agents. And so that's actually where I'm going to start today is I'm going to introduce Cursor's Agents window. We released this about a couple weeks ago, but it's been very popular. A lot of folks have liked it specifically because of this focus on the agent. So I'm going to show you all how to get there. If you are in Cursor and you're in this editor view, there's two main ways. The first is just by clicking this Agents window at the top

2:26 right. So you want to go ahead and click that. You can also do command shift P and then look up Agents window and you should see it there as well. But I'm going to click the easier route and I'm just going to go ahead and hit Agents window and then I'm just going to minimize this. And as you can see, you can always go back to the editor window if you want by clicking this button here, but for today's demo, I'm going to stay in the Agents window.

2:50 Going to go ahead and full screen this so we can get folks with you know, bad eyesight like myself able to see everything. Um I know for a lot of folks who do design work on the day to day that we or that you all use Figma pretty heavily. So I'm going to do a quick tour of the Agents window and then I'm going to work in the Figma MCP pretty heavily and then we'll end with a new feature that Cursor came up with called Canvas that I think is really neat.

3:18 Cool. So starting with the Agents window. Quick tour. As I mentioned, the agent is front and center. So here is where you're going to be doing most of your work with Cursor. This is where you're going to be doing your prompting, where you're going to be talking to the agent. This is where you pick your model. For most of today actually I'm going to be working in Composer 2 fast.

3:38 This is Cursor's in-house model and I love it. It is so fast and so effective in what it does and you'll see that in action today. You'll also see in this plus button here that we have a set of modes. These are kind of what Cursor I would say rallies around in terms of your workflow. So if you want to plan something and have a document written, you want to go to plan mode. If you have a thorny bug that you need to get resolved, you would go to debug mode.

4:08 And then if you just have any questions that you want to ask your code base, which I know sometimes designers and PMs do a lot, you would go into ask mode. And ask mode is just a no execution mode that allows you to just interact with Cursor and have your questions about your code or anything that you want answered. The last thing that I'll say about this plus is you can always add images. So for designers, if you ever want to add kind of you know, your mood board, something that you've seen that you want

4:35 Cursor to take inspiration from, you know, any screenshots that you have, adding images here is very very you know, useful. It gives Cursor a lot of context and so making sure that you have that that you're aware of this ability, I think is really important. So what I'm going to do today is I'm actually going to start from a fresh new project. So I'm going to go ahead and open a new folder in my desktop. So I'm going to hit new folder. I'm just going

4:59 to call this let's say Cursor workshop for designers. Going to go ahead and create that. I now have this new folder. It's on my machine and you can see here that it says no agents yet. So I'm going to start a brand new agent here. And what I'm going to do actually is I'm going to build a budgeting app. I'm going to build something that allows me to divide up my paycheck for the month and categorize it and see what I'm spending my money on. So I'm going to start from scratch and then you'll see actually how

5:30 I can bring in context from Figma and use that to make changes within Cursor and then actually publish back from Cursor to Figma. So I'm going to go here and I'm going to check check Composer 2. I'm going to say a couple things. I'm going to say first what I want which is I would like to build a budgeting dashboard for myself that allows me to divide up my paycheck for the month.

5:59 Um I like doing this cuz it kind of gives Cursor some direction and it also shows you all that Cursor has access to the web. I'm going to say use the brand guidelines from what's a good website that I can use. I'll just do Airbnb to inform the design of the dashboard. Build it in React for now.

6:23 And then once you're done run this app in the Cursor browser. So to access the Cursor browser, which I'll show in a minute, you want to do at browser and that automatically tells Cursor that you want your app running in your window itself. So I'm going to go ahead and run this. And what you'll see is that it's going to you know, do some querying for Airbnb brand guidelines and then you know, build this React budgeting dashboard and open it in the

6:51 browser for me. While it's working, let me go ahead and check the chat and see some questions. Um Can you explain the difference in token consumption in all these three different modes? So token consumption is pretty much the same based on mode. The only thing that difference or that differentiates token consumption is usually what model you use. And you know, how many MCPs or skills you decide to invoke. That that more than the mode itself is what

7:20 differentiates token consumption. Obviously in a mode like plan mode when you're writing documentation, you'll probably have you know, a lot of tokens spent on that. But then in agent mode or debug mode, a lot of your tokens are going to be spent writing code or debugging or reading code. And so token consumption depends more on your model. Some tokens sorry, some models like Opus 4.7 for example tend to be more token hungry and then some models

7:44 are not. So it's really more on the model and less on the mode. Cool. I see there are questions. Sorry Bryson, did you say there was questions in the Q&A? Yes, I see them here. Yeah, were you in planning mode for this one? Says asked JP to start off. For this step, is Amrita working in planning mode? I am not actually. You'll notice I'm in plan mode because I will put plan here and you'll see the plan pill, but for this one I didn't have the plan pill

8:11 up. So I am not in plan mode for this one. I'll do a quick demo of plan mode so you can see what that looks like, but this is purely in agent mode right now. Um Cool. I see anonymous attendee says any plans for Cursor to be able to review a video? I actually was wondering this the same the same as you recently cuz I was having a a repro that I wanted to to show Cursor. Right now unfortunately not. Cursor cannot review videos. It's it's too big of a of a file for it to have to parse. Hopefully in the future.

8:45 What you can do if you ever want to review a video is give it instructions on how to reproduce it. Maybe it's something that you want to you know, repro in your in your app and it'll be able to kind of do that on its own, but I understand why you'd want that.

9:03 Cool. So just I'll talk about using company based design systems shortly. That's actually where I will do the integration with Figma. Awesome. So here is my app running in the Cursor browser. I'm going to make this a little bigger so you all can see what that looks like.

9:18 These are the different categories. I can go ahead and you know, mark this and see you know, what the percentage is for how much it's allocated for. A cool thing about design mode in Cursor, which is a relatively new feature, is if I want to go ahead and make changes to my app, I can actually do that within this browser pane here. So I can go ahead and click this button at the top called design mode. And I would actually click on any of these divs. So I can you

9:44 know, click on let's say I'll click on this guy right here. Go ahead and just say make this font maybe three times as big and bright red. And what it'll do is it will give this div as context to cursor as along with a screenshot and it will automatically start making changes to it and rendering those changes. Um, you'll notice that the reason it was able to come up with this prototype so fast is thanks to composer two. Um, composer two is just really good with that and as you can see it did the the

10:14 diff here really well. Um, and so that's kind of what makes uh using composer two with the ages window and with the browser mode and design mode really effective. Um, if you ever want to make multiple changes you can do that as well. So I can go ahead and let's say I want to take this graph here. I'm going to go ahead and hit command L, add that to my context. Um, I'm going to go ahead and actually scroll down a little bit, maybe take the design mode and click on this. Um, add that to the context as well and I want

10:43 to say maybe um, change this uh circle graph or sorry, pie chart, that's what they're called, to use uh different colors that are more uh I want to say muted and change the category uh component to have a dark I'm going to say dark pink background instead.

11:08 So you can give multiple divs to cursor and multiple screenshots. Um, you can click on as many as you want and it will be able to identify the uh different components and the different uh parts of your website that it needs to change and it will go ahead and make those changes for you. Um, so again, very quick way to prototype, to rapidly iterate, to make changes without having to go in, find the div, update the CSS. You can do that now all through design mode within

11:34 cursor. Cool. I'll do a quick stop here for questions and then I'm going to go into the Figma integration. Yeah, a couple couple questions here, um, Amrita. One about composer two and potentially Claude for planning and then Claude for building. Um, any insight there? Yeah, um, so I would actually say I would not recommend composer two for planning. Um, and this is actually a well-known fact uh among people at cursor and outside of cursor. Composer

12:02 two was a model that was trained on reading and writing code. Uh, we have like a funny quote from my CTO which is composer two won't write poetry, it won't do your taxes, but it will write very good code. And so I would actually recommend composer two for any execution based work and I would recommend, you know, actually I really like GPT 5.4 for planning. Um, so that's my uh that those are the models I gravitate towards. Um, but you know, we always recommend try

12:28 them out, see how you like them, see what you like composer two for. If you don't think it's a good planner then switch to something else. It's really um, that's what makes cursor great. It's kind of up to you all how you want to use it and with what models. Um, you absolutely can do this with local HTML files. You can just go ahead and make sure that they are loaded into your desktop, open them in a folder and you'll be able to see them.

12:49 Cool. Um, cursor does support design.md files. What I would say though is make sure that they are incorporated into a skill somehow. So if you have a skill around design, skills can access scripts or other MD files. So just make sure that's visible to your skills if they want to use it.

13:07 Um, you can change these values directly on the canvas like a design tool as well. Um, it's kind of up to you how you want to do it. These again are very cosmetic changes. If I wanted to do something even crazier, for example, I could just say, let me actually use design mode, click this whole thing and say, oh, um, my face is blocking the chat. I say this uh looks okay. Can you make it uh a different type of chart um, that is maybe more engaging.

13:38 So as someone said, I'm just doing kind of cosmetic changes here and that's just for the sake of time, but if you ever want to just experiment with cursor and try out different formats, um, things that maybe would take longer to do in Figma, you can absolutely do that here. Um, and it's not commit it's not, you know, constrained just to font changes and color changes. It's also um, up to your imagination on how you want to redo or reiterate on things.

14:01 Cool. All right. Um, I'm going to now go into the Figma MCPs uh integration part of things. Um, the first thing that I'm going to do is I'm going to show you all the Figma plugin within cursor. So if you go to the cursor marketplace, you'll see that we have a plugin called Figma. And basically what a plugin is is it's basically MCPs and skills packaged together and published on our platform. That's all it is. A plugin is basically MCPs and skills put together. Sometimes you'll see some sub agents and hooks in

14:31 there, but for the most part it's just a combination of MCPs and skills. What the Figma plugin is is the Figma team came to us and was like, "Hey, we want users of cursor to get the most out of Figma within the cursor product. Um, we are going to publish a set of skills that, you know, the cursor users can use when they use Figma so that they get, you know, the best possible experience."

14:56 So these are all skills published by the Figma team and given to us so that folks are using Figma within cursor can get a really, really good experience. So what I'm going to show you here, um, oh, here, this is a a different breakdown now instead of a pie chart it did these squares. That actually looks great. I actually like that a lot better. Um, but what we're going to do here is I'm going to do a couple things. The first is I'm actually going to take a uh Figma design system and have that apply to my,

15:23 you know, budget dashboard and then I'm going to publish back. I'm going to take one of these components and publish back to Figma. So what I'm going to do is I'm going to go here. I'm going to open up Figma. Um, and I have a couple design systems here already. Um, I have the Aura one that I just downloaded from online. I have this one called Wanted design system. Um, let's see. I'm actually going to take let's do the Aura one just cuz that looks completely different. You'll see here um, it just looks like

15:51 uh you know, the Aura app. I'm actually going to go ahead. I'm just going to copy the link. So I'm going to copy this link. I'm going to put it in here and I'm going to say use the design system at this link to uh inform oops, to inform the design of my dashboard. Um, you know, make any relevant color typography changes needed.

16:18 So again, you can do this for whatever design system your team has within Figma. Um, so if you guys have a Figma design system, you can go ahead and just link it here and what you will see is that cursor will use the Figma MCP to understand all the tokens, typography, colors inside your Figma design system and then go ahead and actually incorporate that into the code inside of your prototype. Um, so as you can see here it's taking screenshots, it's

16:44 looking at any variable definitions. Um, and then once it has all that information it will go ahead and make changes here. While this is working, I'm going to go ahead and look at the chat one more time. Here we go. Um, does cursor support MCP apps like Excalidraw? We do actually. Um, I don't know if I have it installed already. Um, but if you ever want to see all the different MCPs that we offer, I'm going to put it in the chat. It's at cursor.directory. Um, so if you want to see whether the

17:19 Excalidraw MCP is supported, I think maybe Lucidchart's MCP is supported, you can uh see those as well. Um, cursor actually can draw uh mermaid diagrams pretty well within its own agent. Um, and then we can actually output that to Figma or sorry, to FigJam. Um, which is very cool. So it's kind of up to you how you want to do your diagramming there. Um, looking at more questions.

17:44 Sorry, I lost the Q&A. There we go. Um, best practices for cursor prompts. Um, I'll try and keep it simple here. The more specific you are, the more context you give, the better. So if you give cursor images, files, uh you know, example pieces of code, example websites that you want to emulate, that will help cursor give it direction. Um, we always say that the better your prompt is, the better your output is going to be. Um, so the more specific

18:12 your prompt is, the better and more precise your output is going to be. Um, one thing I will say about prompting and just context management generally is we tend to suggest that you always start new agents for new tasks. So you'll see here that I'm kind of working on the same task in here, which is fine. I'm working on the same website. But if I wanted to start a completely new task, maybe just around prototyping a completely new feature for my dashboard,

18:35 I would start a new session and that keeps the context isolated and doesn't confuse the LLM. So general best practices for prompting is be specific, be precise and stay isolated. You want to make sure that each agent is working on its own thing and there's no scope creep there.

18:54 Um, which model is better to make designs? Um, it really depends on what you're doing. Um, we have some designers here at cursor that love uh you know, GPT 5.4, they love Gemini. Um, I actually really like composer two mainly because I think it's fast and so if I ever wanted to make changes, it does that very quickly. Um, so it's kind of up to you how you want to do it or what model you want to choose, but we've seen that Gemini actually gets a lot of love

19:19 from our designers here. Um, is there any external context we can give cursor um, or sorry, we can give along with the prompt? Is there a markdown file? So you can always give skills. I'll talk about that very briefly. Skills are basically uh ways that you can enhance how cursor works by having a persistent set of markdown files that kind of inform what cursor does. For example, you can have a designing skill that tells cursor like, "Hey, every time I make changes, I want

19:50 you to look at, you know, the Figma design system that's in this skill and make sure you adhere to that. Or anytime you make, you know, design changes, I want you to use the browser and test them yourself. Um, those are examples of uh markdown files in the form of skills that you can give as context.

20:06 All right. So, as you can see here, they went ahead and applied the Aura, kind of the Aura vibe to my website. It looks pretty good, honestly. I like it. It look used all the colors that it wanted, got everything from Aura. Um, what I'm going to do here now is I'm going to show you all how to publish back to Figma. So, a lot of folks, what they do is, let's say I'm a designer, um, I, you know, have all my designs and my colors and my typography in a Figma file

20:32 somewhere, but I want to prototype something. I want to make something for my team. Um, so, let's say, you know, this is the feature that I want to prototype, this new type of graph. What I can do is I can work on it within Cursor like I did here, and then I can publish this back to Figma. So, what I'm going to do here is I'm actually going to use design mode. I'm going to select this particular, let's see, I'll just select this whole component actually,

20:55 this breakdown thing. And I'm going to say, uh I'm actually going to do command L, so that's added to the chat right here. I'm going to say, "I like this component. Can you publish this component back to Figma?" Now, the reason why you might want to do this is because Figma files, again, are shareable. Um, they're very easy for people to collaborate on. So, let's say, you know, I was working on this new type of graph. I really like it, and now I

21:22 want to make some changes within Figma and get my colleagues' feedback on it. I'm going to send this back to Figma so that they can collaborate on it with me, and they can see, you know, what colors I used, did I change any colors, did I use any different fonts here? Um, but that is kind of the beauty of Cursor and Figma is they just work hand in hand. I'm able to get context from Figma into Cursor, and then I'm able to get uh anything that I prototype or I build in

21:47 Cursor back to Figma. Um, and so, it's kind of this beautiful dance that is done, and there's, you know, very little iteration time or cycle time that's being lost here because I'm able to work between both of these tools pretty seamlessly. Um Couple good questions in the chat and that kind of relate to that. One is, is it possible to feed Cursor with HTML files from previous work and then translate them into Figma files?

22:11 Yeah, absolutely. Um, so, I'm trying to think what's the best way to demo that. I don't have any HTML files just at the handy. Um, but what you could do is you could um give it, you know, whatever files you want. If you have HTML files, you can go ahead and just have them uh given as context and say, "Hey, build me a design based on these." Um, so, you know what? Maybe I'll just do a very simple example of this. Um, I can go ahead and let's go to just a random

22:38 website. Actually, let's just go to the cursor.com website. Um Actually, that's our agents page. I'll go ahead to go to our docs page. Um, I'll go ahead and take this. Um, and I'll launch a new agent for this, actually. And I can say something like, uh "Use the HTML and CSS from the Cursor website." Go ahead and link it here. Uh to inform uh the changes on my paycheck budgeting website. Um, and what it'll do is very similar to what it did earlier where, you know, it looked at the Airbnb design guidelines.

23:14 Now, what it's going to do is it's actually going to look at the docs page, understand the visual structure and typography from the docs page, and then apply those tokens to my paycheck budgeting site. Um, right now it's actually navigating to the docs page in my browser, which is very cool. Um, so, you know, I can go ahead and just see what it's doing there. Um, but once it's back, we can see what it does and how it takes HTML and CSS from, you know, live

23:37 websites and actually informs your current prototype based on that. Cool. Let's let Oh, yeah. Go ahead. >> other one other question from Deepak, um said "Formatting is fine, but if we can do something uh similar to come up with an app with spend recommendations considering different brands, prices, discounts, or extending further, even like a financial planner app and capture with real-world data or real-time perform some analytical actions on it, is that possible?"

24:07 Um, sorry. Can you I'm Was this in the chat or was this in the Q&A? >> Yep, Q&A. Um Sorry, I was trying to find it. I know it was a long question. Oh, yes, I see it. Um Yeah. Uh uh you can absolutely do that. Um, there's multiple ways that I would suggest doing that. Um, so, the first is using something like plan mode. Um, so, you could go ahead and ask something like, "Oh, I want to create some new features." Actually, let's go ahead and just do that live. Um, going to go to

24:36 plan mode here. I'm going to say, um change this to GPT-5.4. I'm going to say, "I want to add some new features to make my paycheck planner more robust, like a financial, like a full financial planner." Um "Can you help me come up with some features to do that?" And you'll see here what's really awesome is you could have so many agents running at once, and you can monitor them all here at once. So, as you can see, this one is still uh publishing back to Figma here, which is really great. Um, that's

25:11 totally fine. Um, I think someone had a question about publishing back to Figma, so we'll have that happen. Um, this one is updating uh the budget website, so I'll go ahead and actually load that up. I'm going to go ahead and say, "Run the app. Oh, run my paycheck app in the Cursor browser." And we'll see what it looks like now with the Cursor HTML and CSS informed. Um but you can have all of your agents running in parallel and kind of monitor them all at once. So, here is our monthly paycheck plan with like the

25:44 Cursor HTML CSS applied. So, this looks good. This is kind of, you know, what I would expect to have something done from like HTML files. Um, as you can see here, this is, you know, in plan mode, and it's creating a plan for me. I'll show you all what that looks like. Um, I think that's getting built right now. As you can see, financial planner feature roadmap. So, this is like the current baseline. It's just a single page paycheck allocator, but it's giving me a recommended feature set. So, it's saying this is how you can

26:09 make it more realistic, add some more intelligence, make it me feel like a full product. And then what I could do is actually, I can take part of this plan, so I can, you know, copy some of this. Um, I can add it to the chat, and I can say, "Hey, Cursor, implement this part of the plan." Or "I like this feature. Go ahead and implement it." Um, so, the plan is kind of your documentation or paper trail for what you want to build, and then you can go

26:30 ahead and build off of the plan. Cool. Uh Philip is saying, "How do I get to the view that Amrita is using?" Uh go to agents window from your editor window. You should see it in the top right. Um You Can you have Cursor reference a design system that lives on a website? Totally. Um, that's what I did when I asked it to look at the Airbnb brand guidelines. Um, sometimes it's easier if some some companies have PDFs. You can always attach PDFs uh to your agent

26:59 here, so I can always just drag and drop a file here if the brand guidelines are in a form of PDF, and Cursor will be able to adhere to that. Um Cool. Uh let me go back here. >> more questions if you have. Yeah. Um, can you talk to any best practices for collaborating with devs during the design phase and handoff and then the Q&A or QA afterwards? Yeah. Um, so, it really depends on uh company to company.

27:27 I've seen it done many different ways. What I would recommend and how we kind of do it here at Cursor is a lot of the designers feel very empowered to do all of their prototyping within Cursor. So, they still use Figma. They have, again, all the colors, typography, everything they use in, you know, everything that they need to inform the brand in Figma. And then what they'll do is they'll take that information, go to Cursor, prototype whatever they want to build

27:52 within Cursor using those Figma design systems as guidelines, and then, you know, if they need to publish anything back to Figma, which I'm showing you all right now, they can go ahead and do that from Cursor itself. Um So, that's kind of what makes it very seamless is the design handoff. Um, so, once everything is in Figma, engineers can then just pick them up and use that as the source of truth. Um, for QA, what's very cool is you can actually use

28:18 the Cursor browser to test things. So, I can actually launch a another agent here. I can say, "I want to test and make sure that the category slider works in my paycheck app." Cursor browser "Take control and make sure that it works." Um, so, you can actually ask the browser to do your own browser testing for you. Um, it will, you'll see it here. It says it will take control and, you know, move things around, click on things, scroll, however it needs to. Um, and that's how a lot of folks do QAing at Cursor as

28:55 well. Yeah. Uh we're going back to the Figma integration shortly once this is done. Looks like it's invoking the use Figma MCP um to get it to publish back. So, once that's done, um I'm happy to show you all how that looks like when you go back from Cursor to Figma.

29:15 I see that's uh anonymous attendee asked, "Sometimes Cursor remakes the items from my system such as icons and paddings. How do I avoid that?" I think the best way, honestly, is to give it uh give give it context. So, either give it a skill or a Figma file saying that like these are the icons and these are the kerning and paddings that you need to stick to, and that way it won't hallucinate its own, which is great.

29:39 Cool. While this is working, I'm going to go ahead and actually launch Oh, there's Cursor scrolling on its own and testing the slider. Looks lovely. I'm actually going to go ahead and do another publishing back to Figma just so that we can see that in action. I'm going to go ahead and hit design mode, click on let's just click on this guy, add it to the chat. Oops, add it to chat. I'm going to go ahead and say publish this back to my Figma design

30:02 system at this link and I'll just give it the um the same link so it'll publish it back here. Um just so that it knows where to publish it back to. Often times it will ask you if you if you don't give it a particular place but that should work here.

30:21 Um oh and I'm actually going to switch the model cuz by four is good but I like composer two way better. Um and I'm going to have it do that. Um in the meantime I see Divya says, "Why do a lot of times cursor doesn't generate the same design as provided by the Figma file? It requires back and forth. Are there any best practices?" I would say here this can be dependent on your model. Divya, I'm curious what model you're using. The more powerful your model is the better it will be at making sure that it

30:49 adheres to what it's been told to. So if you use composer two, GPT 5.4, anything like that, you'll notice that that will be probably better for making sure that it sticks to what it's using. >> [snorts] >> Cool. I see for non-product companies, are there any idea for how we can actually start showing the clients? We used to show them in Figma but if we built through cursor I just didn't know if we can handle stakeholder alignment.

31:13 This is a good question. I'm hoping that in the future cursor will actually have a way to better share some of these prototypes. Right now people either deploy them using something like Vercel or GitHub pages in order to share prototypes like these but it's really up to you and how you want to do that form of sharing. As I'm going to show here, you can always publish back to Figma and then Figma will be able to be that shareable prototype that you can show but yes, I agree that there is probably

31:42 better ways coming soon on how to share something like this with the rest of your team. Cool. Um a question about version control. This came up actually in another customer call recently which is Figma has you know a form of version control but you know cursor how what is the best way to do that? Git is always great. I know designers sometimes are not the most familiar with Git but cursor integrates really well with Git and the nice thing about Git and cursor is you

32:12 don't have to know how to do any commands. You can just ask cursor to do it for you. So if you don't even want to know anything about Git, you can ask cursor to you know, "Hey, I want to save this version of my code base. Can you do that for me? Or can you push up what I have and store it on a branch somewhere so that I can access it later." That is kind of an example of how you would use Git to do version control within cursor but you can also you know do anything like folks are saying have have a way to

32:41 store it in Figma or use some sort of release form there. Awesome. So as you can see it went ahead and published this back to Figma. I'm going to go ahead and open it here and let's see what it looks like. >> [snorts] >> Uh there it is. Perfect. That looks good to me. As you can see it has exactly the same color, the same font, the right width and size. As I mentioned, I can go ahead and you know share this and make any changes. I can go ahead and modify this

33:10 but I can do this again. I can go ahead and pick a bigger component so let's actually click um let's click this guy maybe and I'm going to go ahead and add it to the chat again and say oops, publish this component back to the same back to the same Figma file as earlier and we'll see that one show up as well.

33:33 Again, what's cool about this is again, there's not that many layers here. There's just a label and a title but when you have more complex components as you know, I had this paycheck planner component from earlier that I was playing around with. Cursor is able to kind of identify the different layers and then publish. So this was published back from cursor to Figma. You can see that cuz it's in purple and it's able to divide up the layers here. So the publishing back is actually really really powerful

33:59 especially because that means you can do all the prototyping that you want within cursor and then have Figma kind of get take all like the layering, the font, the colors, everything back. Couple good questions here. Is the best way to test a prototype is just to share the link or is there something else like an MPC to a testing tool?

34:20 Yeah, for testing prototype I would say sharing the link is probably the best way right now. We are again are exploring this and seeing what that looks like. I'm going to show you all something called canvas very soon. Actually very soon as in the next 5 minutes because that is kind of something that we're working towards as like shareable prototypes that you can show folks but yeah, this is kind of a a gap right now in terms of how to share prototypes so I would just recommend

34:49 doing it in Figma. >> [snorts] >> Um Nora asks, "Any good cases use cases for documentation?" So you'll see here actually in the Figma plugin, what's very cool is they actually have some skills around like generating documentation for your design system, generating libraries for your design system. So creating design system rules based on you know what you have. So you can always use these as ways to generate guidelines or documentation for your design system if you want.

35:21 Um How do you iterate on designs with the PM? Again, dependent very much dependent on your workflow within cursor and your your team. What I would recommend is again starting with the plan. So having a plan like this, usually your PM will maybe have something written like this already like a PRD and then using this plan to prototype in cursor. So the designer, the PM, both of those folks can use this plan as like your guidelines to prototype and then from

35:49 there go and you know talk to engineers and see what's feasible and what's not but that's something that I would recommend there. Cool. Um Looks like did this one work as well? Let me go ahead and open it hero card in Figma. You can see a little bit of a more complex.

36:09 There we go. That looks good to me. So it's a little bit actually I think it looks fine. There's this one that we had earlier and there's this new hero card that I can again has multiple layers. I can see all the different layers and this is again, this has been a huge game changer for designers is just having everything published back to Figma in a really really easy way.

36:32 All right. I think we have Bryson, do we have like 5 minutes left or is this the full hour? Um we do have 5 minutes left. I think. >> Okay. So I want to show you all a cool new feature in cursor called canvas. Um so what canvas is is and you'll see it here if you go to plus and then you load up canvas is basically a UI that is built into cursor to kind of enrich what you would want to maybe see from some sort of form of documentation. So what I mean by that? Let's say I want to

37:06 share the different user journeys of my paycheck planner app with again stakeholders or something like that. What I can do is I can say, "Use canvas to walk through and display the different user journeys of my paycheck planner app." Um and I'm just going to start there and see what it does. Very common canvases that we see is documentation. So people like having like an interactive way that they can look at the different ways that code bases are documented or how they're

37:40 built. Another common one is like dependency health or just dashboard health generally. Cursor builds a canvas for you that kind of just visualizes that. So notice that I didn't say anything about you know, build me something in React or use these brand guidelines. Cursor's canvas kind of handles all of this for me. It creates a very pretty UI using cursor's built-in UI frameworks and then all it needs to do is just understand what thing do I want to visualize.

38:10 So this is kind of like I would say like diagrams on steroids. It's basically enriched UI that cursor is able to come up with based on whatever you want to see. So I can actually do another canvas here. I'm going to say, "Use canvas to I'll do something completely different actually. I'll say to help a to give me a pamphlet that will help a new customer at cursor deploy cursor to all their engineers." And then I'll actually what I'll do is I'll give it the cursor docs as context. You can you can use the docs here as

38:48 context. The funny thing is that I've actually done this before is I had to onboard help onboard a new customer recently and besides just giving them the docs which has so much information about you know, how do I set up cursor, what do I what are the different models, all of that. I just asked canvas to actually create a pamphlet for me. So you'll see here it's going to create a canvas one for what user journeys look like for my paycheck planner and then

39:12 this one will be a little bit more intense and will be more of like a getting started pamphlet for like a large customer. So PMs, designers, check out canvas. If you ever need something visualized or looking pretty, this is where you want to go. It's a really really powerful feature. I've seen people create slides from it. See people create great dashboards from it. It's a really really cool feature.

39:35 All right. While these are both running, I'll answer some questions. Um I'll see Hasna saying, "Can we design a full website with different features and publish it on Wix?" Uh, absolutely. You can go ahead and just ask our cursor to do all of that for you. In fact, I'll go ahead and just copy and paste your question um and do it. So, I'll just put that in here.

39:57 Um I'll go ahead and open a new agent and I can just say, "Hey, I I want to design a full website with different features, no Figma, publish it on Wix, Shopify." Um and it will go ahead and do that for me. Um and I can show that at the very end. Um "Have I seen people pulling in designs from Stitch?" Uh not yet, Rob, but hopefully in the future. I I don't know yet. Um responsive design can be done. It's a little bit more complicated, Winnie, with prototyping um animations. Um you'll have to do a little bit more

40:30 back and forth within cursor. Um JR asked, "After we create a cursor canvas, how can we save or share it?" Um you can publish it to Notion. We're making it very easy to share, hopefully in the next couple weeks, whether that be uh you can either open it if someone else has cursor, they can go ahead and open it. Um or if uh someone needs to uh uh you know, just look at it, they'll be they'll be able to open it as a link. All right, here's my paycheck planner

40:55 user journeys canvas. This looks really cool. Um as you can see, there's four core journeys. Um it says like these are the different things that it can do. This is the journey matrix. Um so, for PMs, designers, this is really really great. Um and again, like I didn't do anything. All I just said was to use canvas um and it did a really good job here. Um so, this is uh kind of where canvas comes from and how you can make it even better.

41:22 All right, I think we're a little bit over time, but I hope everyone learned something new today um whether it's canvas or the Figma MCP um or the agents window. Um I hope you learned something new and I hope to see you all within cursor. Thanks, everybody. Thanks, everyone. See you.