I was also hoping to find some good workflows for this here.

I asked ChatGPT and got a decent thread going, but it seems to be quite a bit of work. Both prepping the files, as well as building the actual app. Should ideally use Next.js (Which is React + Typescript, the tsx files we see Figma Make generate), which I am not familiar with from before. 

Here is a part of the work that needs to be done after exporting all the code, according to ChatGPT:

3) Systematically refactor (the important part)

Goal: Make each exported screen into a page composed of presentational components that accept props (no hardcoded copy, colors, or absolute positioning where not needed).

Checklist per file:

• Replace absolute pixel layouts with flex/grid + responsive classes.

• Move inline styles → Tailwind utility classes (or CSS Modules).

• Extract hardcoded text → props or a copy.ts file (i18n later).

• Extract duplicated chunks → components/ui/Whatever.tsx.

• Convert click handlers that are placeholders → real callbacks via props.

• Add a11y: roles, aria-labels, alt text, focus states, keyboard handlers.

• Remove magic numbers; create design tokens (spacing, radius, shadows).

Tiny example: refactor a “Card.tsx” from Figma Make

Before (typical export flavor):

export default function Card() { return ( <div style={{ width: 360, height: 180, background: "#1F2937", borderRadius: 16, position: "relative" }}> <div style={{ position: "absolute", top: 24, left: 24, color: "#fff", fontSize: 18 }}>Title</div> <button style={{ position: "absolute", bottom: 16, right: 16, background: "#14b8a6", color: "#000", padding: 12, borderRadius: 12 }}>Action</button> </div> ); }

After (production-ready presentational):

type CardProps = { title: string; onAction?: () => void; actionLabel?: string; children?: React.ReactNode; }; export function Card({ title, onAction, actionLabel = "Action", children }: CardProps) { return ( <section className="relative w-full max-w-sm rounded-2xl bg-gray-800 p-6 text-white shadow-md" role="region" aria-label={title} > <h3 className="text-lg font-semibold">{title}</h3> <div className="mt-3">{children}</div> <div className="mt-6 flex justify-end"> <button type="button" onClick={onAction} className="rounded-xl px-4 py-2 font-medium text-gray-900 bg-teal-400 hover:bg-teal-300 focus:outline-none focus:ring" > {actionLabel} </button> </div> </section> ); }

Key wins: props, semantics, a11y, responsive, no absolute positioning, reusable.