Automate Design Tasks with the Figma AI Agent

1. 1
   Summon the AI Assistant

   Inside any Figma file, press `Cmd+/` (Mac) or `Ctrl+/` (Windows) to open the command bar. Type your request, like 'create a login screen', or look for the sparkle icon ✨ on the toolbar to access specific AI actions.
2. 2
   Generate a UI Component from a Prompt

   Create an empty frame. With the frame selected, open the AI command bar (`Cmd+/`) and type a descriptive prompt. For example: 'a product card with an image, title, price, and an add to cart button'. The Figma AI Agent will generate the design inside the frame.
3. 3
   Auto-Populate with Realistic Content

   Select one or more text layers or shapes. Click the AI icon ✨ in the top toolbar and choose an action like 'Populate with content'. The Figma AI Agent will fill them with realistic placeholder text (e.g., names, cities) or images from Unsplash.
4. 4
   Organize and Summarize with AI

   Select a frame containing multiple messy layers (e.g., 'Rectangle 1', 'Text 23'). Right-click the frame, navigate to 'Organize', and select 'Rename layers'. The Figma AI Agent will apply logical names based on content and structure.

/* To run this: 1. In Figma, go to Plugins > Development > New Plugin. 2. Choose 'Figma Design' and 'Run once'. 3. Replace the contents of code.ts with this script. 4. Run the plugin (Cmd+Opt+P). It creates a text box you can use with AI. */

async function setupForAI() {
  // Load the default font to create a text node
  await figma.loadFontAsync({ family: "Inter", style: "Regular" });

  // Create a new text node
  const textNode = figma.createText();
  textNode.x = figma.viewport.center.x - 150;
  textNode.y = figma.viewport.center.y - 25;
  textNode.resize(300, 50);
  textNode.characters = "Select this text and use the AI icon ✨ to rewrite this into a marketing headline.";

  // Add the text node to the page and select it
  figma.currentPage.appendChild(textNode);
  figma.currentPage.selection = [textNode];
  figma.viewport.scrollAndZoomIntoView([textNode]);

  // Close the plugin, leaving the text box for the user
  figma.closePlugin("Text box created! Now select it and use the AI features.");
}

setupForAI();