Figma launched Make Kits and Make Attachments, two features that ground its AI design tool, Figma Make, in real design system components and reference data. Instead of generating generic layouts, Make can now pull from a team's actual component library, code packages, and uploaded documents like brand guidelines or legal copy. The features are available on paid plans starting April 2, 2026.

What Happened

Make Kits let design system authors package their components into reusable kits that teach Figma Make exactly how to use them. When a designer prompts Make to generate a layout, it references the kit's components, spacing rules, and patterns rather than inventing its own. Kits can also pull in code components through npm packages from public or private registries, bridging the gap between design tokens and production code.

Make Attachments expand what Make can reference during generation. Designers can attach PDFs, markdown files, CSV data, JSON, screenshots, SVGs, and images directly to their prompts. This means a product brief, a spreadsheet of real content, or a set of brand guideline pages can all inform what Make produces.

Why It Matters

The core problem with AI design generation has been consistency. Tools produce visually plausible layouts that don't match the team's actual design system, forcing designers to rebuild everything from scratch. Make Kits directly address this by turning the design system itself into the instruction set for AI generation.

The npm integration is particularly significant for teams practicing design-to-code workflows. When Make knows about both the Figma design components and their coded counterparts, generated designs are closer to what engineers will actually ship.

Attachments solve a different but equally important problem: context. AI that can read the actual product brief, reference real copy, and see the brand guidelines produces output that needs less correction.

Key Details

  • Make Kits: Reusable packages created by design system authors. Include components, usage rules, and optionally linked npm code packages.
  • Make Attachments: Support for PDFs, markdown, CSV, JSON, screenshots, brand guidelines, legal copy, images, and SVGs as generation context.
  • Availability: Paid Figma plans. Rolling out from late March, with full availability announced April 2.
  • Private Registries: Teams using private npm registries can connect those packages to Kits, keeping proprietary code components accessible to Make without exposing them publicly.

What to Do Next

If you maintain a design system in Figma, start by creating a Make Kit for your most-used components. Test whether Make's output aligns with your system's patterns. For teams already using code components, linking your npm packages to the Kit will give you the tightest loop between design generation and production code.