​

Use Cases & Scenarios

​

🎨 Design System Extraction

​

Scenario 4b: Extract Full Design System for AI Code Generation

"Use figma_get_design_system_kit to extract my full design system from file key abc123, then use those tokens and component specs to build a signup page"

1. AI calls figma_get_design_system_kit — gets tokens, components, and styles in one call
2. Receives visual specs (exact colors, padding, typography, layout) for each component
3. Uses actual token values (light/dark modes) instead of hardcoded values
4. Builds the page using your real design system variables

• “Extract only my tokens and styles” → include: ["tokens", "styles"]
• “Get my Button and Card components with images” → componentIds: ["1:234", "5:678"] + includeImages: true
• “Just get an inventory of what’s in my design system” → format: "compact"

​

Scenario 5: Extract Design Tokens

"Get all design variables from https://figma.com/design/abc123 and export them as CSS custom properties"

1. AI extracts all variables using Figma API
2. Formats them as CSS custom properties
3. Provides organized, ready-to-use CSS code

:root {
  /* Colors */
  --color-primary-default: #4375FF;
  --color-primary-hover: #2563EB;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;

  /* Typography */
  --font-size-body: 16px;
  --line-height-body: 24px;
}

​

Scenario 6: Generate Tailwind Config

"Get variables from https://figma.com/design/abc123 and export as Tailwind config"

1. AI extracts variables
2. Converts to Tailwind format
3. Provides tailwind.config.js code

​

Scenario 7: Audit Design System Usage

"Get all variables from my design system and show me where each one is used"

1. AI extracts variables with enrichment enabled
2. Shows usage analysis
3. Lists which styles/components use each variable

​

🔧 Component Implementation

​

Scenario 8: Implement Component from Figma

"Get the Tooltip component from https://figma.com/design/abc123?node-id=695-313 and help me implement it in React"

1. AI fetches component data with visual reference image
2. Extracts layout, styling, and property information
3. Helps you implement with accurate spacing, colors, and behavior

• Component image for visual reference
• Layout properties (padding, spacing, auto-layout)
• Color and typography specs
• Implementation guidance

​

Scenario 9: Get Component Specifications

"Get visual reference and layout specs for the Button component at node-id=123:456"

1. AI renders component as high-res image
2. Extracts layout measurements
3. Lists color values and typography
4. You implement it yourself with accurate specs

​

Scenario 10: Compare Multiple Component Variants

"Get component data for these three button variants: node-id=1:2, node-id=1:3, node-id=1:4. Show me the differences"

1. AI fetches all three variants
2. Compares their properties
3. Highlights what changes between variants (colors, borders, padding, etc.)

​

✏️ Design Creation (Local Mode & Cloud Mode)

​

Scenario 11: Create Component Variants with Variables

• Local mode with Desktop Bridge plugin running
• Design system variables defined (colors, spacing, radius)

"Create a button component with:
- 4 types: primary, secondary, outline, ghost
- 3 sizes: small, medium, large
- 5 states: default, hover, active, focus, disabled

Bind the colors to my design system variables (piccolo for primary, beerus for secondary, etc.) and use the spacing/radius variables for padding and border-radius."

1. AI loads required fonts
2. Creates individual component variants (60 total: 4×3×5)
3. Applies variable bindings for colors, padding, and border-radius
4. Combines into a component set
5. Calls figma_arrange_component_set to organize with labels and proper layout
6. Takes a screenshot to verify the result

• “Add descriptions to each variant”
• “Adjust the hover states to use darker colors”
• “Create a similar set for icon buttons”

​

Scenario 12: Build a Design System from Scratch

"Create a design system with:
1. A color variable collection with:
   - Primary colors (piccolo, beerus, goten)
   - Neutral colors (bulma, trunks, goku)
   - Semantic colors (success, warning, error)
2. A spacing variable collection with xs (4px) through 2xl (48px)
3. A radius variable collection with none, sm, md, lg, full

Then create a basic button component using these variables."

1. AI creates variable collections
2. Adds variables with appropriate values
3. Creates a button component bound to the variables
4. Provides a screenshot of the result

​

Scenario 13: Organize Existing Component Set

"Find my 'Button' component set on the current page and arrange it with:
- Proper variant labels
- Purple dashed border container
- Full-width frame"

1. AI finds the component set by name
2. Calls figma_arrange_component_set with your specifications
3. Variants are organized in a grid with row/column labels
4. Everything is wrapped in a properly styled container

​

Scenario 14: Create Component with Auto-Layout

"Create a card component with:
- Vertical auto-layout, 16px gap
- 24px padding all around
- Rounded corners (12px)
- Contains: image placeholder, title text, description text, action button
- Bind padding to my spacing variables"

1. AI executes Plugin API code to create the frame
2. Sets up auto-layout with specified settings
3. Creates child elements (image, text, button)
4. Binds padding to design system variables
5. Converts to component

​

Scenario 15: Add Documentation to Components

"Add a description to my Button component explaining:
- When to use each variant
- Accessibility requirements
- Usage guidelines

Use markdown formatting."

1. AI finds the Button component
2. Calls figma_set_description with markdown-formatted documentation
3. Description appears in Figma’s component panel

​

Scenario 16: Clone and Modify Existing Design

"Clone my 'Card/Default' component 3 times and modify each:
1. 'Card/Compact' - reduce padding to 12px
2. 'Card/Featured' - add a colored top border
3. 'Card/Minimal' - remove the image placeholder"

1. AI clones the component using figma_clone_node
2. Modifies each clone using node manipulation tools
3. Renames using figma_rename_node
4. Takes a screenshot to show all variations

​

Scenario 17: Variable Mode Management (Local Mode & Cloud Mode)

"Add a 'Dark' mode to my colors collection and set up the dark mode values:
- piccolo: #60A5FA (lighter blue)
- beerus: #A78BFA (lighter purple)
- background: #1F2937 (dark gray)
- text: #F9FAFB (light gray)"

1. AI finds the colors collection
2. Adds a new mode using figma_add_mode
3. Updates each variable with dark mode values using figma_update_variable
4. Confirms the changes

• “Show me all variables with their light and dark values”
• “Create a preview frame showing both modes”

​

Scenario 18: Batch Component Creation

"Create icon button components for these actions:
- Edit (pencil icon)
- Delete (trash icon)
- Copy (duplicate icon)
- Share (share icon)

Each should have 3 sizes (24px, 32px, 40px) and use the same variable bindings as my regular buttons."

1. AI creates each icon button variant
2. Applies consistent styling and variable bindings
3. Combines into a component set
4. Organizes with figma_arrange_component_set
5. Takes a final screenshot

​

Scenario 19: Interactive Iteration Workflow

"Create a navigation bar component with a logo, menu items, and a CTA button. After each step, show me a screenshot so I can give feedback."

1. AI creates initial navigation structure → takes screenshot
2. You provide feedback (“make the menu items larger”)
3. AI modifies → takes screenshot
4. Continue iterating until you’re satisfied

​

☁️ Cloud Mode Workflows

​

Scenario: Connect Cloud AI to Figma (First Time)

"Connect to my Figma plugin so we can start designing"

"Pair with my Figma file"

1. AI generates a 6-character pairing code (valid for 5 minutes)
2. You enter the code in the Desktop Bridge plugin’s Cloud Mode section
3. The plugin connects to the cloud relay — you’re paired
4. All 93 Cloud Mode tools — including write/create tools — are now available through the cloud relay

• “Create a card component with an image, title, and description”
• “Update my primary color variable to #006699”
• “Show me what components are in this file”

​

Scenario: Design System Extraction for AI Code Generators (Cloud)

"Connect to my Figma file and extract my design system variables"

1. AI generates a pairing code, you enter it in the plugin
2. Plugin API extracts ALL variables on any Figma plan (Pro, Org, or Enterprise)
3. AI receives full token data: colors, spacing, typography, with all mode values (Light/Dark/etc.)
4. You can now generate code using your real design system

​

Scenario: Update Design Tokens from Web Chat

"Connect to Figma and change the primary brand color to #006699 across all modes"

1. AI generates pairing code, you enter it in the Desktop Bridge plugin
2. AI reads your current variables to find the primary color
3. Updates the value across Light, Dark, and any other modes
4. Confirms the changes with the new values

​

Scenario: Create Components from Web AI Client

"Connect to my Figma and create a notification toast with an icon, title text, and a dismiss button"

1. AI generates pairing code, you enter it in the plugin
2. AI uses the plugin API to create a frame with auto-layout
3. Adds child elements (icon placeholder, title text, dismiss button)
4. Takes a screenshot to verify the result and show you what was created

​

🔍 Visual Debugging Workflows

​

Scenario 20: Document Plugin State

"Navigate to my plugin, take a full-page screenshot, and save it as 'plugin-error-state'"

1. AI takes full-page screenshot
2. Saves with your custom filename
3. You can share the visual state with your team

​

Scenario 21: Monitor Visual Changes

"Take a screenshot, then I'll make a change, then take another screenshot"

1. AI takes “before” screenshot
2. You make your changes
3. AI takes “after” screenshot
4. You can compare the two states

​

🚀 Advanced Workflows

​

Scenario 22: Full Design System Export

"Extract everything from my design system:
1. Get all variables and export as CSS
2. Get all text styles and export as Tailwind
3. Get all color styles as Sass variables
4. List all components"

1. AI systematically extracts all design system data
2. Provides multiple export formats
3. Organizes everything for your codebase

​

Scenario 23: Plugin Development Sprint

1. "Watch console for 5 minutes while I develop"
   → AI monitors in background

2. "Show me any errors from the last 2 minutes"
   → AI filters recent error logs

3. "Take a screenshot of current state"
   → Visual checkpoint

4. "Reload the plugin and clear console"
   → Fresh start

5. Repeat...

​

Scenario 24: Design Token Migration

"Compare my old styles with new variables. Show me what changed and generate migration scripts"

1. AI gets both styles and variables
2. Maps old → new
3. Identifies breaking changes
4. Suggests migration approach

​

💡 Tips for Effective Prompts

​

✅ Good Prompts

• Be specific: “Get the primary button component from https://figma.com/design/abc123?node-id=1:2”
• Include URL: Always provide your Figma file URL
• State intent: “…and help me implement it in React” (tells AI what you’ll do with the data)
• Request format: “export as CSS” vs “export as Tailwind”

​

❌ Avoid Vague Prompts

• ❌ “Get my design system” (which file?)
• ❌ “Help with my plugin” (what specifically?)
• ❌ “Show me components” (which ones? what data?)

​

🎯 Pro Tips

1. Chain operations: “Navigate to X, watch console for 30s, then screenshot”
2. Use filters: “Show me only error logs from the last minute”
3. Be specific about formats: “Export as Tailwind v4 syntax”
4. Request enrichment explicitly: “Get variables with CSS exports and usage information”
5. Cloud Mode — connect first: Start by saying “pair with my Figma plugin” or “connect to Figma” before asking for design changes
6. Use natural language: You don’t need to know tool names. Say “create a blue square” not “call figma_execute”

​

🔄 Integration with Other Tools

​

With Figma Official Dev Mode MCP

1. Use Figma Dev Mode MCP to generate component code
2. Use Figma Console MCP to get design token values
3. Replace hardcoded values with tokens
4. Use Console MCP to debug when integrated

// Step 1: Dev Mode MCP generates
<Button className="bg-[#4375ff]">Click me</Button>

// Step 2: Console MCP provides token
--color-primary: #4375FF

// Step 3: You refactor
<Button className="bg-primary">Click me</Button>

​

📚 More Examples

• Tool Documentation - Complete API reference for all 106 tools
• Architecture Overview - Understanding deployment modes
• Example Prompts - Quick prompt examples
• Troubleshooting - Solutions to common issues

​

🐛 Plugin Development & Debugging

​

Scenario: Simple Plugin Debugging

"Check the last 20 console logs"

1. AI retrieves console logs from the Desktop Bridge plugin sandbox
2. Shows errors, warnings, and log statements with timestamps

• “Show me just the error logs”
• “What does this stack trace mean?”
• “Help me fix this error”