How I Built a 100% Offline Figma-to-Code Plugin for React, Tailwind CSS & Next.js

Design handoff remains one of the largest bottlenecks in software engineering. Many Figma-to-code tools rely on remote AI endpoints that hallucinate class names, breach company privacy, and require costly subscriptions. Here is how I engineered Figma to Code — an official, open-ecosystem Figma Community plugin that converts Auto Layouts into semantic HTML, Tailwind CSS, and React JSX entirely inside the local Figma client sandbox.

1. The Problem with Cloud Code Generators

Commercial Figma plugins frequently upload design files to third-party servers to generate code. For enterprise design teams handling proprietary intellectual property, this introduces significant security liabilities. Our goal was absolute: 0 external network requests, 0 telemetry, 100% offline execution.

2. Understanding the Figma Plugin Sandbox

Figma plugins operate across two distinct JavaScript environments:

• Main Thread (Figma Engine Sandbox): Has direct read access to figma.currentPage.selection and the scene graph tree, but cannot access DOM APIs or browser storage.
• UI Thread (Iframe): Runs standard web JavaScript with full DOM, canvas, and WebAssembly access, communicating with the main thread via asynchronous message passing (figma.ui.postMessage).

3. Traversing & Normalizing the Scene Graph

We recursively traverse Figma nodes (FRAME, INSTANCE, COMPONENT, TEXT, VECTOR) and transform them into an intermediate Abstract Syntax Tree (AST) representing semantic layout nodes:

interface NormalizedNode {
  type: 'container' | 'text' | 'vector' | 'image';
  name: string;
  styles: Record<string, string>;
  tailwindClasses: string[];
  children: NormalizedNode[];
}

function parseFigmaNode(node: SceneNode): NormalizedNode {
  const classes: string[] = [];
  
  if ('layoutMode' in node) {
    if (node.layoutMode === 'HORIZONTAL') classes.push('flex flex-row');
    if (node.layoutMode === 'VERTICAL') classes.push('flex flex-col');
    if (node.itemSpacing > 0) classes.push(`gap-[${node.itemSpacing}px]`);
    if (node.paddingLeft) classes.push(`pl-[${node.paddingLeft}px]`);
    if (node.paddingTop) classes.push(`pt-[${node.paddingTop}px]`);
  }

  return {
    type: node.type === 'TEXT' ? 'text' : 'container',
    name: node.name,
    styles: {},
    tailwindClasses: classes,
    children: 'children' in node ? node.children.map(parseFigmaNode) : [],
  };
}

4. Mapping Auto Layout to Tailwind CSS

Figma Auto Layout constraints map cleanly to CSS Flexbox rules. Our compiler translates primaryAxisAlignItems: 'SPACE_BETWEEN' to justify-between, counterAxisAlignItems: 'CENTER' to items-center, and Figma's fill container constraints (layoutGrow: 1) to flex-1 w-full.

5. Generating Clean React JSX & Design Tokens

The AST is transformed into clean JSX with semantic HTML tags (<header>, <section>, <button>) inferred from layer naming conventions, accompanied by exported Tailwind color variables.

6. Client-Side ZIP Packaging Without Servers

Using JSZip inside the UI iframe, rasterized images (PNG/SVG) and generated code files (package.json, tailwind.config.ts, Component.tsx) are compressed in memory and downloaded instantly as a full runnable Next.js project with zero latency.