What is it?

PromptUI is a library that automatically converts your Figma designs into clean, production-ready code.

Supports multiple frameworks:

• React + SCSS (BEM methodology)
• Material UI (MUI)
• Tailwind CSS
• Bootstrap
• Flutter (Dart StatelessWidgets)
• SwiftUI (iOS/macOS Views)

Installation

npm install -g @promptui-lib/cli

How It Works

1. Mark your components in Figma

In Figma, add # at the beginning of frame names you want to export:

#Button          → Will be exported as component
#CardProduct     → Will be exported as component
#HeaderNav       → Will be exported as component
Button           → Ignored (no #)

2. Configure the project

npx @promptui-lib/cli init

Set your credentials:

export FIGMA_TOKEN=your_token_here
export FIGMA_FILE_ID=file_id_here

3. Generate components

# React + SCSS
npx @promptui-lib/cli generate

# Bootstrap
npx @promptui-lib/cli generate bootstrap

# Material UI
npx @promptui-lib/cli generate mui

# Tailwind CSS
npx @promptui-lib/cli generate tailwind

# Flutter
npx @promptui-lib/cli generate flutter

# SwiftUI
npx @promptui-lib/cli generate swiftui

Examples

Example 1: Button with React + SCSS

In Figma: Frame named #Button

#Button (Frame)
├── Padding: 12px 24px
├── Background: #3B82F6
├── Border Radius: 8px
└── label (Text: "Click me")

Command:

npx @promptui-lib/cli generate

Result:

// src/components/atoms/Button/button.tsx
import type { ReactNode } from 'react';
import './button.scss';

export interface IButtonProps {
  children?: ReactNode;
  className?: string;
}

export const Button = ({ children, className = '' }: IButtonProps) => {
  return (
    <button className={`button ${className}`.trim()}>
      <span className="button__label">{children}</span>
    </button>
  );
};

// src/components/atoms/Button/button.scss
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-lg;
  background-color: $color-primary;
  border-radius: $radius-medium;

  &__label {
    color: $color-text-inverse;
    font-weight: $font-weight-medium;
  }
}

Example 2: Card with Bootstrap

In Figma: Frame named #CardProduct

#CardProduct (Frame)
├── image (Rectangle)
├── content (Frame)
│   ├── title (Text: "Product Name")
│   ├── description (Text: "Lorem ipsum...")
│   └── price (Text: "$99.00")
└── button (Instance of #Button)

Command:

npx @promptui-lib/cli generate bootstrap

Result:

// src/components/molecules/CardProduct/card-product.tsx
import type { ReactNode } from 'react';

export interface ICardProductProps {
  children?: ReactNode;
  className?: string;
}

export const CardProduct = ({ children, className = '' }: ICardProductProps) => {
  return (
    <div className={`card ${className}`.trim()}>
      <img className="card-img-top" alt="Product" />
      <div className="card-body">
        <h5 className="card-title fw-bold">Product Name</h5>
        <p className="card-text text-muted">Lorem ipsum...</p>
        <p className="h4 text-primary fw-bold">$99.00</p>
        <button className="btn btn-primary w-100">Buy Now</button>
      </div>
    </div>
  );
};

Example 3: Header with Tailwind CSS

In Figma: Frame named #HeaderNav

Command:

npx @promptui-lib/cli generate tailwind

Result:

// src/components/organisms/HeaderNav/header-nav.tsx
export const HeaderNav = ({ className = '' }: IHeaderNavProps) => {
  return (
    <header className={`flex items-center justify-between px-6 py-4 bg-white shadow-sm ${className}`.trim()}>
      <div className="flex items-center gap-2">
        <img src="/logo.svg" className="h-8 w-8" alt="Logo" />
        <span className="text-xl font-bold text-gray-900">Brand</span>
      </div>
      <nav className="flex items-center gap-8">
        <a className="text-gray-600 hover:text-gray-900">Home</a>
        <a className="text-gray-600 hover:text-gray-900">Products</a>
        <a className="text-gray-600 hover:text-gray-900">About</a>
      </nav>
      <button className="px-4 py-2 bg-blue-500 text-white rounded-lg">
        Sign In
      </button>
    </header>
  );
};

Example 4: Button with Flutter

In Figma: Frame named #Button

Command:

npx @promptui-lib/cli generate flutter

Result:

/// Button
/// Generated by PromptUI (Flutter)

import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  const Button({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 24),
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text('Click me'),
    );
  }
}

Example 5: Button with SwiftUI

In Figma: Frame named #Button

Command:

npx @promptui-lib/cli generate swiftui

Result:

/// Button
/// Generated by PromptUI (SwiftUI)

import SwiftUI

struct Button: View {
    var body: some View {
        Text("Click me")
            .padding(.horizontal, 24)
            .padding(.vertical, 8)
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

#Preview {
    Button()
}

Commands

| Command | Description | |---------|-------------| | npx @promptui-lib/cli init | Configure the project | | npx @promptui-lib/cli generate | Generate components (React + SCSS) | | npx @promptui-lib/cli generate bootstrap | Generate with Bootstrap | | npx @promptui-lib/cli generate mui | Generate with Material UI | | npx @promptui-lib/cli generate tailwind | Generate with Tailwind CSS | | npx @promptui-lib/cli generate flutter | Generate with Flutter/Dart | | npx @promptui-lib/cli generate swiftui | Generate with SwiftUI | | npx @promptui-lib/cli sync tokens | Sync design tokens |

Options

| Option | Description | |--------|-------------| | -p, --preview | Preview without saving | | -o, --output <dir> | Output directory | | -f, --force | Overwrite existing files |

Atomic Design

Components are automatically organized:

| Layer | Description | Examples | |-------|-------------|----------| | atoms | Simple components | Button, Input, Label, Icon | | molecules | Medium compositions | Card, SearchBar, FormField | | organisms | Complex compositions | Header, Footer, Sidebar |

Configuration

Create promptui.config.json:

{
  "figma": {
    "fileId": "your-file-id"
  },
  "output": {
    "basePath": "src/components"
  }
}

Figma Support

What We Extract from Figma

| Element | Supported | Notes | |---------|-----------|-------| | Colors | ✅ Yes | RGB, Hex, tokens | | Spacing | ✅ Yes | Padding, margin, gap | | Typography | ✅ Yes | Font size, weight, family | | Border Radius | ✅ Yes | All corners | | Shadows | ✅ Yes | Drop shadow, inner shadow | | Layout | ✅ Yes | Auto Layout → Flexbox | | SVG/Icons | ✅ Yes | Exported as inline SVG | | Images | ⚠️ Partial | Placeholder generated | | Gradients | ⚠️ Partial | Linear gradients | | Animations | ❌ No | Not available via Figma API | | Prototype Links | ❌ No | Prototype data only |

Bootstrap Components Mapping

Name your Figma frames to auto-map to Bootstrap components:

| Figma Frame Name | Bootstrap Output | |------------------|------------------| | #Alert | <div class="alert"> | | #Badge | <span class="badge"> | | #Breadcrumb | <nav class="breadcrumb"> | | #Button | <button class="btn"> | | #ButtonGroup | <div class="btn-group"> | | #Card | <div class="card"> | | #Carousel | <div class="carousel"> | | #Collapse | <div class="collapse"> | | #Dropdown | <div class="dropdown"> | | #ListGroup | <ul class="list-group"> | | #Modal | <div class="modal"> | | #Navbar | <nav class="navbar"> | | #Nav or #Tabs | <ul class="nav"> | | #Offcanvas | <div class="offcanvas"> | | #Pagination | <nav class="pagination"> | | #Progress | <div class="progress"> | | #Spinner | <div class="spinner"> | | #Toast | <div class="toast"> | | #Tooltip | data-bs-toggle="tooltip" |

Material UI Components Mapping

| Figma Frame Name | MUI Output | |------------------|------------| | #Alert | <Alert> | | #Avatar | <Avatar> | | #Badge | <Badge> | | #Breadcrumb | <Breadcrumbs> | | #Button | <Button> | | #Card | <Card> | | #Checkbox | <Checkbox> | | #Chip | <Chip> | | #Dialog or #Modal | <Dialog> | | #Drawer | <Drawer> | | #Input or #TextField | <TextField> | | #List | <List> | | #Menu | <Menu> | | #Pagination | <Pagination> | | #Progress | <LinearProgress> | | #Radio | <Radio> | | #Select | <Select> | | #Slider | <Slider> | | #Snackbar | <Snackbar> | | #Switch | <Switch> | | #Table | <Table> | | #Tabs | <Tabs> | | #Tooltip | <Tooltip> |

Form Components

| Figma Frame Name | React + SCSS | Bootstrap | MUI | |------------------|--------------|-----------|-----| | #Input | <input> | <input class="form-control"> | <TextField> | | #Select | <select> | <select class="form-select"> | <Select> | | #Checkbox | <input type="checkbox"> | <input class="form-check-input"> | <Checkbox> | | #Radio | <input type="radio"> | <input class="form-check-input"> | <Radio> | | #Switch | <input type="checkbox"> | <div class="form-switch"> | <Switch> | | #Textarea | <textarea> | <textarea class="form-control"> | <TextField multiline> | | #FormGroup | <div class="form-group"> | <div class="mb-3"> | <FormControl> |

For Designers

Figma Rules

1. # prefix - Add to frame name to export
2. Auto Layout - Always use to maintain structure
3. Descriptive names - title, content, not "Frame 1"
4. PascalCase - #ButtonPrimary, not #button-primary

Correct structure example

#CardProduct (Frame, Auto Layout Vertical)
├── image (Rectangle, Aspect Ratio 16:9)
├── content (Frame, Auto Layout Vertical, Padding 16px)
│   ├── title (Text, Heading/H3)
│   ├── description (Text, Body/Small)
│   └── price (Text, Heading/H2)
└── actions (Frame, Auto Layout Horizontal)
    └── button (Instance of #Button)

Environment Variables

| Variable | Description | |----------|-------------| | FIGMA_TOKEN | Figma access token | | FIGMA_FILE_ID | Figma file ID |

How to get Figma Token

1. Go to Figma Account Settings
2. Navigate to "Personal Access Tokens"
3. Create a new token

How to get File ID

The File ID is in your Figma file URL:

https://www.figma.com/file/ABC123xyz/MyProject
                           ^^^^^^^^^^^
                           This is the File ID

Author

Desiree Menezes - @desireemenezes

License

Proprietary - All rights reserved.