Ask the Community

When copying a section, I want it to be copied downwards rather than sideways

So I have a component with a lot of nested hidden components within it. Is there a way to see the list of color tokens being used in the component all at once without having to expose those nested components in the master component?

When I use the new Position Sticky feature in Prototyping, the frame that sticks to the top always sits below the frames that scroll. This doesn’t make sense because the point of sticking a frame is so that it sits on top of all scrolling content. Do I have to re-order the layers somehow? Do I have to check an extra box to make the frame sit on top of all others? Thank you

Hi, i am not sure when this issue first started but here it goes. I have 2 variants, desktop (1440px) and mobile.(375px). Both of them are fixed width.When i put the desktop variant into an autolayout frame, the instance became Fill width. So when i change the instance variant to mobile, because it is now Fill, it stretched to the whole frame. Please see the video below for the issue.Hope to get a response! 

Hi everyone, I’ve noticed some changes in Figma’s UI recently (possibly after the latest update), and I wanted to check if others are experiencing the same: Dragging to Adjust Input Fields I used to be able to click and drag on fields like “X”, “Y”, “Blur”, etc., to increase or decrease their values interactively. Now, it seems that functionality is gone—I can only type values manually or use the arrow keys. Is this an intentional change, or a bug? Middle Mouse Scrolling Additionally, I can’t scroll the canvas using the middle mouse button anymore. It was a super handy feature for navigating around quickly. Has anyone else encountered these issues? Are there workarounds, or is this a confirmed change in Figma’s behavior? I’m using Desktop App on Windows if that helps. Thanks in advance!

Hi!Really hope someone can help me. I’m using Figma Simple Design System, specifically the component  Select Field under Inputs. Does anyone know how to add more items to the drop down list? I can’t seem to find any settings for amount of items and when I try to copy and paste an item it ends up outside the instance. There must be a way of doing this that I’m missing? Thankful for some help!Jonna

Hey everyone. I’m try to link the frame to another frame but my prototype is not working by not showing a plus sign in order to link to another frame

Hi. I’m new to Figma. I just turned an image into a vector using image tracer. The problem is that its one uniform color and I want to color separate parts differently. How do I do that?

Hi everyone!I’m working on website campaigns where I create multiple assets. In the mockups, CTA buttons and text are placed on top of the images, but for export, I need two versions:One with the CTA and text One without them for the final assetRight now, I’ve set up components for the text and buttons, so I can hide them in the main component. However, since we’re working with many different formats, manually toggling visibility for each export is still time-consuming.Is there a more efficient way to handle this in Figma? Ideally, a way to quickly switch between both versions across all formats before exporting?Would love to hear your suggestions—thanks in advance! 🙌

Hello! Please help. Figma does not start. When starting, an error message appears: “Failed to fetch font list. Your network settings may need updating.”

When I Align horizontal centers + Align vertical centers 2 shapes together it is not centered at all. Is there something I can do to solve it ? I just started on Figma so I could miss something in the settings…Thank you to take time to reply. Regards.

We're encountering a challenge with accessing the context menu (right-click or control-click options) in the browser version of Figma on a Mac.Specifics:The context menu appears correctly in the Figma desktop app. It also functions as expected in other web browsing scenarios. However, when using Figma in a browser (e.g., Chrome, Safari), the context menu fails to appear.Question:Is this the intended behavior for the Figma browser version?If not, are there any settings or adjustments we can make to enable the context menu in the browser?

The height and width of the components designed on Figma( obviously choosing the whole number from the options Figma itself gives us) is seen to be changed to decimal numbers without our intervention on it. For example - we design a text using the font weight as 16pixels and we come back to see it changed as 16.89. Not sure why this is happening. and this is not only for the text fields but for all the components designed.

I’m currently trying to architect an approach on the best way to set up and maintain libraries. Current Structure: A single file for styles: DS Styles A few designers Rest of the population are viewers Updates are made to the live DS Styles file Version History has milestones set for tacking What I think would work better is to leverage the recommended use of Version History (Figma’s Recommendations) but I’m concerned with a few items. If we make milestones and duplicate each of the milestones - we’ll have individual files, each with its own library. I see this becoming a lot to manage and confusing for users. Is there a better to separate out WIP & Live files for libraries or to have Versions of Libraries?

Just curious if figma plugin is able to execute a wasm file ? if so can anyone provide links ? Thanks

Basically trying to recreate iMessage’s text input field, where:the text box grows upward as the user inputs more text; the text itself stays center aligned vertically in the text box; the send button is anchored at the bottom while the text box grows.I’ve figured out the text box growing upwards, but can’t keep the text from also being bottom aligned when the send button is bottom-aligned.

Whenever I hover on Blog Menu, the directory turns from pink to blue. I can’t find the reason when each of the menus have the same prototype/instances and they don’t have any problem when it’s open in other menu pages. Can anyone help me? What I do is create variants for hover and the texts will get bold and underlined. Then add prototype hover > change to variant 2-6 for each buttonI then create an instance, put it on a page and make it pink with underline for the directory page. Here’s how it looks when open in another menu. It works fine and stay pink when hovering on other menus. when hovered:I doubled checked the menus and I seem to have trouble with the Blogs page too. The Blog turns pink when I hover on About.

I'm experiencing the strangest issue… If anyone can help!I usually work with .SVG images, but today, for the first time, I noticed that all SVGs suddenly have a black background appearing in the design. However, when I use Present or Preview mode, everything looks fine.But when I export the design as .PNG or .JPG, the black background appears. If I export it as .SVG, it looks normal.Could the issue be related to my laptop's GPU, the images themselves, or Figma? Where is the problem coming from?I've tried multiple solutions, but nothing seems to work. Does anyone have a fix for this? 🤔   4o

Hi everyone,I'm developing a Figma plugin that clones a bar chart component and updates each bar's label dynamically. However, I'm facing two main issues:"table index is out of bounds" error (WebAssembly crash) when modifying cloned instances. Font loading issues when setting .characters on text nodes inside each bar.How My Plugin WorksThe user selects a chart component (which contains multiple "Bar Elements"). The plugin clones the selected instance and adjusts bar heights. Each "Bar Element" contains a label text node inside a "Label Frame". I need to load the font before modifying the label text.  What I’ve Tried So FarChecked if nodes exist before modifying them. Ensured figma.loadFontAsync() runs before updating .characters. Wrapped barElement.clone() in try...catch to prevent crashes. Checked fontName before calling loadFontAsync(). Tried moving figma.loadFontAsync() outside the for loop to load it once before modifying text.Despite these fixes, I still get "table index is out of

Has anybody successfully used Figma to create animated PDFs? Could be with or without plugins. I’m specifically trying to just change a background gradient to create a shine effect that autoplays once or on loop, but any animation would be nice. Animations are generally possible in PDFs, but there’s not a lot of software to create them.

Background: In the design system I’m working on, I’m aiming for a seamless consistency between Figma and the Browser.Has anyone already created a table of CSS values for Noto Sans that aligns Figma designs with rendering in Microsoft browsers (like Edge)?I’m looking to match line heights and letter spacings as closely as possible and would greatly appreciate if I could see your mappings or get any tips on achieving consistent rendering. Already did it for <p> 16px, as you can see. Figma Element Figma Font-Size Figma Line-Height Figma Letter-Spacing CSS Font-Size CSS Line-Height CSS Letter-Spacing Body Text 16px Auto 0 16px 1.47rem 0.45px H1 ... ... ... ... ... ... H2 ... ... ... ... ... ...  

Hi all,I’m designing a FormControl utility which will be used to pass Nested components inside, like TextField, Password etc.The structure of the FormControl component in code has couple subcomponents, like FormControl.Label, FormControl.Helper, FormControl.Error. During codeconnect I explored a way to code connect subcomponents as figma.string and it worked fine but I faced a problem that FormControl.Helper was always visible in CodeConnect panel in a code snippet, even though Helper prop was false for the component in Figma.So I decided to have individual subccomponents in Figma like FormControl.Label, FormControl.Helper, FormControl.Error and pass them as nested components and do the code connect using figma.children. Everything works fine, but Figma component props panel looks a little bit clunky. So I’m wondering if there is a way to make figma.string works properly? Thanks!

Hello,I am new to Figma and have read that the Material Design Kit for Figma is designed to be used with the Material theme builder plugin.I have used the Material Theme builder to create a custom theme in my project file. Now, I would like to use the theme I just created with the Material Design kit. When I add the Material Design kit to my file via the assets tab, all its components have their own color theme instead of using the theme colors generated by my theme builder. How can I achieve this?

Hello!I am making plugin to export content from file.I use await node.exportAsync({ format: 'SVG_STRING' })to export, for example, RECTANGLE node as svg.I also need to get information about size and position of this image.I tried to use node.width, node.height, node.x, node.y, but it doesnt work correct. The reason is figma doesnt export node as is, it optimize svg and do not return the part of node, that is over frame edge.How can i get coords and dimensions of exported svg to be able to draw it in another system?Thanks!

Dear community, I'm creating a Figma PLUGIN solution that finds all component nodes and filter only those, whose color variable matches a user's input.  Usecase:Designer wants to find where is a specific color variable used within a library file. How it should work:User types in a plugin UI: “button/background/hover” Plugin search through all the component nodes. Plugin prints out all component nodes that have the typed variable in their color fills. Problem:Any component node I retrieve, there is no “boundVariable.fills” available to inspect, so that I cannot think of a proper way how to get to the fills variable. For a context: ComponentNode id: 1:10 (from the screenshot) is paired to a variable color Plugin returns at “if (selectedNode.boundVariables?.fills)” Codeasync function findComponentsUsingVariable(typedName: string) { try { // Ensure that all pages are loaded properly console.log("Loading pages..."); await figma.loadAllPagesAsync(); console.log