See the plugin in action — the new homepage demo
title: "See the plugin in action — the new homepage demo" description: "We added a short demo video to the homepage showing the end-to-end flow from a Claude prompt to a finished Figma frame." publishedAt: "2026-04-13" author: name: "AI To Design" url: "https://ai-to-design.com" tags: [release] coverImage: "/videos/frontpage-demo-poster.jpg" coverAlt: "A still from the homepage demo video showing the plugin rendering a design onto the Figma canvas." relatedSlugs: []
Explaining an AI-to-Figma plugin in text is hard. The interesting bit is watching it happen — the prompt goes in, the design comes out, and the canvas fills up in seconds. So we recorded it.
What you're looking at
The clip walks through a single real session. Claude receives a natural-language design request, calls the plugin's render_html tool, and the plugin translates the HTML/CSS into native Figma nodes — frames with auto-layout, typography with the right fonts, colours mapped to tokens, the whole tree placed on the canvas ready to be edited. No screenshots, no image imports, no manual restructuring.
It's the same flow you get when you install the plugin yourself and connect it to Claude Desktop. The only difference is that the recording shows it end-to-end, compressed into about a minute.
We put the video front and centre on the homepage because it answers the question we get most often: "what does this actually do?" Faster to show than to describe.
If you want the longer story — how the MCP session hands off to the Figma plugin, how design-system tokens get applied, how the plugin handles multi-step designs — the rest of the site covers it. But for a 60-second feel for the product, the video is the shortcut.
