12_Nehmat_Figma_Make

8 min read

Overview

Nehmat (a design manager at Cant, ~13 yrs experience, ex-developer, design professor at Algonquin College) demonstrates how Figma Make has been “drastically transformed” after Config 2026. The video compares three approaches to turning existing Figma designs into accurate interactive prototypes — Figma Make (native), Claude (via Figma MCP), and Codex — and argues that Make is now shockingly more accurate and faster than the LLM-intermediary route. The host summarizes changes in three areas: significantly improved performance/accuracy, speed (from ~10 min to under 3 min), and deeper integration with the Figma ecosystem (GitHub repo cloning, skills, connectors, plan mode, model selection, dictate, make kits). It also gives a sneak peek at a Figma Make beta feature that lets designers visually edit their own (cloned) code and commit back to the repo — bridging the designer/developer gap. Core claim: if your designs live in Figma, you no longer need to leave Figma to prototype.

Key Insights

  1. The single biggest change is performance/accuracy — previously Figma Make took ~10 minutes and produced results “not at all up to par” (on par with Lovable or similar), failing high-fidelity tests. Now it produces exact matches so the host and team are “happily shocked.” (1:25)
  2. Speed improved from ~10 minutes to under 3 minutes — a complete prototype workflow that “matches exactly what I wanted” was created in less than 3 minutes from a single prompt. (2:31)
  3. Figma Make’s biggest advantage is living inside the Figma ecosystem — it has direct access to your Figma resources, so it doesn’t miss images/elements the way external tools do. “These tools should talk together.” (3:04, 11:03)
  4. The Figma MCP was built so LLMs could understand Figma files — but now the LLMs (Claude & Codex) are inside Figma, making the connection “so much better” and removing the need to go elsewhere even for vector generation. (11:09)
  5. Accuracy is 100% vs. the competition — a copy-design test showed the Make output was “exactly the same screen,” while the Claude version was “kind of close but not that great” and missing visual elements. (12:45, 14:19)
  6. Claude takes “liberty to add a few good things” (good but not exact fidelity); Codex completely misunderstood the prompt and edited the Figma file directly rather than building an HTML prototype. (15:24, 15:48)
  7. Model choice matters by task — GPT 5.6 is excellent at accurately recreating things and is better with tokens; Claude Opus 4.8 is the go-to for more creative, unique output. “It’s not about which model is better, it depends on the task.” (7:44)
  8. The Figma Make beta (local code) is a design-engineer bridge — clone a GitHub repo, edit the live app visually (move elements, change text/images, reorder), see every change as an apply-able action, and commit back to the repo. (3:16, 18:10)
  9. Connectors, skills, plan mode, and dictate bring Claude/Codex-style workflows into Figma — skills are portable .md files you can import from Claude/Codex (e.g., a design critique skill), and connectors let you feed a Jira ticket or GitHub/Slack context as your entry point. (4:36, 5:17)
  10. Team members are shifting back to the tool where their designs exist — Make is removing the need to use Claude/Codex as “intermediary tools” to understand Figma designs. (20:03)

Actionable Techniques

  1. Prototype directly from Figma with “Send to Figma Make” — select your designed screens and choose the default “send to Figma make” option; Figma integrates the screens into the make prompt automatically. (10:43)
  2. Use a simple, minimal prompt for prototyping — the host’s entire prompt was “Create an interactive prototype for my workflow” and it produced the full, exact workflow in under 3 minutes. (11:45)
  3. Verify accuracy with “Copy design” → paste back into Figma — click “copy design” on the Make output, paste into your real design file, and zoom in to confirm it’s pixel-identical. (12:45)
  4. Choose your model by task — use GPT 5.6 for accurate recreation/token efficiency; use Claude Opus 4.8 when you want something unique and creative. (7:49)
  5. Use the “annotate”/comment feature for iteration — select a specific element and leave a contextual instruction (e.g., “replace this icon with a green book icon”); in beta, “annotate for the agent” turns it into an apply-able change the agent executes. (16:52, 17:27)
  6. Treat Make like a design file for manager review — use the comment feature to review designers’ work at element-level, making Make a place for iteration, not just generation. (17:01)
  7. Import your existing skills into Make — skills are just .md files; upload ones you already created in Claude or Codex (e.g., a design critique or heuristics evaluation skill), or create one from scratch for your brand rules or an “AI slop” prevention skill. (5:39)
  8. Connect your tools via connectors — connect Slack, GitHub, Jira, and Confluence so you can feed a PM’s Jira ticket in as your context/entry point for a feature. (4:54)
  9. Use dictate mode to prototype from flowing thoughts — instead of a polished prompt, start speaking in “design mode” and let Make transcribe and generate from your natural flow (same habit as in Claude). (8:43)
  10. Use plan mode when the Make output is intended as development code — like Claude Code’s plan mode, plan/think before building; less relevant for quick prototypes. (6:40)
  11. Build make kits from your library styles or npm packages — start with Figma library styles or npm packages from your code to improve design-system accuracy if you already have a well-built design system. (8:09)
  12. For design-layer edits, don’t let Codex touch your vector layers — if you want Codex to edit the design itself, use the Figma design agent or the hidden AI action “add interactions,” which makes Figma AI connect the prototype for you. (16:34)
  13. Share via a simple link, not a downloaded HTML file — Make gives stakeholders a live link to share (with users too); Claude/Codex require downloading an HTML artifact and workarounds, which you can’t easily give to users. (21:04)

Tools & Skills Mentioned

  • Figma Make — native AI prototyping inside Figma; now with performance/accuracy improvements and ecosystem integration. (throughout)
  • Figma Make beta (local code / code editing) — clone a GitHub repo, run dependencies, edit the live app visually, apply changes to code, commit and send back to developers. (3:16, 18:10)
  • GPT 5.6 — model in Make/Codex, best for accurate recreation and token efficiency. (7:23)
  • Claude Opus 4.8 — model for more creative/unique output. (7:35)
  • Gemini & Claude Sonnet — earlier Make models, “not strong enough” (now superseded). (7:29)
  • Figma Make Skills — portable .md instruction files importable from Claude/Codex (e.g., design critique, heuristics evaluation, brand rules, custom “AI slop” prevention). (5:17)
  • Connectors — Slack, GitHub, Jira, Confluence (Atlassian) integrations for context/entry points. (4:43)
  • Plan mode — for Make output intended as development code. (6:40)
  • Dictate mode — voice transcription of flowing design thoughts into a prompt. (8:36)
  • Make kits — build from Figma library styles or npm packages for design-system accuracy. (8:09)
  • Figma MCP — the protocol that lets Claude/Codex understand Figma files (now less needed since LLMs are inside Figma). (11:09)
  • Figma design agent — used to create the SaaS demo screens; also runs on Claude and Codex. (9:25)
  • “Add interactions” AI action — hidden Figma AI action that auto-connects prototype interactions. (16:38)
  • Claude (with Figma MCP) — alternative prototype generation route, good but less exact. (13:40)
  • Codex — alternative route; in this test it misunderstood the prompt and edited the Figma file directly. (13:57)
  • Lovable — comparable to old Figma Make quality. (1:45)
  • Figma Community — example projects you can start from. (9:20)

Quotes Worth Keeping

  • “The level of performance and accuracy is incredibly significant, to an extent where I’m actually shocked.” (2:08)
  • “In less than 3 minutes, I was able to create this complete prototype workflow that matches exactly what I wanted.” (2:31)
  • “It’s not about which model is better. It depends on the task that you’re doing.” (7:44)
  • “Why would I go elsewhere when this is done so easily on my behalf?” (11:03)
  • “The very purpose of the Figma MCP was to enable those LLMs like Claude and Codex to understand your Figma file. But now that Figma has very efficiently brought both Claude and Codex LLMs inside of Figma, the connection is so much better.” (11:09)
  • “This is exactly the same screen. There is no difference… The accuracy is beyond impressive.” (13:05)
  • “Figma Make is shockingly more accurate. So depending on what is your preferred tool, you can go with that.” (15:36)
  • “The biggest advantage Figma has right now is this connection where these tools should talk together.” (13:26)
  • “This does not mean it needs to be the path for all of you, but for so many designers who want to work on actual code in smaller companies, this feature is going to be incredibly helpful.” (19:46)
  • “If your workflows are designed and created inside Figma design and you want to prototype, the wonderful news is you no longer have to go elsewhere.” (20:31)

Graph View

Backlinks