Skip to main content
Question

[Advanced DesignOps] Tying Figma Make to the Source of Truth (React/Storybook Repository)

  • December 2, 2025
  • 1 reply
  • 52 views
capella

Hello Design Systems community,

We understand that synchronizing Figma with code (Github connector) can be achieved using plugins (Figma Make Connectors). However, our main barrier is the Figma Make feature itself.

Our goal is that the Figma Make AI, when generating new components, flows, or screens, is strictly limited to only use the components and patterns that already exist in our React code repository (documented in Storybook), rather than inventing new styles or structures.

The Challenge: Training Make to Be Code-Reliant

How can we create a guideline or configure a workflow to ensure Figma Make respects the Component Contract established in our codebase?

1. Utilizing Code Connect and MCP: We know that Figma Code Connect and the MCP (Model Context Provider) are the official tools for providing code context to the AI.

  • Core Question: What is the practical, step-by-step process for configuring the MCP Server and Code Connect to expose our React/Storybook repository as the sole source of valid components for Figma Make? We are seeking a Code-to-AI-to-Design workflow.

2. Limitation of Props & Documentation: Our Button component in Storybook may have props such as size: ('small', 'medium', 'large') and variant: ('primary', 'secondary').

  • Question: How do we ensure that when asking Figma Make to "Create a new dashboard using our components," the AI never generates a button with variant: 'tertiary'? We need to bind the Make's output to the strict React/TypeScript prop types.

  • The Role of Guidelines.md: Beyond the technical binding, how can we best leverage human-readable documentation, such as a GUIDELINES.md file? Does the Figma Make AI parse and prioritize behavioral rules documented here (e.g., "Do not use Button X for action Y") as part of its model context? And how is this data successfully fed via Code Connect?

3. Prompt Prioritization: In addition to attaching the design library in the Make prompt, is there a specific prompt language or format that forces the AI to prioritize the code mapping from Code Connect (and the associated documentation) over its visual creativity?

Our system requires a robust workflow where Make acts as an assistant that assembles the design (functional prototype) using only the "LEGO pieces" from our code.

Any practical experience in configuring Code Connect with Figma Make to ensure component parity, especially regarding how the AI consumes and enforces documented guidelines, will be fundamental. Thank you for your collaboration!

Natã Girotto

1 reply

Natã Girotto

I’m facing the exact same challenge on our side.
Even with Code Connect and a structured Storybook setup, Figma Make still tends to “hallucinate” new variants or patterns that don’t exist in our codebase.

I also believe this can be solved by combining:

  • a strict MCP server exposing only the real component contract,

  • clear GUIDELINES.md rules, and

  • a prompting structure that forces Make to operate only within those constraints.

If we can refine how the MCP context is consumed by Make especially enforcing TypeScript prop types as hard boundaries then Make should behave much more like a “code-driven assembler” instead of a creative generator.

 

Terms & ConditionsCookie settingsAccessibility statement