Figma Make not using my library components

Hey ​@Daniel_Leinerud, thanks for reaching out! 

To use an existing design system in Figma Make, you'll need to ensure that your designs are properly set up in frames or as components. Here are the steps you can follow:
 

1. Ensure your design is in a frame or component: Designs you want to attach to Figma Make must be either a component or added to a frame. You can use the Frame tool to create a frame around your design if it's not already in one.
2. Attach your design: Once your design is in a frame, you can attach it to Figma Make. For your reference, I've included a screenshot of what that area would look like (bottom left corner of a Make file). If you encounter any issues, make sure to check that your design is correctly framed.

For more detailed guidance, you can refer to our best practices for attaching designs and images.
 
If you have any more questions or need further assistance, feel free to ask!
 

Daniel, I’m having the same problem. Even when I attach a design that is using the components it doesn’t work. 

Honestly so far it is fast to design than to use Figma Make and the code it generates is not what our design system using at all.

Hi ​@Gayani_S and team, is there a roadmap that includes the ability to replace and/or augment the initial shadcn component files? For instance, an ability to upload a ZIP of accurate component files that still use React, but aren’t shadcn.

Or is there a plan to allow for a more direct connection to design system code rather than the translation to shadcn components that currently happens when onboarding a library?

I am also having trouble with figma make using the ui library. I did a prototype before tht worked really well wiht no ui library attached, but now that I am using a library, it is using random elements. I am pasting a frame of my designs and everything uses auto-layout and components from Radix UI library

Hi ​Patrick, thanks for the feedback and apologies for the delayed reply! 

I’ll pass these requests onto our Figma Make team for future consideration, but there’s no exact timeline we can provide right now. 

Hi Daniela, thanks for reaching out! 

I completely understand how frustrating it must be that your library isn’t being properly reference by Figma Make. 

May I ask if this is happening with an entirely new Figma Make file? Or are you reiterating a new Figma Make from the previous Figma Make file you used to make the working prototype. I only ask, because it’s recommend to always start with a new, fresh Figma Make file. 

That said, to ensure you’re adding your Figma library correctly, be sure to:

1. Export your library from Figma Design
   This gives Figma Make access to your existing styles and components.

2. Select the library inside your Figma Make file
   Once you’ve linked the library, Figma Make will pull in the styling CSS automatically. From there, you can refine things further—edit the imported styles, or add design guidelines to fine-tune how those styles are used in your prototype.

More step-by-step information is available here: https://help.figma.com/hc/en-us/articles/33024539096471-Bring-style-context-from-a-Figma-Design-library-into-Figma-Make 

So I'm having the same issue, and I've imported my library into make.

Granted I didn't attach any designs (I wanted to see if it could quickly whip up a settings page from prompt), but even the buttons and switches didn't use the library components. It just created new ones that 'looked' like my components.

After copying the make design back into my project, I had to go through and replace each one generated with the actual component my library uses.

I have the same Issues. I started troubleshooting together with the Figma Make AI and here is the Issue Figma Make has (in its own words): 

 

If you explicitly connected the "MUP Design Library" when setting up this project, I should be able to see your:

• Component variants
• Design tokens/variables
• Color styles
• Typography styles
• Spacing systems

But I cannot see any of that library information. I can only see:

• The files you've created in this project (`/App.tsx`, `/styles/globals.css`, etc.)
• The code I generate
• Nothing about the connected MUP library

This Sounds Like a Gap in Figma Make

Could you investigate that? If you need further Information, let me know.
 

I am having the same issues, my library is connected and imported, but it’s not using my components. They are properly labeled etc. It can not find variants of my components either and even asks me to import them again. It started off by not using any of my components in the design and completely freestyling except for font and color.

When I import the entire design library into Figma Make, only the base Button component is being generated in the `/imports/` folder. The different component states (particularly Hover and Focus states) are not being exported. And can’t seem to be accessed by make. 

From my make:
“You’re right that I should have access to the design system! Let me look more carefully. Are there more files in the imports folder that aren’t visible, or is the hover state defined somewhere else?

Right now I only see /imports/Buttons.tsx, which seems to contain a single Button component. Could you import all the Button variants from Figma (including the hover state) so that I have access to them? Or are they already somewhere and I’ve just missed them?”
 

same issues as above - got a better overall result without using my library so there is no point in having the feature if it does not read the components either in the design linked or in the library linked

I’m also having the same issue. I created a fresh Figma Make file and made sure it was referencing my Design Library Figma file that I had imported over previously. It didn’t pull over any of the components from my library and just updated the general font/colors being used. None of the elements actually match those of the components in my design system, and after working with the AI model it’s asking me to just upload components one at a time, which also doesn’t work well because it only accepts links for component instances, not component sets. So I can’t point it to my Button component that has 108 different variants with different colors and states (hover, disabled, outlined vs filled vs text only, etc.).

Is there any update on this feature?

I am using Figma Make and selecting my Library which contains a Design System with Styles, Colours and Components. However Figma Make doesn’t seem to ingest any of this information and the code which is produced is a generic design system with components not from my Figma file. It doesn’t even pull my colour variables.

We're having the same problem. We can't get Figma Make to see our library at all, despite it being published.

I tried manually teaching it each component, but it won't accept frames with component sets or main components. I eventually tried pasting a documentation frame with instances and property descriptions into Figma Make. The model finally 'saw' something, but the output has major issues with styles and padding. It seems like documenting components within the Figma Make file itself is causing a lot of property errors

We’re having the same issues here. Doesn’t matter what I try, Make will not find or use my components or library. 

I haven’t gone as far to try to create a new component to test this (because that solution isn’t helpful), but Make is currently unusable and there is so much potential for it (at least for my team and business model).

Me again, for those of you who are having issues, I ended up just prompting the AI to update the native React components in the “Code” section it references to match my design system states and appearances. I had to do it manually for each component, so it’s definitely not an ideal solution for those of you with multiple brands and hundreds of components. I focused on getting key foundational components right (buttons, checkboxes, radios, input fields, selectors, etc.) and I’ve just been doing other ones one-by-one as I need them.

The way I got around the component set issue was by making a new frame and just selecting all of my component variants and ALT+Dragging them over into the new frame to turn them into instance sets. I then copied the link to that frame and uploaded it to Figma Make to reference for my prompt.

I then manually go in and adjust the React code (which isn’t too bad if you know very basic coding fundamentals) to clean up any discrepancies from how it interpreted my prompt and component instance sets to how they should be.

Again judge whether or not this process is worth it for your team and workflow.