We can't find the internet
Attempting to reconnect
Something went wrong!
Attempting to reconnect
Analysis Summary
Worth Noting
Positive elements
- This video provides a clear, concise look at how MCP servers can be used to bridge the gap between design tools like Figma and AI coding agents.
Influence Dimensions
How are these scored?About this analysis
Knowing about these techniques makes them visible, not powerless. The ones that work best on you are the ones that match beliefs you already hold.
This analysis is a tool for your own thinking — what you do with it is up to you.
Related content covering similar topics.
Transcript
Hi, I want to show Tidewave integration with Figma. So I have Tidewave running in front of me and I have started implementing the users page on this application that I'm working on. So I got some data from the database and I'm just dumping it on the page right now with no styles. And luckily for me, our designer has already implemented exactly how this page should look like on Figma. So I can bring Figma up. And what I want to do is that I want to ask Tidewave to implement this Figma design. In order to do this, the first thing we need to do is to enable the dev mode and turn on the MCP server. And now we are going to select the frame that we want TideWave to implement. After we don't we do this, we can come back to TideWave. And if you haven't enabled the Figma integration yet, uh you have to do it. So let's go to integrations Figma and enable it. And now we are going to come to attachments and choose the Figma selection. So now we are going to Figma getting all the information. We are also getting a screenshot of the the frame that we selected. And I could already send this to the agent because if you already send it right now, Tideway will already tell, oh, this is the page you're looking at. and the coding agent will likely put the pieces together. But what we can also do is to use uh tide wave inspector and select the exact element right and along and alongside the element that was selected tide wave is going to say hey by the way this is the element on disk at this location that you should change and we can just say now implement this design and now we wait. So you can see here that um the coding agent immediately read the current page because it knew about that and then is searching our project for more information about what are the components that are available, what icons are available and so forth. There it is. So it has implemented the design and now it's using the browser to check if everything is working as expected. And there you go. Tide wave implemented the feature and verify that the models were working as expected. Well, give it a try. See you next time.