Make kit feature

Great question, ​@KrisLGX - thank you for asking, and totally understandable why you’d want to get clarification.

Out of curiosity, have you tried making a kit yet just to test out the experience? Make has evolved since it was first announced, but it’s still generally the same intent and goal of helping others get started more quickly without having to start from scratch. Having said that, I’ll address each of your points individually just to be a bit more succinct:

• Export an existing Figma library directly to Make.
  • You can do this with either NPM packages or with an existing Figma library by choosing the  Assemble your kit option after choosing to create a kit. The alternative is the Start from scratch option, where you prompt make to build components and assets itself.
• Make automatically converts the design system into React components and CSS.
  • There’s a bit of nuance here depending on which of the options you chose when first creating the kit. If you assemble it and import an existing library or NPM package, Make won’t need to do this unless you want to create additional components and assets for the kit. If you are starting from scratch, then it does create this as needed to create the kit. Regardless of which you choose, Make will use the contents of the kit to guide it in making components and CSS in other Make files.
• A Component Showcase is generated where you can browse all imported components and variants.
  • I’m glad you asked about this one - we’re still working on this at the moment. Stay tuned!
• You can open an individual component, view its generated code alongside a live preview, and use prompts to add interactivity (for example, changing the cursor on hover or creating animations). Prompts are scoped to the selected component
  • This works while editing a kit similar to how it works when working with Make in general. As an example, I started a kit and imported a library, and then asked Make to create an example component using the library styles. I then clicked the Edit button at the bottom of the chat window, selected a part of the design, then clicked the Go to source button to view the code for that part of the component. In the chat window, the element is shown as selected and I can prompt changes which would not only change the component but also update the kit.

Does what I’ve said make sense for you? Let me know if you want more information on any particular point!

Thanks ​@adamsmasher for the detailed explanation, that definitely clears up a few things.

I’ve tried creating a kit from scratch, as we currently can’t import our component package because we don’t meet the requirements for that workflow. Most of my confusion came from the Schema presentation, which made it seem like the workflow was primarily focused on importing an existing design system into a Make kit. The current experience feels a bit different, so I wasn’t sure whether those capabilities had been postponed, changed, or are still on the roadmap.

It's good to hear that the Component Showcase is still in development, and the explanation of component editing and the Go to source flow makes sense.

One thing I'm still curious about is the recommended workflow when starting a kit from scratch. I've found documentation and guidance around writing guidelines, but I haven't found much information about building and evolving components through prompting.

As a designer rather than a developer, I find it difficult to assess whether the generated kit structure and components are actually being used as intended. In my experience, the outcome doesn't always match my expectations. This makes me hesitant to invest significant time and credits into building a kit, because I'm not always confident that the resulting components and structure will be reused consistently in downstream projects.

For example, I created a small test kit that only included our Dialog component. The resulting kit structure looked like this:

src
└── app
    ├── App.tsx
    ├── Dialog
    │   ├── Dialog.tsx
    │   └── UploadFileDialog.tsx
    └── imports
        ├── Colours
        ├── Dialogs
        ├── index.tsx
        ├── svg-lxkvkzjsjj.ts
        ├── FontStyles
        └── Icons

When I attached this kit to a new Make project and prompted it to create a dialog, it followed the .md guidelines from the kit, but it didn't appear to reuse the existing Dialog component. Instead, it generated a new dialog implementation from scratch.

Is this the expected behavior, or is there something I'm missing about how kits and component reuse currently work? Are there any guidelines or recommended approaches for building, organizing, and evolving components within a kit to achieve more consistent results?