TLDW logo

How Product Managers can use Make connectors

By Figma

Summary

## Key takeaways - **PRD as Ultimate Make Prompt**: The PRD is like the most invested prompt you can have since you've already written all that rich context. With connectors, give Make all of your PRD that was in your head and ask it to collaborate with you. [03:29], [09:26] - **Connect Make to Notion PRD**: Add Notion connector in Make, authenticate, then prompt 'Implement the MVP experience outlined in the Astra video editor interface PRD from Notion.' Make searches, fetches the full PRD content including requirements. [02:37], [04:06] - **AI Auto-Fetches External Data**: Make recognizes the Notion reference, asks permission to run search and fetch tools, finds the page by name, and grabs all data, requirements from the document. [04:17], [04:39] - **Imperfect Prototypes Spark Collaboration**: PMs delivering relatively high fidelity but imperfect prototypes is great because designers see rough edges and the idea come to life, enabling advanced conversations on behavior sooner. [05:29], [05:43] - **Copy Make to Figma Design Layers**: Copy the Make as design layers to clipboard, paste into any Figma design file; it's fully editable vector elements, not a screenshot, for riffing side-by-side. [08:09], [08:22] - **Direct Canvas Edits in Make**: Use point-to-edit to manipulate elements on canvas, adjust styling like opacity or bold text; jump to source React code for live updates. [06:46], [07:10]

Topics Covered

  • PRDs Become AI Prototyping Prompts
  • Connectors Pull PRD Context Automatically
  • Imperfect Prototypes Advance Discussions
  • Copy Prototypes to Design Layers

Full Transcript

Um, ultimately, let's say you end up in a welldocumented PRD like this. Now, I'm

using Notion, which is my documentation platform of choice. Uh, but you can see that I've built out this. I'm a PM at this uh software company called Astra that wants to build this video editor

interface. I want to build an MVP. I

interface. I want to build an MVP. I

have my goals, my users, my personas, use cases, uh UX copy guidelines, tone examples, even visual guidelines potentially. All of this is very, very

potentially. All of this is very, very detailed. So you you put all this work

detailed. So you you put all this work into uh you know documenting all of these requirements. Um and now you maybe

these requirements. Um and now you maybe hand this off to a cross functional partner, maybe a designer or uh an engineer and they may take days or weeks to kind of digest and like kind of start

to figure out what they want to do.

Maybe wire up some wireframes kind of like that yesterday workflow example that I spoke to earlier. Um, but it's also true that sometimes words kind of fall short and things can get lost in

translation and also it just kind of takes too damn long. So, Bigma make was made for this moment. Um, if you want some more clarity behind the idea, you

want to uh work towards that persuasion that David was talking about, um, make is a great way to do that. So, I fire up a new make. I have my prompt box here. I

can describe my idea, attach a design potentially. Okay, great. I can oneshot

potentially. Okay, great. I can oneshot uh my prompt to get a prototype and wrestle with AI for a bit. Um but that feels like uh a bit of a a weird

workflow considering that I just documented all those requirements in the PRD. Um well available as of today make

PRD. Um well available as of today make is now an MCP client uh and has the ability to connect to external MCP servers. Now what the heck does that

servers. Now what the heck does that mean? Well design context as a designer

mean? Well design context as a designer I know that's difficult. So we've spent a lot of time at Figma developing a platform to try and communicate that design context but also we developed our

MCP server at Figma which allows Figma to export design context externally to other platforms. Well, this is kind of the reverse of that. This is make acting

as an MCP client and that has that means it has the ability to bring in external content from other MCP servers that different platforms have set up. Um, so

what I'm going to do is I'm going to go to this plus button here, and this is where I would attach a Figma frame or upload an image. Uh, now we have this option to add a connector. So I'm going to click on that, and it brings up the

modal to add a connector. So we have these partners built in for rolling out at launch. We have a sauna, Atlassian,

at launch. We have a sauna, Atlassian, GitHub, Linear, Monday, Notion. All of

these have their own MCP servers that Make can now connect to to pull in data.

So I'm going to add Notion, and I'm going to hit add there. It's going to flip me over to authenticate. I'm going

to recognize this link and hit continue.

It's going to take a moment to connect to my notion instance. I'm going to say I'm all set. I'll close that out and I'll wait for it. So, here we go. So,

now we have this notion connection here.

And we have all of these tools, all of these read tools and even write tools, which we'll get to in a minute. these

read tools that notion has set up on their MCP servers to allow AI agents like make to search, fetch com uh fetch different uh pages, get comments, teams, users, agent has access to all of this

information. You can set this to ask

information. You can set this to ask every time it wants to run or set it to auto run if you want to or say never run this particular job.

But now make has the ability to kind of query and reference my notion instance.

Okay, so I'm going to close that out. Um

and now I have that connected. Well, now

as David alluded to earlier, the PRD is really kind of like a rich prompt already. I saw one question in the chat.

already. I saw one question in the chat.

I think I I might say I was going to answer it live, but is it common practice to use other AI tools to generate prompts for make? Um, I have done that myself. I've used chat GPT to write these extensive invested prompts.

And that's kind of the guidance we've given is invest in your first prompt.

Well, PRD is like the most invested prompt you can have. I already wrote out all that context over there. Why can't I just bring it in? Well, now you can. And

so I'm just going to copy paste this prompt in here. Implement the MVP experience outlined in the Astra video editor interface PRD from Notion. And

I'm going to hit go. I'm going to let this run for a little bit because I want to show you a couple things. I know uh I got a lot to go through. So I want to make sure I I have time for everything.

But it's going to start to reason. It's

going to assess. It's going to recognize that I'm asking for uh you know make to access notion using the connector. Here

we go. We have our first thing. It's

going to access the notion search tool.

I didn't set this to auto run. So, it's

asking me permission to run it. I can

say run. It's going to then search and it's going to try and find that uh post or that page in notion that I referenced by name. Says great, it found it. Um, so

by name. Says great, it found it. Um, so

it's going to fetch all the content from that document. It's going to grab all of

that document. It's going to grab all of all the data, all the requirements that I put in there. It's going to try and fetch it. So, I'm going to hit run. It's

fetch it. So, I'm going to hit run. It's

going to go. So, you can see how it's starting to kind of access all that data. So, I'm going to fast forward a

data. So, I'm going to fast forward a little bit um and go back. And you can see just from that same prompt it uh it ran its notion jobs in the requirements I said that I wanted to connect superbase. So it went ahead and ran

superbase. So it went ahead and ran superbase and connected that and it output this MVP uh which is pretty good.

Now it may not be perfect but it's enough to start to validate my idea.

It's certainly uh more valuable than just the PRD alone because now I have this tangible thing to discuss with my uh partners and collaborate on. Now, as

a designer, um, and I I'm going to address this a little bit later, too, but I saw it in the chat come in. Okay,

as a designer, what do I feel about a PM delivering this like relatively high fidelity prototype? Well, I actually

fidelity prototype? Well, I actually love it because it's not perfect and I know that and I can see I can see areas where I can start to see those rough edges. I can start to see the idea come

edges. I can start to see the idea come to life. So, now I can have a more

to life. So, now I can have a more advanced conversation with my PM partner, with my engineering partners around, okay, how is this actually going to behave? You can see that this

to behave? You can see that this waveform is kind of going wild as I drag through this. That's kind of weird.

through this. That's kind of weird.

Let's fix that. Um, you can see that these toasts start to stack. Okay, I can start to see how we're going to have to scaffold this out. So, it really starts to allow a more advanced conversation

sooner. Like David mentioned, the cost

sooner. Like David mentioned, the cost to get here is so much lower that now we can talk about the connection, the UX, the humanity of this experience. Is this

going to work? Is this going to land? We

can feel it. We can touch it. Um, and

it's great. So um uh you can also collaborate on this. Uh this is like with any other make obviously uh you have the ability to ask for changes. You

can prompt directly in here. You can

share it out to uh your partners to let's see if I can find David here. So

now he's an editor. So he can come in if he wants to. No pressure David to come in and kind of prompt against it and kind of continue to iterate on it. Um,

we do have our pointto-edit feature in make where this little icon down here. I

can go in and I can actually just directly manipulate things on the canvas. Uh, some things have these

canvas. Uh, some things have these styling options where I can just pull the background uh opacity down. Uh,

maybe I want to change this, make this bold. Um, so you can start to directly

bold. Um, so you can start to directly manipulate which is something that our team is heavily invested in continuing uh to advance how we directly manipulate makes on the canvas. Um, you can also

jump directly to the source. If I have an object selected, I have this go to source button here, which jumps me directly to that element in the code.

Uh, you can see I have this preview tab and this code tab over here. So, as an engineer or anybody who's comfortable coding or manipulating React code, you can dive right into the code and start changing things. Uh, if I want to get

changing things. Uh, if I want to get rid of this, I'm just going to do something simple like take out some text. But you can see that it live

text. But you can see that it live updates because it's actually backed by this React code. So um it's a very powerful tool to go to uh uh get to a workable prototype with things like

video things like scrubbing that like all of these different uh you know prototyping um ways to prototype and experience would be highly difficult in something like Figma design but with Figma make

it's very easy to just spin this up. Um

the one other way, let's say you want to kind of take this further. You want to contribute to maybe um a design brainstorm that your designers are doing in uh a Figma design canvas. Uh we can

actually copy this make in its current state as design layers with this function up here. If I click on that, this copy this has been copied to my clipboard. And if I go over to any

clipboard. And if I go over to any design file, I can simply paste it here.

And now it is a design layers uh node in a design file. If I switch to outline mode just to to prove that it's not a screenshot, you can see everything it's all its elements are there. Um so now I

can as a designer or as a PM who feels comfortable, I can start to riff on this and kind of start to move things around.

Let's say I want to move that over there. Bring this title out here. So you

there. Bring this title out here. So you

can start to kind of really get the power of the canvas and start to see different options side by side and really kind of riff on it. So this is a designer uh you know approach to to

maybe continuing to to edit on it. So

that's a great way to try and uh get to that point where you're clarifying that idea. You pulled in that PRD from the

idea. You pulled in that PRD from the renotion connector um and you really started to kind of use that as a tool to to communicate uh what the concept is to kind of validate some of that. Um and

then when we get into make uh typically we've said write very clear specific prompts invest in that prompt. Now with

connectors, you can bring in that context from the docs that you already have. You've

already written all that rich context in your PRD. Why not just give make all of

your PRD. Why not just give make all of that that was in your head is now in that document. Give that all to make

that document. Give that all to make with connectors and ask it to uh you know collaborate with you.

Loading...

Loading video analysis...