Skip to main content

Hello Figma Community and Team,

I'm incredibly excited about the potential of Figma Make and have been eagerly experimenting with its AI capabilities. However, I've run into a significant roadblock when it comes to integrating my team's comprehensive design library, and I'm hoping to get some clarity on the current limitations and what we might expect in the future.

Our Setup: A Highly-Structured Design System

To provide some context, we've invested a substantial amount of time and effort into building a robust and meticulously organized design system within Figma. This isn't just a collection of components; it's a fully-fledged system that includes:

  • Hundreds of Components: Our library is extensive, containing a wide array of components, from basic elements like buttons and inputs to more complex organisms like cards, sliders, and navigation controls.

  • Meticulous Naming Conventions: Every component, variant, and layer is named with a clear and consistent hierarchy (e.g., input/text/default, button/primary/large). This semantic naming is crucial for both our design and development workflow.

  • Comprehensive Variables (Design Tokens): We've fully embraced variables for managing our design tokens. This includes a rich set of variables for:

    • Colors (including light and dark modes)

    • Sizing (spacing, component dimensions, etc.)

    • Typography (font families, sizes, weights)

    • Corner Radii

    • And more...

  • Interconnected System: All of our components are built to reference these variables directly. This ensures consistency and allows for rapid, themeable design changes across our entire system.

The Challenge: Sparse Library Recognition in Figma Make

My expectation for Figma Make was that I could connect our library and leverage this entire, well-structured system to generate designs and, ultimately, code. The ideal workflow would be to paste a frame that is already designed and wired up with our library components and variables, and have Figma Make produce code that accurately reflects our established system, including our specific component and variable names.

However, when I connect our library to Figma Make, the import seems to be very sparse. It appears to only recognize a very small and seemingly random subset of our components and variables. The vast majority of our meticulously crafted library is not being utilized.

This limitation currently prevents us from using Figma Make in a way that aligns with our existing design system. The generated output doesn't reference our specific design tokens or component names, which would require a significant manual effort to refactor and align with our production codebase.

My Questions for the Figma Team and Community:

  1. Is this sparse import of large, variable-driven libraries a known limitation of the current version of Figma Make?

  2. How does Figma Make currently "scan" or "translate" a connected library? Is there a specific way we need to structure our components or variables to improve their recognition?

  3. Is there a plan to enhance Figma Make's ability to fully ingest and utilize a connected design library, including all components, variants, and, crucially, the full spectrum of variables (design tokens)?

  4. Ultimately, the goal is to have the AI generate code that uses our established variable names (e.g., --color-primary-500 instead of a raw hex code). Is this type of deep design token integration on the roadmap for Figma Make?

  5. Has anyone in the community with a similarly complex library found any workarounds or best practices to improve the fidelity of the library import into Figma Make?

We're deeply invested in the Figma ecosystem and believe that a powerful integration between our design systems and Figma Make could revolutionize our workflow. Any insights or information on the future direction of this feature would be greatly appreciated.

Thanks everyone!!

Matt

Hey Petey.

We’ve run into the same limitations you mention. I too believe that Figma Make could revolutionize the product design and development process. Our ideal scenario is where designers leverage Figma Make to generate views and working prototypes which are aligned to our existing design system (via the Figma library context) and uses our organization’s existing component library.

The current shadCN/Tailwinds tooling will never be something which could be handed over to our developers. If Figma Make were properly integrated with our existing component library in GitHub then I think we have something powerful.

Currently, it feels like dead-end experimentation which can be useful but not nearly as useful if they evolved this tool a few more steps. We are already finding ourselves using Claude Code, Copilot and other tools from the dev side of the house to generate high fidelity and accurate prototypes. It is much less designer friendly but it works way better than Figma Make does today.

Kevin


Reply