Import from Figma with TypeUI Desktop
Figma imports run in TypeUI Desktop so large files are processed on your computer instead of a Vercel function. The desktop app reads the Figma file locally, creates markdown design system files, and syncs only those generated markdown files to TypeUI.
Where to import
Open Dashboard design systems, choose Import from Figma, then open or download TypeUI Desktop.
Use the normal Figma file URL for the file you want to turn into a TypeUI design system. For large files, copy a direct page or frame URL from Figma.
Why it uses the desktop app
Raw Figma files can be large enough to hit serverless memory and duration limits. TypeUI Desktop avoids that by doing the heavy parsing locally. TypeUI receives compact markdown files, validates them, and publishes the design system through the same safeguards used by other dashboard imports.
How the import works
Install or open TypeUI Desktop
From the dashboard Figma modal, choose Open TypeUI Desktop if it is installed, or Download app if you need to install it first.
Connect Figma
In TypeUI Desktop, choose Connect Figma. TypeUI opens the browser and handles the Figma OAuth exchange on the server so the Figma client secret is never shipped in the desktop app.
Paste the file URL
Paste the Figma file URL into TypeUI Desktop, then start the import.
TypeUI Desktop reads the file locally
TypeUI Desktop fetches the Figma file on your computer and extracts nodes, styles, component sets, variants, component properties, layout values, text styles, effects, radii, fills, strokes, and matching component examples.
Markdown files are created
TypeUI maps the imported Figma details into editable markdown source files.
Generated markdown files
Sync and publish
The desktop app uploads only the generated markdown files. TypeUI validates the files, creates or updates the design system, and publishes it so AI tools can use it through TypeUI.
What TypeUI imports from Figma
TypeUI reads the styles, names, components, variants, spacing, radius, shadows, typography, fills, strokes, and layout details that are available in the Figma file.
When Figma provides a style or token name, TypeUI keeps that name in the markdown so your AI tool gets better context.
For colors, TypeUI separates brand-like names such as primary, brand, accent, action, and CTA from supporting colors such as blue, red, gray, surface, border, text, muted, and disabled. This helps the color file explain which colors should guide primary UI decisions and which colors are supporting references.
You can review and edit every generated markdown file before publishing.