Video summary

Spike: AI assistant + Figma MCP for code-to-Figma workflows — walkthrough

Main summary

Key takeaways

Product Review

Product Being Reviewed

Spike / workflow for using an AI assistant with Figma via an MCP (specifically discussed as Figma Console MCP, remote, with extra security approvals). The goal is code-to-Figma and Figma maintenance workflows for a design system (GitLab design system), including:

  • auditing/updating components
  • generating Figma structures from code/prototypes

Main Features / What It Was Tested to Do

  1. Component health auditing

    • Prompted an AI (Claude in this section) to compare a Figma component vs. its GitLab UI code implementation to find discrepancies.

  2. Generate/update Figma components from source

    • Create a Figma component that doesn’t exist by referencing existing code.
    • Included tricky UI patterns (e.g., masking and hover state complexity).

  3. Batch operations in Figma via MCP

    • Auditing and updating:
      • component descriptions
      • component properties (refactors)
      • design tokens
    • The author notes these are tasks that otherwise require manual scripting/console work; MCP reduces copy/paste overhead.

  4. Recreate prototype flows in Figma using UI kit components

    • Attempted to rebuild view prototype screens in Figma using the UI kit library components.

What Worked Well (Pros)

  • Audits and batch updates were especially effective.
  • Time savings
    • Component comparison typically takes 5–50 minutes, but in the spike it completed in ~1 minute for a component—suggesting scalability.
  • A “magical” feel for certain tasks
    • Audits, batch updates, and generating first drafts of implementations felt compelling (likened to early code generation experiences).
  • MCP improved workflow efficiency
    • Avoided “copy/paste back and forth” between the AI tool and Figma that would otherwise occur with console scripting.
  • Batch operations were among the most tedious tasks
    • They were handled well across tested workflows (completed by Claude and Duo).

What Didn’t Work Well (Cons / Limitations)

  • Unrefined results for complex tasks
    • Especially when the desired answer is known in advance.
  • Unreliable reuse of UI kit components in prototype-to-Figma workflow
    • Tended to create its own assets rather than reuse library components.
    • Required “direct instruction” and “unreasonable workarounds” to force library usage.
  • Prompt sensitivity
    • The “component from code” task required cajoling when prompts were less detailed.
    • More detail improved results—closer to reusing existing components rather than recreating them.
  • Tooling speed/latency issues
    • Claude + cloud code was slow (~1 hour, mostly waiting on responses).
    • Duo achieved similar detail in ~10 minutes.
  • Bottleneck shifts to review, not generation
    • Even when generation is fast, human review/approval remains the limiting factor.

Comparisons Made

  • Claude vs. Duo (speed and responsiveness)
    • Claude via cloud code: very slow (~hour)
    • Duo: much faster (~10 minutes) for similar outcomes
  • MCP vs. alternative approaches (manual scripting)
    • MCP was positioned as better than using a Figma console script plus manual copy/paste between tools

Note: No explicit competitor products were named beyond the assistant models/tools and MCP type.

User Experience Notes

  • The workflow targets design-system maintenance and helps support designers already using Figma + code workflows.

  • A major UX challenge is two-way movement between:

    • Figma free/collaborative spaces, and

    • a code-backed/prototyping flow So teams can:

    • iterate in a coded prototype

    • then return to Figma for collaboration and detailed design work.

Security / Ops Note

  • The author used remote MCP (not first-party Figma MCP) because it didn’t support something at the time.
  • Remote MCP required additional security approvals.

Unique Points Mentioned (Consolidated List)

  • The spike assesses generative AI assistants + Figma MCPs for code-to-Figma design system maintenance.
  • Tested workflows:
    • Figma component vs GitLab UI code comparison/auditing
    • Generate missing Figma components from view + CSS source
    • Batch operations (audit/update descriptions, refactor props, apply design tokens)
    • Recreate view prototype flows in Figma using UI kit library components
  • Tools/assistants used:
    • Mentions Claude and Duo
    • Figma Console MCP (remote, with security approvals)
  • Pros (highlights):
    • Audits and batch updates worked extremely well
    • Completion time improvement: 5–50 min typical → ~1 min (test case)
    • First-draft generation felt “magical”
    • MCP avoids manual copy/paste overhead vs console scripts
  • Cons (highlights):
    • Complex tasks were harder; outputs were unrefined
    • Struggled with consistent UI kit component reuse for screen/prototype recreation
    • More detailed prompts improved results
    • Claude latency was high (~hour); Duo faster (~10 minutes)
    • Review is the real bottleneck once generation is good
  • Top recommendations:
    • Make AI assistants aware of Figma libraries + design system guidance (possibly via repo/CLI/VS Code for the author; not always feasible)
    • Solve two-way workflow between coded prototypes and Figma collaboration (described as the most important unlock)
    • Codify UI kit component props/variants so AI can refactor reliably
    • Standardize and batch update component descriptions while preserving important context
    • Build a testing harness for component health auditing (including visual comparisons and monthly drift detection)
    • Encourage more “play around” to improve iteration, judgment, and tool use
  • Hypothesis: prototype results might improve if prototypes use the design system in code.

Speakers

  • Mitzi Harris (product designer, GitLab design system team)
    • All content appears to come from this single speaker.

Overall Verdict / Recommendation

Promising for design-system maintenance—especially component auditing and batch updates—while still unreliable for complex tasks and for consistently reusing UI kit components in screen/prototype recreation.

Strong recommendation: invest in enabling a reliable two-way workflow (prototype ↔ Figma) and make the AI agent “aware” of the Figma library + design guidance, since that’s positioned as the biggest unlock for real team value.

Original video