Generate Figma Make Prompt

Goal

Generate Figma Make-ready prompts based on design briefs and design systems. The prompt follows a tool , setup , pages structure that reflects brand identity and design tokens to enable consistent automated design generation for any brand or product.

Critical Constraint: Figma Make prompts are limited to maximum 5000 characters, requiring efficient resolution through structural constraints and balanced readability.

Output

Storage Location

• Per Initiative: initiatives/[initiative-name]/design/

• File Naming Convention: figma-make-prompt-[feature-name].json

File Structure Example

initiatives/feature-name/ ├── design/ │ ├── figma-make-prompt-feature-name.json │ ├── design-brief-feature-name.json │ ├── design-brief-feature-name.md │ └── README.md

A) Figma Make Prompt JSON Schema

Required Root Keys: tool , setup , pages

{ "tool": "Figma Make", "setup": { "theme": "<50 chars max theme description>", "grid": "<core grid settings>", "typography": "<3 sizes only>", "colors": ["<7 essential colors only>"], "brand": { "name": "<Brand Name>", "primary": "<Primary Color>", "bg": "<Background Color>", "text": "<Text Color>" } }, "pages": [ { "name": "<page name>", "layout": "<200 chars max layout description>", "components": [ { "name": "<component name>", "variant": "<variant name>", "props": {"<prop_name>": "<prop_value>"}, "position": {"x": 0, "y": 0, "w": 100, "h": 50} } ], "copy": [ {"key": "<text key>", "text": "<actual text>", "component": "<component name>"} ] } ] }

B) Design System Mapping

1. Theme Configuration (50 chars max)

{ "theme": "<Brand theme description with key visual characteristics>" }

2. Grid System (core only)

{ "grid": "<Responsive grid system with key breakpoints>" }

3. Typography Configuration (3 sizes only)

{ "typography": "<Font family with 3 key sizes>" }

4. Color Palette (7 essential colors)

{ "colors": ["<Primary>", "<Secondary>", "<Background>", "<Text>", "<Accent>", "<Success>", "<Neutral>"] }

Process

• Design Brief Intake: Collect product/campaign objectives, target audience, key components, and design patterns from existing design brief JSON

• Design System Reference: Reference tokens and components from the current repo's design system

• Structural Constraint Application: Apply maximum limits (2 pages, 6 components/page, 8 copy items/page)

• Token Mapping: Map design system tokens to Figma Make format with abbreviations

• Component Optimization: Select core variants and limit props to essential properties

• Balanced Formatting: Apply optimal balance between readability and compression

• JSON Optimization: Remove unnecessary whitespace while maintaining structure

• Character Validation: Ensure compliance with 5000 character limit

• File Storage: Save to initiatives/[initiative-name]/design/ folder

Generation Rules

Structural Constraints (5000 character limit)

• Pages: Maximum 2 pages

• Components: Maximum 6 per page

• Copy Items: Maximum 8 per page

• Layout Description: 200 characters max

• Component Description: 50 characters max

Setup Section Optimization

• Theme: 50 characters max, focus on key visual characteristics

• Grid: Core breakpoints only (desktop/mobile)

• Typography: 3 sizes only (large/medium/small)

• Colors: 7 essential colors (primary, secondary, background, text, accent, success, neutral)

• Brand: 4 core properties (name, primary, background, text)

Component Optimization

• Naming: Use component name + variant only

• Props: Limit to 3 core properties (bg, color, borderRadius)

• Position: Abbreviated format (x, y, w, h)

• Copy: Key + text + component reference only

Formatting Rules

• Indentation: 2-space indentation throughout

• Compression: Props and position on single line

• Arrays: Copy arrays on single line

• Whitespace: Minimize unnecessary line breaks and spaces

Auto-compression Rules

• Structure: Maintain core JSON structure while removing whitespace

• Duplicates: Consolidate repeated props

• Descriptions: Minimize all descriptive text

• Abbreviations: Use standard abbreviations (backgroundColor → bg, textColor → color)

Quality Validation

Character Count Validation

• Target: Under 5000 characters

• Check: Validate total JSON length before output

• Fallback: Further compress if over limit

JSON Structure Validation

• Required Keys: Verify tool , setup , pages are present

• Setup Completeness: Ensure theme, grid, typography, colors, brand are included

• Page Structure: Validate each page has name, layout, components, copy

Design System Consistency

• Token Mapping: Verify design system tokens are correctly mapped

• Component References: Ensure component names match design system

• Brand Alignment: Confirm brand values and identity are consistent

Readability Check

• Indentation: Verify 2-space indentation is maintained

• Compression: Check props and position are single-line

• Abbreviations: Confirm consistent abbreviation usage

Example Output (Balanced Formatting)

Efficient Basic Usage (approximately 4500 characters)

{ "tool": "Figma Make", "setup": { "theme": "Modern dark theme with glassmorphism effects", "grid": "12-col responsive, 80px desktop, 16px mobile", "typography": "Inter 24/16/14px", "colors": ["#000000", "#1a1a1a", "#FFFFFF", "#B3B3B3", "#E50914", "#0066CC", "#333333"], "brand": {"name": "BrandName", "primary": "#E50914", "bg": "#000000", "text": "#FFFFFF"} }, "pages": [ { "name": "Auto-play Highlight Player", "layout": "Full-screen vertical video player (9:16) with Instagram Stories-style interface. Top: brand logo and progress indicators. Center: auto-playing highlight video. Bottom: control overlay with pause, skip, close buttons. Auto-hide controls after 3 seconds.", "components": [ {"name": "VideoPlayer", "variant": "vertical_story", "props": {"aspectRatio": "9:16", "bg": "#000000", "autoPlay": true, "showControls": false}, "position": {"x": 0, "y": 0, "w": 375, "h": 812}}, {"name": "ProgressIndicator", "variant": "story_progress", "props": {"activeColor": "#FFFFFF", "inactiveColor": "rgba(255,255,255,0.3)", "h": "3px"}, "position": {"x": 16, "y": 44, "w": 343, "h": 3}}, {"name": "ControlOverlay", "variant": "video_controls", "props": {"bg": "rgba(0,0,0,0.8)", "autoHide": true, "hideDelay": "3000ms"}, "position": {"x": 16, "y": 680, "w": 343, "h": 100}}, {"name": "Button", "variant": "control_pause", "props": {"bg": "rgba(255,255,255,0.2)", "color": "#FFFFFF", "borderRadius": "50%", "icon": "pause"}, "position": {"x": 50, "y": 700, "w": 48, "h": 48}}, {"name": "Button", "variant": "control_skip", "props": {"bg": "rgba(255,255,255,0.2)", "color": "#FFFFFF", "borderRadius": "50%", "icon": "skip_forward"}, "position": {"x": 160, "y": 700, "w": 48, "h": 48}}, {"name": "Button", "variant": "control_close", "props": {"bg": "rgba(255,255,255,0.2)", "color": "#FFFFFF", "borderRadius": "50%", "icon": "close"}, "position": {"x": 270, "y": 700, "w": 48, "h": 48}} ], "copy": [ {"key": "loading_text", "text": "Preparing highlights...", "component": "LoadingIndicator"}, {"key": "pause_tooltip", "text": "Pause", "component": "Button"}, {"key": "skip_tooltip", "text": "Skip", "component": "Button"}, {"key": "close_tooltip", "text": "Close", "component": "Button"} ] }, { "name": "Highlight Selection Card", "layout": "Horizontal card layout with thumbnail (16:9), title, description, duration, and action buttons. Card has subtle elevation and brand styling.", "components": [ {"name": "Card", "variant": "highlight_preview", "props": {"bg": "#1a1a1a", "borderRadius": "12px", "padding": "16px", "border": "1px solid #333333"}, "position": {"x": 80, "y": 200, "w": 1120, "h": 200}}, {"name": "VideoThumbnail", "variant": "preview_image", "props": {"aspectRatio": "16:9", "bg": "#000000", "borderRadius": "8px"}, "position": {"x": 96, "y": 216, "w": 300, "h": 168}}, {"name": "Button", "variant": "play_overlay", "props": {"bg": "rgba(229,9,20,0.9)", "color": "#FFFFFF", "borderRadius": "50%", "icon": "play"}, "position": {"x": 216, "y": 276, "w": 60, "h": 60}}, {"name": "Button", "variant": "cta_play", "props": {"bg": "#E50914", "color": "#FFFFFF", "borderRadius": "8px", "padding": "12px 24px"}, "position": {"x": 1056, "y": 216, "w": 120, "h": 48}}, {"name": "Button", "variant": "secondary_share", "props": {"bg": "transparent", "color": "#B3B3B3", "borderColor": "#333333", "borderRadius": "8px", "icon": "share"}, "position": {"x": 1056, "y": 280, "w": 120, "h": 48}}, {"name": "Tag", "variant": "duration_badge", "props": {"bg": "#E50914", "color": "#FFFFFF", "borderRadius": "4px"}, "position": {"x": 424, "y": 216, "w": 40, "h": 24}} ], "copy": [ {"key": "content_title", "text": "Featured Content Title", "component": "ContentInfo"}, {"key": "content_info", "text": "Content description or metadata", "component": "ContentInfo"}, {"key": "duration", "text": "0:45", "component": "Tag"}, {"key": "play_button", "text": "Play", "component": "Button"}, {"key": "share_button", "text": "Share", "component": "Button"} ] } ] }

Balanced Formatting Checklist

• ✅ Maximum 2 pages

• ✅ Maximum 6 components per page

• ✅ Maximum 8 copy items per page

• ✅ Layout description under 200 characters

• ✅ Base indentation (2 spaces)

• ✅ Props and position single-line compression

• ✅ Copy arrays single-line compression

• ✅ Abbreviation usage (bg, color, w, h)

Usage Examples (Balanced Formatting Applied)

1. Basic Usage

"Generate a Figma Make prompt. Reference design brief from initiatives/feature-name/design/design-brief-feature-name.json and use the design system to create a feature dashboard. Apply balanced formatting to satisfy both readability and 5000 character limit."

2. Detailed Usage (Optimized)

"Generate a Figma Make prompt. Product: live streaming dashboard. Purpose: increase user engagement. Target: content consumers. Use only VideoPlayer, Scoreboard components, compress props and position to single line while maintaining base indentation."

3. Subscription Plan Page (Balanced)

"Generate a Figma Make prompt. Product: subscription plan selection page. Purpose: conversion optimization. Target: new users. Use only SubscriptionCard, PricingBadge components, balance readability and compression."

Integration & Workflow

Design Brief Integration

• Input Source: Use existing design brief JSON as primary input

• Token Extraction: Map design brief variables to Figma Make format

• Component Mapping: Reference design brief components in Figma Make structure

Design System Mapping

• Token Mapping: color.semantic.accent.brand → "primary": "<brand color>"

• Spacing: spacing.6 → "w": 24, "h": 24

• Typography: typography.fontSize.base → "16px"

• Component Library: Use only core variants, limit props to 3 (bg, color, borderRadius)

Figma Make Workflow

• Direct Import: JSON can be directly imported into Figma Make

• Auto-generation: Enables automated design generation from specifications

• Consistency: Ensures brand and design system consistency across generated designs

Troubleshooting & Common Issues

Character Limit Exceeded

• Issue: JSON exceeds 5000 character limit

• Solution: Reduce pages to 1, components to 4 per page, or compress descriptions further

• Check: Use JSON minifier to identify largest sections

Invalid JSON Structure

• Issue: Figma Make rejects the JSON format

• Solution: Validate required keys (tool , setup , pages ) and ensure proper nesting

• Check: Use JSON validator before importing

Missing Design System Tokens

• Issue: Components reference non-existent design tokens

• Solution: Map to existing design system tokens or use fallback values

• Check: Verify token references against design system documentation

Poor Readability

• Issue: JSON is too compressed to review or edit

• Solution: Increase indentation or add strategic line breaks while staying under limit

• Check: Balance compression with human readability needs

Quick Reference

JSON Schema Template

{ "tool": "Figma Make", "setup": { "theme": "<50 chars max>", "grid": "<responsive grid>", "typography": "<3 sizes>", "colors": ["<7 colors>"], "brand": {"name": "<name>", "primary": "<color>", "bg": "<color>", "text": "<color>"} }, "pages": [{"name": "<name>", "layout": "<200 chars max>", "components": [...], "copy": [...]}] }

Character Limits

• Total: 5000 characters max

• Pages: 2 max

• Components per page: 6 max

• Copy per page: 8 max

• Layout description: 200 chars max

• Theme description: 50 chars max

Common Abbreviations

• backgroundColor → bg

• textColor → color

• borderRadius → borderRadius

• width → w

• height → h