Read a design as code
figma_extractExtract Figma nodes as standalone HTML, byte-exact CSS, React components, and SVG icons with images inlined. Batch up to 20 nodes at once; one failed ID returns an error without stopping the rest.
Instructions
The full extraction of one node: HTML measured against what Figma draws, byte-exact figmaCss, a React component, plain CSS and CSS modules. Images are inlined and icons come out as real SVG, so the HTML stands on its own. This is the tool that answers "what does this design actually say".
Several nodes at once, instead of one call each: nodeIds, urls, selection: true, or saved: true with an optional folder. A batch answers {results:[…]}, one entry per input, each {ok:true,extraction} or {ok:false,error}, so one bad id never sinks the rest. It is capped at 20 entries, and no batch returns an image — ask figma_export_png for a picture, a node at a time.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | A Figma link, as an alternative to nodeId. | |
| urls | No | Several Figma links, extracted in one call. Up to 20. | |
| saved | No | Extract the designer’s saved set. Narrow it with folder. | |
| scale | No | Render scale for any image output. Default 2. | |
| folder | No | With saved: true, one folder of it. "" is the root. | |
| nodeId | No | Figma node id, like "21:10314". Omit to use whatever is selected on the canvas. | |
| formats | No | Which representations to return. Default html and figmaCss. "png" comes back as a real image you can look at, alongside the text — there is no base64 in the answer, so ask for it freely on a single node. figma_export_png is the same picture with nothing else attached. | |
| nodeIds | No | Several node ids, extracted in one call. Up to 20. | |
| selection | No | Extract every layer the designer has selected, not just the first. | |
| topLayerOnly | No | Stop at the selected layer rather than walking into it. | |
| inlineInstances | No | Expand component instances instead of referencing them. |