Convert a whole Figma file → React project
convert_figma_to_reactConvert a Figma file into a full React web project with antd, AG Grid, ApexCharts, and Tailwind CSS. Optionally export mobile screens as a React Native Expo app.
Instructions
End-to-end from a whole Figma FILE: fetch the design, extract tokens, enumerate EVERY top-level screen across all pages, scaffold the React + Vite + antd + AG Grid + ApexCharts + Tailwind project, and generate one page component per screen — writing everything to disk. Returns a concise summary only (the whole project stays out of the model's context). If the file contains mobile-only screens (width ≤ 480px) it ASKS whether to also export those as a separate React Native (Expo) app. Pass a bare file key or any file URL — a specific ?node-id= is optional and just narrows the scope.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| depth | No | Tree depth to fetch (3-6 keeps large files manageable). | |
| outDir | Yes | Directory to create the React web project in (server-side path). | |
| figmaUrl | Yes | Figma file URL or bare file key. A ?node-id= is optional (narrows to that node's screens). | |
| projectName | No | ||
| mobileMaxWidth | No | Screens at or below this width are treated as mobile-only. Defaults to 480. | |
| reactNativeOutDir | No | Where to write the Expo app. Defaults to '<outDir>-mobile'. | |
| exportMobileToReactNative | No | Whether to also export mobile-only screens as an Expo React Native app. If omitted, the server asks the user (via elicitation) when mobile screens are found; clients without elicitation default to false. |