Figma AI Tutorial

Step 1: Access Figma AI in Your Workspace

First, log into your Figma account at figma.com. I always start by creating a new design file—click the '+' button in your dashboard. Once your blank canvas loads, you need to enable the AI features. In my experience, they don't appear by default in the Starter plan. Go to the top menu bar and click 'Plugins' > 'Search plugins'. In the search bar, type 'Figma AI' and you should see the official plugin by Figma. Click 'Run'. A small AI icon (a sparkle) will now appear in your toolbar. What surprised me was that you need to run this plugin each new session; it's not permanently embedded. This gives you access to the main AI actions: 'Find with AI', 'Text to Icon', and the AI-powered text tools.

Step 2: Generate UI Copy with the AI Text Tool

Let's tackle the most common task first: writing copy. Draw a simple rectangle to act as a button. Select the Text tool (T) and click inside the rectangle. Instead of typing, look for a tiny sparkle icon at the bottom of the text properties panel on the right. Click it. A field will appear saying 'Describe what you want to write...'. Here's where you need to be specific. I tested vague prompts like 'button text' and got generic 'Click Here'. Instead, type 'a friendly, encouraging sign-up button for a fitness app'. Hit Enter. Figma AI will generate 3-4 options. You can click 'Generate more' if none fit. Click on one to insert it. In my experience, this is a massive time-saver for headers, labels, and error messages. The copy is decent for placeholder content, but always review it for brand voice.

Step 3: Create a Custom Icon from a Text Prompt

This is my favorite feature. Let's make an icon for our fitness app button. Draw a small square or circle near your button. With the shape selected, find the 'Plugins' menu again in the top bar, or click the pinned AI icon. This time, choose 'Text to Icon'. A panel opens on the left. Describe the icon you need. I tested 'a simple dumbbell icon, line style, minimalist'. Be descriptive about style—it listens. Click 'Generate'. You'll get four black-and-white vector icon options. Click one to insert it directly into your selected frame. What surprised me was how editable it is; it comes in as a vector group, so you can ungroup it (Ctrl+Shift+G) and change stroke weights or colors. It's perfect for creating a cohesive set of custom UI icons in seconds without leaving Figma.

Step 4: Use AI for Layout and Spacing Suggestions

Now, let's organize our button and icon. Select both elements. In the right-hand 'Design' panel, look for the 'Auto layout' section (a stack icon). Click the '+' to add an auto-layout. Your items will stack. Here's where AI can help. With the auto-layout frame selected, look for a faint sparkle icon next to the spacing value in the panel. Click it. Figma AI will analyze your items and suggest a better padding and spacing value. I've found its suggestions for internal padding (like 16px) and gap between items (like 8px) are usually very sensible and follow standard UI conventions. It's a small but intelligent assist that helps polish layouts faster. You can accept the suggestion or generate another. This feature saved me from the endless '2px tweak' cycle.

Step 5: Find Assets and Layers with 'Find with AI'

As your file grows, finding things gets hard. The 'Find with AI' tool is a game-changer. Press 'Ctrl+F' or click the magnifying glass in the top-left toolbar. In the search field, you'll see the AI sparkle icon. Click it. Instead of searching exact layer names, describe what you want. I tested searches like 'the blue button I made earlier' or 'all headline text layers'. It understands intent remarkably well and highlights the relevant layers on the canvas. In my experience, this is far more intuitive than scrolling through the layer list, especially in complex team files. It's also great for locating specific icons or components when you can't remember what you named them. This feature alone justifies using the AI suite for large projects.

Step 6: Share Your AI-Assisted Design and Iterate

Your design is ready. To share, click the blue 'Share' button in the top-right. You can generate a link for view-only or edit access. I always add a comment using '@' to mention teammates. Here's the key: be transparent about using AI. I add a comment saying 'Icon and button copy generated with Figma AI for speed—please review.' This sets the right expectation. To iterate based on feedback, use the AI tools again. Need a new icon variant? Use 'Text to Icon' again. Copy too formal? Select the text and use the sparkle to 'Rewrite' with a new prompt like 'more casual'. In my daily use, this iterative loop—create with AI, share, get feedback, refine with AI—is where the true efficiency gain happens.