Build With More Context and More Control in Figma Make | Figma Blog (opens in new tab)

Figma’s Make kits and Make attachments add structured context to AI-generated prototypes, helping them start closer to production reality. Make kits provide design-system guidance through code packages, libraries, styles, and tokens, while attachments bring in project-specific data and requirements. Together, they reduce cleanup and make generated designs more consistent with how products are actually built.

Make Kits Teach Make About the Design System

• Make kits are reusable packages that combine components or styles with guidelines explaining how they should be used.
• They can use:
  • JavaScript components from public npm packages
  • Packages from Figma’s secure private registry
  • Styles and design tokens from Figma libraries
• Guidelines tell Make not only which components exist, but also how to apply them.
• Instead of starting with generic UI and repeatedly correcting spacing, patterns, and components, Make can begin with production-aligned structures.
• This helps:
  • Maintain consistency across forms, dashboards, settings, and onboarding
  • Let teams generate work in parallel without drifting from the design system
  • Reduce preparation and correction before review
• Engineers can more easily recognize familiar components and focus on evaluating the proposal rather than translating it into their system.
• Figma plans to expand kits to represent more design-system structure, including component structures from Figma libraries.

Make Attachments Ground Prototypes in Project Context

• Design systems do not capture every project-specific constraint, such as:
  • Real data
  • Migration requirements
  • Edge cases
  • Compliance rules
  • Legal copy and content
• Make attachments allow users to provide source material directly instead of describing everything in a long prompt.
• Supported materials include:
  • PDFs and Markdown files
  • CSV and JSON datasets
  • Screenshots and images
  • Brand guidelines
  • Legal copy
  • Media and SVG files
  • Code and other project assets
• Attachments help Make create prototypes that reflect actual data, validation states, content, and requirements rather than producing an idealized version that omits complexity.
• For example, an onboarding flow can be grounded in real user data, complete legal requirements, and multiple validation states instead of shortened copy and simplified edge cases.

A More Production-Aligned Starting Point

• Make kits provide the reusable design and code foundation.
• Attachments add the details and constraints unique to a specific project.
• The combination is intended to shorten the distance between an AI-generated prototype and a shippable product, allowing teams to spend less time rewriting and more time refining the experience.