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 video analysis...