Ask the Community

Hello everyone. I'm having a recurring problem with certain types of components. I'm making a parent card component with a background image and content that becomes opaque on hover. In my instances, when I change the image, the hover image automatically returns to that of the parent component... I've since found an alternative using ratio components that allow you to load images and keep them on hover. But I find this method a bit cumbersome and probably obsolete. I was just wondering if a more recent solution was possible? Thanks for your help!

When I press the Alt + R shortcut key in Figma, instead of adjusting or showing the anchor point, my PC displays FPS and other performance details. It seems like the shortcut is triggering a system-level command instead of a Figma function.Can anyone help me figure out how to fix or disable this so I can use the shortcut properly in Figma?  

The icons we used to use looked great in Figma and, when exported as svgs and then placed in the browser for inspection, their paths looked good and the quality of icon was also good (not blurry). Like so:The new icons we use (we have no idea who updated them, etc.) look great in Figma but when exported as svgs and then placed in the browser for inspection, their paths looked odd and their quality wasn’t good either (they were blurry). Like so: This is the setup of the icon in Figma in our DS: I’d greatly appreciate your help. It’s bugging me this bug so much… How can this be fixed? Please help

I have received created using figma Ai, design I want to tweak few things, but it has only two views “preview and code”My question is can I edit the file design wise? or it can be modified through Ai cammands only?

Dear support Figma team.I have noticed that my draft file is missing. I know the name of the file and remember even the names of some pages inside, but I couldn’t find it at all. I have only one account and I have checked deleted files. It is not appearing anywhere. I definitely created in my drafts, and it has no teammates to delete it. Please help, how could I restore it or find it?

Has anyone figured out a good way for helping the LLM using the MCP server to bridge the gap between the visual info (say, the color of a Button in the design) and the relevant component's properties (say, the correct `variant` that yields that color button)?We don't have Code Connect hooked up yet, but I'm skeptical that this would solve this particular disconnect because our components all use design tokens under the covers and all we see in the code are different properties that drive those behaviors. The LLM can’t see that using “emphasis” as a `variant` value will yield a blue button, for example.Interrogating the LLM on what it knows about the selected component yields a bunch of styling details, css, etc. so it knows what color the button should be, in my example, and I've given it our component docs so it knows what the valid variants are, but it can't bridge the gap between the two because there aren't enough dots to connect.This WOULD be solved via the "Component info" panel,

I am the admin. I accidently made another user, the owner of the project. It does not allow me to make myself owner again? When I click my name in the project, I can only delete myself? There are no other options?  How do I make myself owner again?

Hi Figma Community,I wanted to share some techniques we’ve been using at our agency to keep design systems consistent, especially when working on large projects with multiple designers.1. Component Naming ConventionsWe create a clear naming hierarchy for components (e.g., Button / Primary / Default) to make them searchable and intuitive. This helps avoid duplicate components and speeds up the design handoff process.2. Variants for Reusable ComponentsUsing variants for buttons, inputs, and cards allows us to manage multiple states (hover, active, disabled) in a single component set. It reduces clutter and improves maintainability.3. Figma Styles for Colors & TypographyWe standardize text and color styles across the project. Any change at the style level updates all instances across files, keeping projects consistent and saving hours of manual updates.4. Collaborative Feedback LoopsWe use Figma comments and Slack integration to get real-time feedback. A short daily sync keeps the tea

I am in need of figuring out how to create  the desktop pages to be the parent, and the mobile pages as the child. So when I use the desktop pages to make my changes they automatically get updated in the mobile pages.Right now I am doing double work, and its time consuming. Any help greatly appreciated

Hi, I’m learning figma for school and one of the assignments was to create prototype of an app in figma. I used smart animate to create bouncy animations, and when viewed in the interactive prototype–it renders an black fill box. any help? or is this a problem on my end. dev mode 

Hello, How can I see to exactly which projects and files has access a User who has a "View Seat"? Is there a page? Or I have to check each project and each file? Thanks!

I have 2 icon libraries of different sized icons at 24x24px and 32x32px, Icons are named as such: 32/Right Arrow 24/Right Arrow etc.... These icons are in a frame titled Icons and published as a library.When I use these icons in a button with an Instance Swap property added for the icon, I can select from the Icon 24 folder or the Icon 32 folder:When selecting from the 24 folder, the resulting Icon is not 24x24px, it is resized to  ~ 32x32px. The original button was created using a 32x32px icon.Why does Figma not respect the icon size selected in the instance swap? I have tried creating the icons using the Icon Resizer plugin which uses auto layout and  manually with a frame and no auto layout. I have tried various settings in the auto layout options - fixed width (set to 24x24) and hug contents, nothing results in the selected 24x24 icon staying at 24x24. Should I have created icons with variants for the two sizes 32x32 and 24x24? Must I make two separate buttons one using a 24x24 ico

Is it possible to adjust the position of multiple overlays at once? I have a nav component with a dropdown set as an overlay which appears on each page. Everytime I edit this component (font size or link change) i have to go through every page and manually adjust the dropdown overlay to reposition it back to the horizontal center. Command + Alt + A doesnt work. Anyone know of a workaround?

If we have a design system, do we also create design local component page in our product files? For example, if we have different row data across multiple tables in our product, do we need to create those row tables as components on our own product pages?

Hi everyone, I’m trying to figure out how to download .fig files using the Figma API, similar to how the Magicul app does it. I found that Figma’s API doesn’t allow direct downloading of .fig files, and the .fig format seems to be mainly for manual backups. 

We were working with someone at Figma to get full access for our teachers and students, but she is no longer getting back to us so we can't move on.  Does anyone have a contact to get this moving?  I tried the Support Center and the Chat, but I am getting nowhere.  I don’t want to start over.  We already had the Education Order Form completed and signed.

This is my code:const image = figma.getImageByHash(imageHash);    const bytes = await image.getBytesAsync();    const bytesArray = Array.from(bytes);    const fileName = `${folder}/${nodeName}_${imageHash}.png`;I tried to use blobs in ui part, exportAsync in plugin part and tried to find other ways but I couldn’t. What I need to do? 

Hello,I accidentally activated the Dev Mode in Figma Pro before the invoice was issued. Could you please help me cancel or revert this action?Thank you for your assistance.

I can’t for the life of me figure this one out. We have a card design with a BG image and some overlay graphics on top. The bottom level is a label and a text box with a BG. The text box should scale with the top level which is the image & have a minimum width at the same time if there is not enough text to fill the full width. However it seems like it is impossible to do without making it fill the entire top level?   

Let me explain what I need, and hopefully someone can tell me if it’s possible.I already have a fully coded and functional design system. What I want is to design in Figma using my existing design system components — but instead of Figma Make recreating all the components from scratch (which isn’t useful for my workflow), I’d like Figma Make to pull the actual code of these components directly from my existing sources (e.g., GitHub, Storybook, etc.).I can connect all the components using Code Connect UI but that don’t do anything for the Figma Make Is that possible?

I have searched for this answer in the forum, but haven’t been able to my situation represented yet - so here goes: I am a design manager who needs access to all projects in my company, but do not want the notifications for all projects. Currently I am unable to find, either within the Mac desktop app or the we app, where within a specific project there is an ability to turn off notifications (currently getting both a pile of emails, as well as Slack notifications in our generic Slack integration- not channel specific). Any help to turn off one project notifications would be greatly appreciated!

Hello,What I am trying to accomplish is when all the balloons are popped and down to the last, it automatically navigates to the next page. I’ve tried the following variables Action 1: On Click → Change to → popped variant Animation: Smart Animate, 150–250ms Action 2: After Delay → 200ms → Navigate to → Final Questions frame Easing: Dissolve or Smart Animate That’s it. No condition needed; you’ve already decided it’s the final balloon. If you must keep a variable/condition (e.g., only navigate when poppedCount == 8): Create a Number variable in a collection called AppState. On each balloon instance’s click: Set variable AppState.poppedCount = AppState.poppedCount + 1 Change to popped (put this after the Set variable) On the screen frame (not inside the balloon component), add: On Click (No—don’t do this) Use: After Delay → 1ms → Conditional → If AppState.poppedCount == 8 → Navigate to Final Questions Place this above any other g

Hello,I am needing help on getting the balloons to pop and go to the next page. I’ve used the following: Select the Component Set (the top-level that holds both “Default” and “Popped”). Look in the Prototype panel on the right. If there’s a “Delay → Next Frame” interaction here, delete it — it affects all variants. Now click the “Default” variant (inside the component set). Add only this interaction: Trigger: On Tap Action: Change to → Popped Animation: Smart Animate Then click the “Popped” variant. Add this interaction: Trigger: After delay (300 ms) Action: Navigate to → Next profile frame Animation: Slide left Now, each variant owns its own prototype logic.No more shared auto-trigger.

在AI为什么我没有AI功能？AI功能入口哪里啊

Download code buttonI spotted the "Download Code" option in the upper right corner of the editor, but I noticed that there is no "package.json" file. Is there any documentation or a way to run these projects locally using my own IDE?