Skip to content
PM Master Handbook
⬇ PDF
Module 18

Figma and AI Design Tools

Design screens, build click-through prototypes, run workshops in FigJam, generate working prototypes with Figma Make, and hand designs to Claude Code through Figma's MCP server.

≈ 6 h studyDraftedSources: Figma Help Center, Figma pricing page and MCP collection docs; DeepLearning.AI Claude Code course (Figma MCP project); Module 5; checked 23 Oct 2026

On this page
  1. Figma's products
  2. Level 1 · The interface and your first screens
  3. Level 2 · Prototypes, reviews and handoff
  4. Level 3 · Figma AI, Figma Make and MCP
  5. Labs
  6. PM best practices
  7. Exercises with model answers
  8. Key takeaways
  9. Check your understanding
  10. Recommended resources

Illustrative screens

Figma's interface is updated often. Screens below are illustrative wireframes; search the Figma Help Center if a menu has moved.

18.1 Figma's products

Figma Design
  • Screens, components, design systems
  • Click-through prototypes
FigJam
  • Whiteboard for workshops
  • Journey maps, affinity maps, retros
Dev Mode
  • Specs, measurements and code hints for engineers
  • Includes the MCP server
Figma Make
  • Prompt or design → working prototype
  • AI writes the code
Figma Slides
  • Presentations built from design files
Community
  • Free templates, UI kits, plugins
  • Start from a kit instead of from zero
The Figma family. PMs mostly use FigJam for workshops, Figma Design to review and sketch, and Figma Make for quick working prototypes.

18.1.1 What it costs (checked 23 Oct 2026)

Plan Price Notes
Starter Free Limited files, a daily AI credit allowance, 3 Figma Make files
Professional about $16 a month (full seat); about $12 (Dev seat); about $3 (Collab seat) Unlimited files, Dev Mode, MCP server, monthly AI credits
Organization / Enterprise from about $55 a month per full seat Design systems at scale, admin controls

Viewing and commenting are free. A PM who only reviews and comments can use a free or Collab seat. Check figma.com/pricing.

18.2 Level 1 · The interface and your first screens

Level 1 · Beginner

  • Frames are screens. Start with a phone frame (for example 390 × 844).
  • Auto layout (Shift+A) stacks items with consistent gaps and padding, and resizes when content changes. Use it for buttons, cards and lists.
  • Components are reusable elements (a button, a card). Change the main component and every copy updates.
  • Styles and variables keep colours, text sizes and spacing consistent.
  • Start from a UI kit in Figma Community, so you are not drawing buttons from scratch.

18.3 Level 2 · Prototypes, reviews and handoff

18.3.1 Click-through prototypes

Level 2 · Working PM

  • Variants group versions of a component (button: default, hover, disabled), so states are designed, not forgotten.
  • Comments: press C and click to leave feedback on an exact spot; mention people with @.
  • Dev Mode shows engineers measurements, colours, assets and code hints. Mark frames Ready for dev.
  • Branching (paid plans) lets designers explore without breaking the main file.
  • PM review checklist: every state designed (empty, loading, error, success)? Copy final? Accessible contrast and tap sizes? Edge cases from the PRD covered?

18.3.2 FigJam for workshops

Affinity map
  • Paste interview quotes as stickies
  • Group into themes
  • Vote with stamps
User journey map
  • Stages across the top
  • Actions, thoughts, pain points, opportunities
Prioritisation 2×2
  • Impact versus effort
  • Move stickies live with the team
Retro
  • Went well, didn't, try next
  • Timer and voting
Flow diagram
  • Shapes and connectors for user or system flows
AI in FigJam
  • Summarise or sort stickies; generate a first board from a prompt (where available)
FigJam boards PMs run. Templates for all of these are in FigJam's template picker and Figma Community.

18.4 Level 3 · Figma AI, Figma Make and MCP

Level 3 · Advanced

Goal: go from idea or design to a working prototype, and let Claude Code build directly from your Figma frames.

18.4.1 Figma AI

Figma's AI features (they vary by plan and change often) help with tasks such as generating a first draft of a layout, renaming layers, rewriting or translating text, removing image backgrounds and searching for similar designs. Each use spends AI credits from your plan.

18.4.2 Figma Make: prompt to working prototype

18.4.3 Figma MCP server + Claude Code

The Figma MCP server lets Claude Code (and other AI tools) read your design: layout, components, variables and assets. Claude can then build the screen in code to match.

18.5 Labs

Lab 1 · Three screens with auto layout (Free, 40 minutes)

  1. Duplicate a free mobile UI kit from Figma Community.
  2. Create three phone frames: Bill, Split with friends, Request payment.
  3. Build the list items and buttons with auto layout and one Button component with three variants.

Lab 2 · Clickable prototype and usability test (30 minutes)

  1. Connect the three screens in the Prototype tab.
  2. Present and share the link.
  3. Test with two people using the think-aloud method. Note where they hesitate.

Lab 3 · FigJam affinity map (30 minutes)

  1. Open a FigJam affinity-map template.
  2. Paste 20 interview quotes as stickies (use Class 14 Lab 2 output).
  3. Group them into themes, name each theme, and vote on the top two.

Lab 4 · Figma Make prototype (Free or paid, 30 minutes)

  1. Open Figma Make, attach your three frames.
  2. Ask for a working prototype with live total recalculation.
  3. Add one edge case, then share the link.

Lab 5 · Claude Code builds from Figma (Professional, 40 minutes)

  1. Follow Figma's MCP guide to add the server to Claude Code.
  2. Copy the link to your Bill frame.
  3. Ask Claude Code: "Implement this frame as a responsive HTML page."
  4. Compare with the design and ask for fixes until it matches.

18.6 PM best practices

  • Low fidelity first: boxes and real copy before colour and polish.
  • Design the states, not just the happy path.
  • Name layers and frames so engineers and AI tools understand them.
  • Comment, don't redesign: describe the problem; let the designer solve it.
  • Keep one source of truth: link the Figma file in the PRD, and the PRD in the Figma file.

18.7 Exercises with model answers

Exercise · What to use

(a) Run a 45-minute remote workshop to sort 60 interview quotes. (b) Show a stakeholder how the split-bill calculation behaves with three people. (c) Hand a finished screen to engineering.

Model answer

(a) FigJam affinity map. (b) Figma Make (a click-through prototype can't calculate). (c) Mark the frame Ready for dev in Dev Mode, and optionally let engineers use the MCP server with their coding agent.

18.8 Key takeaways

  • Frames, auto layout and components are the three skills that make Figma easy.
  • Prototype and test before building. FigJam is your workshop room.
  • Figma Make turns designs into working prototypes; the MCP server lets Claude Code build from your frames.

18.9 Check your understanding

Check your understanding

Which feature makes a list of cards keep consistent spacing as items change?

  1. Comments
  2. Auto layout
  3. Dev Mode
  4. FigJam stamps
Why: Auto layout stacks items with fixed gaps and padding and resizes with content.

You need to show a live calculation in a prototype. Use…

  1. A click-through prototype
  2. Figma Make
  3. A FigJam board
  4. A PDF export
Why: Figma Make writes working code, so values can be calculated.

What gives Claude Code direct access to a Figma frame's layout and variables?

  1. Exporting a PNG
  2. The Figma MCP server
  3. A Slack message
  4. Figma Slides
Why: The MCP server exposes design context to AI coding tools.
← PreviousModule 17: Replit and Other AI App BuildersNext →Module 19: Notion, PRD Tools and AI Documentation