MCP Tools
render_html
Renders HTML/CSS as native Figma elements on the canvas.
Converts an HTML string (with inline styles or a style tag) into native Figma frames, text nodes, and shapes. Supports CSS properties such as colors, dimensions, padding, borders, and flexbox layout. This is the primary tool to use when creating a new design from scratch — provide the full HTML and a name for the resulting frame.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| html | string | Required | HTML string with inline styles or style tag. Example: <div style="padding: 20px;"><h1>Hello</h1></div> |
| name | string | Required | Name of the application or top-level frame |
Example prompt
Try asking: Create a pricing card with a title, description, price, and a call-to-action button using a blue accent color.
Tips
- Always include meaningful CSS class names on every element (e.g. class="hero-section") — these become node names in Figma.
- After rendering, call get_selected_node to get node IDs for subsequent edits.
- Keep HTML payloads focused — large payloads slow rendering.
- Use flexbox for layout rather than absolute positioning.