Design Strategy Prompt

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/grab/cursor-talk-to-figma-mcp/llms.txt

Use this file to discover all available pages before exploring further.

​

Overview

​

When to Use

• Creating new designs from scratch
• Building complex UI layouts (login screens, dashboards, forms)
• Establishing naming conventions and hierarchy
• Planning element creation order
• Understanding Figma’s design principles

​

Key Principles

​

1. Start with Document Structure

• Always call get_document_info() first to understand the current state
• Plan your layout hierarchy before creating elements
• Create main container frames for each screen or section

​

2. Naming Conventions

• Use descriptive, semantic names for all elements
• Follow consistent patterns:
  • “Login Screen” for screens
  • “Logo Container” for grouped elements
  • “Email Input” for form fields
• Group related elements with meaningful names

​

3. Layout Hierarchy

Login Screen (main frame)
├── Logo Container (frame)
│   └── Logo (image/text)
├── Welcome Text (text)
├── Input Container (frame)
│   ├── Email Input (frame)
│   │   ├── Email Label (text)
│   │   └── Email Field (frame)
│   └── Password Input (frame)
│       ├── Password Label (text)
│       └── Password Field (frame)
├── Login Button (frame)
│   └── Button Text (text)
└── Helper Links (frame)
    ├── Forgot Password (text)
    └── Don't have account (text)

​

4. Input Fields Structure

• Create a container frame for each input field
• Include a label text above or inside the input
• Group related inputs together (username + password)

​

5. Element Creation Tools

• create_frame() - For containers and input fields
• create_text() - For labels, button text, and links
• Set appropriate visual properties:
  • fillColor for backgrounds
  • strokeColor for borders
  • fontWeight for text hierarchy

​

6. Modifying Existing Elements

• Use set_text_content() to update text
• Use set_fill_color() to change colors
• Use move_node() and resize_node() for adjustments

​

7. Visual Hierarchy

• Maintain consistent spacing between elements
• Use appropriate font sizes:
  • Larger for headings/welcome text (20-32px)
  • Medium for input labels (14-16px)
  • Standard for button text (14-18px)
  • Smaller for helper text/links (12-14px)

​

8. Best Practices

• Verify each creation with get_node_info()
• Use parentId to maintain proper hierarchy
• Group related elements together in frames
• Keep consistent spacing and alignment

​

Example: Creating a Login Screen

// 1. Get document info
const docInfo = await get_document_info();

// 2. Create main screen frame
const screen = await create_frame({
  x: 0,
  y: 0,
  width: 375,
  height: 812,
  name: "Login Screen",
  fillColor: { r: 0.95, g: 0.95, b: 0.95, a: 1 }
});

// 3. Create logo container
const logoContainer = await create_frame({
  x: 20,
  y: 80,
  width: 335,
  height: 100,
  name: "Logo Container",
  parentId: screen.id
});

// 4. Add welcome text
const welcomeText = await create_text({
  x: 20,
  y: 220,
  text: "Welcome Back",
  fontSize: 28,
  fontWeight: 700,
  name: "Welcome Text",
  parentId: screen.id
});

// 5. Create input container
const inputContainer = await create_frame({
  x: 20,
  y: 280,
  width: 335,
  height: 140,
  name: "Input Container",
  parentId: screen.id
});

// 6. Create email input with label
const emailInput = await create_frame({
  x: 0,
  y: 0,
  width: 335,
  height: 60,
  name: "Email Input",
  parentId: inputContainer.id,
  fillColor: { r: 1, g: 1, b: 1, a: 1 },
  strokeColor: { r: 0.8, g: 0.8, b: 0.8, a: 1 },
  strokeWeight: 1
});

const emailLabel = await create_text({
  x: 12,
  y: 20,
  text: "Email",
  fontSize: 14,
  name: "Email Label",
  parentId: emailInput.id
});

// 7. Create login button
const loginButton = await create_frame({
  x: 20,
  y: 440,
  width: 335,
  height: 50,
  name: "Login Button",
  parentId: screen.id,
  fillColor: { r: 0.2, g: 0.4, b: 1, a: 1 }
});

const buttonText = await create_text({
  x: 140,
  y: 15,
  text: "Log In",
  fontSize: 16,
  fontWeight: 600,
  fontColor: { r: 1, g: 1, b: 1, a: 1 },
  name: "Button Text",
  parentId: loginButton.id
});

​

Color Best Practices

• White background: { r: 1, g: 1, b: 1, a: 1 }
• Light gray: { r: 0.95, g: 0.95, b: 0.95, a: 1 }
• Black text: { r: 0, g: 0, b: 0, a: 1 }
• Blue primary: { r: 0.2, g: 0.4, b: 1, a: 1 }
• Border gray: { r: 0.8, g: 0.8, b: 0.8, a: 1 }

​

Related Prompts

• Read Design Strategy - For reading existing designs
• Text Replacement Strategy - For updating text in designs

​

Related Tools

• create_frame
• create_text
• get_document_info