Figma with Untitled UI Variables → React: Getting Custom Classes Instead of Untitled UI Components

Hello everyone,

I'm facing a significant workflow issue when exporting from Figma to React, and I'm hoping the community can help me find a solution.

Current Situation:

• My Figma file uses Untitled UI design system with properly configured variables (colors, spacing, typography, border radius, etc.)
• I've verified the variables are correctly set up: Colors/Brand/500, spacing-md, Text md/Semibold, radius-lg, etc.
• When I export/generate code from Figma, I get React code with custom Tailwind classes instead of Untitled UI components

The Problem (with real examples):

What Figma exports:

jsx

// Button
<div className="shadow-[0px_0px_0px_1px_rgba(10,_13,_18,_0.18)_inset] rounded-num-8 bg-brown border-gray-400 border-solid border-[2px] overflow-hidden flex items-center py-2 px-num-12 gap-1">
  <div className="relative leading-5 font-semibold">Add User</div>
  <img className="w-5 relative max-h-full" alt="" />
</div>

// Badge
<div className="shadow-[0px_1px_2px_rgba(10,_13,_18,_0.05)] rounded-tl-num-6 bg-whitesmoke-100 flex items-center py-num-2 px-1.5 gap-1">
  <div className="h-2 w-2 relative">
    <div className="absolute top-[1px] left-[1px] rounded-[50%] bg-darkorange w-1.5 h-1.5" />
  </div>
  <div className="relative leading-num-18 font-medium">offen</div>
</div>

// Input
<div className="shadow-[0px_1px_2px_rgba(10,_13,_18,_0.05)] rounded-num-8 bg-white border-lightgray border-solid border-[1px] overflow-hidden flex items-center py-2 px-num-12 gap-2">
  <div className="flex-1 flex items-center gap-2">
    <img className="w-5 relative max-h-full" alt="" />
    <div className="flex-1 relative leading-6">Search</div>
  </div>
</div>

What I need (Untitled UI React components):

jsx

// Button
<Button variant="primary" size="md" iconTrailing={<Plus />}>
  Add User
</Button>

// Badge
<Badge color="warning" size="sm" dot>
  offen
</Badge>

// Input
<Input 
  placeholder="Search" 
  iconLeading={<Search />}
  shortcut="⌘K"
/>

Specific Issues:

1. Non-standard classes: rounded-num-8, px-num-12, py-num-2, rounded-num-6 instead of standard Tailwind
2. Generic color classes: bg-brown, text-darkslategray, bg-whitesmoke-100 instead of design tokens
3. No component structure: Raw HTML divs instead of semantic Untitled UI components
4. Inline shadows: Long shadow values instead of using Untitled UI shadow utilities
5. No Code Connect mapping: Figma doesn't know how to map to actual React components

My Questions:

1. Has anyone successfully configured Code Connect for Untitled UI components to map Figma layers to React components?
2. Are there specific Figma plugins designed for Untitled UI export?
3. Is there a post-processing script or tool that can transform the exported code to use proper Untitled UI components?
4. Should I be structuring my Figma file differently to get better exports?

What I've Tried:

• Verified all Untitled UI variables are properly configured in Figma
• Used Figma's Dev Mode export
• Checked for Code Connect configuration (none found)

Technical Environment:

• Design system: Untitled UI
• Target framework: React + Untitled UI component library
• Build tool: vscode

Any guidance on bridging this gap between Figma designs and production-ready React code would be incredibly helpful. I'm open to solutions involving Code Connect, custom plugins, transformation scripts, or workflow adjustments.

Thank you in advance for your help!