Figma

Figma is an import source for TypeUI design systems. Paste a Figma file URL, and TypeUI creates editable markdown files from the styles, components, variants, and layout details it can read from that file.

Where to import

Open Dashboard design systems, then choose Import from Figma.

Use the normal Figma file URL for the file you want to turn into a TypeUI design system.

How the import works

1

Connect Figma

Beta previewImport from FigmaGenerate markdown from a Figma file.

2

Paste the file URL

Paste the Figma file URL into the import field on Dashboard design systems, then start the import.

3

TypeUI reads the file

TypeUI fetches the Figma file, extracts nodes, styles, component sets, variants, component properties, layout values, text styles, effects, radii, fills, strokes, and matching component examples.

4

Markdown files are created

TypeUI maps the imported Figma details into editable markdown source files.

Generated markdown files

SKILL.mdThe main entry file. It tells AI tools how to use this design system and where to look next.components/colors.mdColor tokens and usage guidance for brand, surfaces, text, borders, and states.components/typography.mdFont families, sizes, weights, line heights, headings, labels, and body text rules.components/radius.mdBorder radius values for controls, cards, inputs, overlays, and nested surfaces.components/shadows.mdShadow and elevation rules for cards, popovers, overlays, and raised surfaces.components/buttons.mdButton sizes, variants, states, icon spacing, focus behavior, and accessibility rules.components/cards.mdCard surfaces, borders, headings, body text, interactive states, and usage rules.

5

Review and publish

Open View markdown source files on the new design system card. Review the generated files, edit anything that needs more product context, then publish the design system when it is ready for MCP.

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.

Related

• Design systems
• Workspaces
• MCP Server