alvinindra/figma-mcp-rust/design-strategy

When working with Figma designs, follow these best practices:

1. Start with Document Structure:

• First use get_metadata() to understand the current document
• Use get_pages() to list all pages
• Plan your layout hierarchy before creating elements
• Create a main container frame for each screen/section

1. Naming Conventions:

• Use descriptive, semantic names for all elements
• Follow a consistent naming pattern (e.g., "Login Screen", "Logo Container", "Email Input")
• Group related elements with meaningful names

1. Layout Hierarchy:

• Create parent frames first, then add child elements
• For forms/login screens:
• Start with the main screen container frame
• Create a logo container at the top
• Group input fields in their own containers
• Place action buttons (login, submit) after inputs
• Add secondary elements (forgot password, signup links) last

1. Input Fields Structure:

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

1. Element Creation:

• Use create_frame() for containers and input fields
• Use create_text() for labels, buttons text, and links
• Set appropriate colors and styles:
• Use fillColor for backgrounds
• Use set_strokes() for borders
• Set proper fontStyle for different text elements

1. Modifying existing elements:

• Use set_text() to modify text content of a TEXT node
• Use set_fills() to change background/fill colors
• Use move_nodes() / resize_nodes() for position and size adjustments

1. Visual Hierarchy:

• Position elements in logical reading order (top to bottom)
• Maintain consistent spacing between elements
• Use appropriate font sizes for different text types:
• Larger for headings/welcome text
• Medium for input labels
• Standard for button text
• Smaller for helper text/links

1. Best Practices:

• Verify each creation with get_node()
• Use parentId to maintain proper hierarchy
• Group related elements together in frames
• Keep consistent spacing and alignment
• All write operations are undoable via Ctrl/Cmd+Z in Figma

Example Login Screen Structure:

• Login Screen (main frame)
• Logo Container (frame)
• Logo (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)