Generate a React component from a frame
generate_componentConverts a Figma frame into a ready-to-use React .tsx component with Ant Design, Tailwind CSS, AG Grid for tables, and ApexCharts for charts.
Instructions
Turn a Figma frame/node into a ready-to-use .tsx component: antd components by role, Tailwind for layout, AG Grid for tables (with columnDefs derived from headers), ApexCharts for charts (type + labels derived from the design), and repeated rows expanded to .map(). If outDir is set the file is written to disk (kept out of context); otherwise the code is returned. This is the heavy lifting — refine the result rather than writing from scratch.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| depth | No | ||
| outDir | No | If set, write the .tsx here (e.g. <project>/src/pages). Otherwise return the code. | |
| figmaUrl | Yes | Figma URL targeting a frame (?node-id=...) or a file key. | |
| componentName | No | Component name; defaults to a PascalCase of the frame name. |