48-Screen Wireframe Generation

A real project case study: a PowerApp mobile application needed 48 iOS screens across 6 feature areas. Building each screen manually in Figma would take 2-3 days. Using Python scripting with a Figma bridge, all 48 screens were generated in approximately 3 minutes.

Result: 48 screens, 6 feature groups, 8-15 UI elements per screen, consistent design system — generated in ~3 minutes instead of 2-3 days of manual work.

The Approach

Python functions generate Figma Plugin API JavaScript, sent via the HTTP bridge in batches of 8 screens to stay under the 30-second plugin timeout.

graph LR
    A[Python Script] --> B[Generate JS Code]
    B --> C[HTTP Bridge]
    C --> D[Figma Plugin]
    D --> E[Canvas: 48 Screens]

Design System as Code

Define your design system once — use it everywhere:

FRAME_W = 375   # iPhone width
FRAME_H = 812   # iPhone height
GRID_COLS = 6   # Screens per row on canvas
GRID_SPACING = 100

# Design system colors
PRIMARY_BLUE   = c(0.118, 0.227, 0.541)
SUCCESS_GREEN  = c(0.063, 0.725, 0.506)
ERROR_RED      = c(0.937, 0.267, 0.267)
WARNING_AMBER  = c(0.961, 0.620, 0.043)

SCREENS = [
    (1,  "Splash Screen",        "Auth"),
    (2,  "Login",                "Auth"),
    (3,  "OTP Verification",     "Auth"),
    (4,  "PIN Setup",            "Auth"),
    (5,  "PIN Entry",            "Auth"),
    (6,  "Home Dashboard",       "Home"),
    (7,  "Add Meter",            "Meters"),
    (8,  "Meter List",           "Meters"),
    # ...12 Top-Up, 2 Consumption, 3 NFC,
    # 2 Wallet, 2 Notices, 2 Settings,
    # 4 Identity, 10 Services, 4 Misc
]

48 screens across 6 feature groups: Auth, Home, Meters, Top-Up, NFC, and Services.

def button(label, y, primary=True, width=None):
    '''Generate JS code for a styled button.'''
    bg = PRIMARY_BLUE if primary else WHITE
    text_color = WHITE if primary else GRAY_700
    w = width or (FRAME_W - 48)
    return f'''
    (() => {{
      const btn = figma.createFrame();
      btn.name = "Btn {label.upper()}";
      btn.resize({w}, 48);
      btn.x = {(FRAME_W - w) // 2}; btn.y = {y};
      btn.fills = [{{ type: 'SOLID', color: {bg} }}];
      btn.cornerRadius = 8;
      const txt = figma.createText();
      txt.characters = "{label}";
      txt.fontSize = 16;
      txt.fills = [{{ type: 'SOLID', color: {text_color} }}];
      btn.appendChild(txt);
      return btn;
    }})()
    '''

Define a button once, generate it across all 48 screens with consistent styling.

Batch Processing

Screens are generated in batches of 8 to stay within the 30-second plugin timeout:

for batch_start in range(0, len(SCREENS), 8):
    batch = SCREENS[batch_start:batch_start + 8]
    code = generate_batch_code(batch)
    figma_execute(code, timeout_ms=30000)
    print(f"Created screens {batch_start+1}-{batch_start+len(batch)}")

6 batches x ~5 seconds each = approximately 30 seconds for all 48 screens, plus overhead for font loading and canvas positioning.

Programmatic Prototype Wiring

After generating 48 screens, prototype interactions need wiring. Doing this manually means clicking through each screen, selecting each trigger element, and setting each destination one at a time. For 40+ interactions, that’s easily an hour.

1

Define Flows as Data

FLOWS = [
    # (source_screen, target_screen, trigger_element)
    (1, 2, None),                # Splash -> Login (tap anywhere)
    (2, 3, "Btn CONTINUE"),      # Login -> OTP
    (3, 4, "Btn VERIFY"),        # OTP -> PIN Setup
    (4, 5, "Btn CONTINUE"),      # PIN Setup -> PIN Entry
    (5, 6, None),                # PIN Entry -> Home

    # Top-up flow
    (12, 13, "Btn CONTINUE"),    # Select Meter -> Amount
    (13, 14, "Btn CONTINUE"),    # Amount -> Payment
    (14, 15, "Btn CONTINUE"),    # Payment -> Confirm
    (15, 16, "Btn CONTINUE"),    # Confirm -> Processing
    (16, 17, None),              # Processing -> Success (auto)
    (17, 6, "Btn HOME"),         # Success -> Home
    # ... 40+ total flows
]
2

Generate Interaction Code

For each flow, generate Figma Plugin API JavaScript:

// Find trigger element, attach navigation reaction
trigger.reactions = [{
    action: {
        type: "NODE",
        destinationId: targetFrame.id,
        navigation: "NAVIGATE",
        transition: { type: "DISSOLVE", duration: 0.3 }
    },
    trigger: { type: "ON_CLICK" }
}];
3

Execute

40+ interactive connections wired in ~30 seconds. The prototype is immediately clickable in Figma’s presentation mode — no manual wiring required.

Results

MetricValue
Screens created48
Feature groups6 (Auth, Home, Meters, Top-Up, NFC, Services)
UI elements per screen8-15 (status bar, app bar, content, bottom nav)
Design system colors10 defined constants
Font familyInter (Bold, Medium, Regular)
Time to generate all screens~3 minutes
Prototype interactions wired40+
Time for prototype wiring~30 seconds
Estimated manual time (screens)2-3 days
Estimated manual time (wiring)1+ hour
The output is not a final design. It’s a fully structured Figma file with named layers, consistent spacing, and design system colors applied uniformly — ready for visual refinement by a designer. AI handles structure; you handle taste.

When to Use This Approach

ScenarioRecommended Method
1-2 concept screensGoogle Stitch or Uizard
5-10 screens with design systemfigma-use MCP
10-50 screens with custom logicCustom Bridge (this approach)
20+ prototype interactionsCustom Bridge (Python)
Design system auditfigma-use lint + Check Designs