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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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)