Figma MCP and Cursor: design-to-code setup tutorial

This tutorial, uploaded July 9, 2025, demonstrates a Figma-to-code workflow with Cursor and the figma-developer-mcp package. The source gives no numbered software versions or separate recording date, so the setup reflects the upload's period rather than a confirmed current procedure.

The presenter creates a Figma token with a one-day expiry and file-content access, then adds an MCP server configuration in Cursor's tool integration settings. The supplied configuration uses npx, a Figma API key and stdio. Although the recording also shows a terminal startup command, the description explicitly corrects that step and says viewers do not need to paste it separately.

For the coding task, the presenter copies a link to a selected Figma frame and asks Cursor to build HTML, CSS and JavaScript through the server. Cursor requests approval to retrieve Figma data and download images, then generates files for a browser preview. The presenter accepts the changes and opens the index file with Live Server.

The example shows HTML and CSS output; near the end, the presenter notes that the script is absent. Generation takes longer than the initial promise of a few seconds, and the speaker says timing depends on website complexity. This is a coding assistant workflow with a locally launched MCP process, but the source does not establish offline operation or local model inference.