Figma Design System Generator

Figma plugin that programmatically generates complete UI components directly on canvas. One click and you get a fully styled navbar, hero section, pricing table, e-commerce cards, login page, or an entire landing page layout.

Dark theme with neutral indigo accent. ~650 lines of Figma Plugin API code. 9 component generators.

Table of Contents

• What It Does
• Design System
• Setup
• Usage
• Architecture
• Tech Stack
• License

What It Does

Instead of manually dragging shapes and styling them, this plugin creates pixel-perfect UI components through code using figma.createFrame(), figma.createText(), gradients, shadows, and auto-layout.

Generated components:

Component	Size	Description
Navbar	1280px	Logo, nav links, CTA button
Hero Section	1280px	Headline, subtitle, dual CTA buttons, trust badges
Stats Bar	1280px	4 metric cards with labels
Feature Cards	1280px	3-column card grid with icons
Pricing Table	1280px	3-tier pricing (Basic / Pro / Enterprise)
Product Cards	1280px	4 e-commerce cards with price + rating
Login Page	480px	Email/password form with social login
Button Set	—	5 variants (primary, secondary, ghost, danger, success) x 3 sizes
Footer	1280px	4-column footer with brand, links, newsletter

"Generate Full Landing Page" creates all sections stacked vertically, auto-positioned on canvas.

Design System

• Theme: Dark neutral with indigo accent
• Primary color: #6366f1 (indigo)
• Background: #09090b / #111114 / #18181b (zinc-based)
• Typography: Inter
• Spacing scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px
• Border radius: 4, 6, 8, 12, 16px
• Borders: rgba(255, 255, 255, 0.06–0.15) (neutral white opacity)

Setup

npm install
npm run build

Then in Figma: Plugins > Development > Import plugin from manifest > select manifest.json.

Usage

1. Open the plugin in Figma
2. Click any button to generate a component
3. Click "Generate Full Landing Page" to create everything at once, auto-positioned

Components are created as Figma Components so they can be reused and instanced.

Architecture

src/
  code.ts         # Main plugin (design tokens + helpers + 9 generators + message handler)

ui.html           # Plugin UI panel (dark themed button grid)
manifest.json     # Figma plugin manifest

Design Tokens

All colors, spacing, and typography in one T object:

const T = {
  colors: {
    primary: { '400': '#818cf8', '500': '#6366f1', '600': '#4f46e5' },
    background: { darkest: '#09090b', base: '#111114', elevated: '#18181b' },
    text: { primary: '#f4f4f5', secondary: '#a1a1aa', muted: '#71717a' },
  },
  spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32 },
};

Composable Helpers

Reusable functions for common Figma operations:

solidPaint(color)                  // Hex/rgba -> SolidPaint
gradientPaint(start, end)          // Two-color linear gradient
text(content, size, weight, color) // Styled text with font loading
icon(name, size, color)            // Tabler icon SVG -> Figma vector
frame(name, dir, opts)             // Auto-layout frame builder

Message-Driven Architecture

UI sends commands, plugin generates:

figma.ui.onmessage = async (msg) => {
  switch (msg.type) {
    case 'create-navbar':    await createNavbar(); break;
    case 'create-hero':      await createHero(); break;
    case 'create-pricing':   await createPricing(); break;
    case 'create-all':       /* generates full landing page */ break;
  }
};

Tech Stack

• TypeScript — type-safe Figma Plugin API
• esbuild — fast bundling
• @figma/plugin-typings — API type definitions
• Tabler Icons — SVG icon paths embedded in code

License

MIT