Superfun! - Figma to Code Plugin

A powerful Figma plugin that converts your Figma designs into working code across multiple frameworks and styling approaches.

🚀 What is Superfun?

Superfun is a Figma plugin that automatically generates production-ready code from your Figma designs. Simply select any element in your Figma file, and the plugin will analyze the design and generate clean, semantic code that you can immediately use in your projects.

✨ Features

• Multi-Framework Support: Generate code for HTML, React, Vue, and Svelte
• Flexible Styling Options:
  • Inline styles
  • CSS classes (Pro feature)
  • Tailwind CSS (Pro feature)
• Smart Element Detection: Automatically identifies and converts:
  • Text elements
  • Images and SVGs
  • Containers and layouts
  • Complex nested structures
• Live Preview: Real-time preview with adjustable zoom and background
• Export Options: Direct integration with CodeSandbox for instant prototyping
• Font & Color Extraction: Automatically captures fonts and color palettes used in your design

🛠️ Tech Stack

Frontend (UI)

• Svelte - Reactive UI framework
• TypeScript - Type-safe development
• UnoCSS - Atomic CSS engine with custom presets
• Vite - Fast build tool and dev server

Plugin Backend

• TypeScript - Core plugin logic
• Figma Plugin API - Design data extraction
• ESBuild - Fast bundling for plugin code

Code Generation

• Custom AST Generation - Converts Figma nodes to semantic HTML structures
• Multi-framework Adapters - Transforms base markup to framework-specific code
• Style Processing - Intelligent CSS generation with multiple output formats

Development Tools

• Vitest - Unit testing framework
• ESLint + Prettier - Code quality and formatting
• Concurrently - Parallel development builds

📁 Project Structure

superfun-plugin/
├── plugin/           # Figma plugin backend code
│   ├── code.ts       # Main plugin entry point
│   ├── utils/        # Plugin utilities
│   └── gumroad/      # License validation
├── ui/               # Plugin UI (Svelte app)
│   ├── App.svelte    # Main UI component
│   ├── components/   # UI components
│   └── stores/       # State management
├── lib/              # Core code generation logic
│   ├── generateStructure.ts    # Figma node parsing
│   ├── generateStyleConfig.ts  # Style extraction
│   ├── generateHast.ts         # AST generation
│   └── stylelibs/             # Framework-specific generators
├── shared/           # Shared utilities between plugin and UI
├── themes/           # Color themes and styling
└── dist/            # Built plugin files

🏃‍♂️ Getting Started

Prerequisites

• Node.js 16+ and npm
• Figma desktop app
• Basic knowledge of web development

Installation & Development

1. Clone the repository

   git clone <repository-url>
   cd superfun-plugin

2. Install dependencies

   npm install

3. Start development

   npm run dev

   This starts:

   • TypeScript compilation in watch mode
   • Plugin code bundling
   • UI development server

4. Load the plugin in Figma

   • Open Figma
   • Go to Plugins → Development → Import plugin from manifest
   • Select the manifest.json file from this project

Building for Production

npm run build

This creates optimized bundles in the dist/ directory.

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm run coverage

🎯 How It Works

1. Selection Detection: Plugin monitors Figma selection changes
2. Node Analysis: Recursively analyzes selected element and its children
3. Style Extraction: Captures all visual properties (colors, fonts, layout, etc.)
4. Structure Generation: Converts Figma node tree to semantic HTML structure
5. Code Generation: Transforms structure to target framework with chosen styling approach
6. Live Preview: Renders generated code in real-time preview panel

---

Made with ❤️ for designers and developers who want to bridge the design-to-code gap efficiently. Check out https://reallygood.work for more cool stuff that helps you work better and saves the earth.