Ask the Community

I’ve seen some people create their icon sets as multiple components - this is nice, because your icons will actually be displayed in the assets browser. I’ve seen other people create their icon sets as a single component with variants - this is also nice, because you can create variants for size or color etc. Unfortunately, if you create your icons as a single component with variants, you can’t see what you’re choosing anymore - the icon type property is just text, which isn’t helpful for choosing an icon at all. A single component with variants definitely seems like the right approach - however, I am inclined to choose the multiple components approach, even though this is much less manageable and somewhat impractical when you want to make changes to icons across the board, just because the UI for selecting the icon type isn’t visual. I wish there was an option to make a property display as images rather than text. Or an option to make variants of

Hello, I recently got a new Macbook running Sequoia and installed Figma for desktop, but previously had set up my Figma account and all projects on a PC. I am not able to import any image files (png or jpg) into any of my project files. It says “Image Import failed” or Failed to convert. The only images I can import are screenshots taken in my Mac.  If I open the same projects in Figma online, I get the same error. BUT if I open the projects on my previous PC, then I can work in them no problem and can import images no problem without errors. Would love some help!! Many thanks, 

So basically I’ve got 418 different images(419 if you include the placeholder) that I want to have as variants of an icon component, and if possible using their file names as the variant names because they’re name numerically but there’s several gaps in the numbering so I can’t just batch rename the variants with incremental numbering.I am relatively new to figma as a whole though I’ve got a lot of component related things down now,But something like this is so massive that I can’t reasonable paste them all in manually and I can’t figure out a good way to do it efficiently 

Hello, This my simple workflow I create a frame with autolayout and a text I set it as a component I duplicate the component I select both components and apply “Combine as variants” I add “x” at the end of my text : the x appears on my two components Now I create a new Variant from my component. This new variant is in the same set as the others Now I remove the x from my first component x is removed from my first and second component BUT not on the last one Link to the video I must miss something but I don’t understand … Thank you for your help

I have a personal application in which I want to create a integration feature. Best description of the feature would be that it allows me to connect to my Figma account, with a long-term API key. Then, whenever I interact (for example click on some buttons), I can call Figma’s API without logining to get the access token.Is there any way to get an access token that lasts long, maybe months, years, or better be forever?

Hi folks,I've been using Figma for ~10 years happily on the free tier, and I recently tried to transfer ownership of some files from one email to another.I transferred ownership of ALL MY FILES from the past 10 years from <emailA> to <emailB> I logged in as <emailB> and logged out of <emailA> to make sure I was admin / could access everything I then deactivated my <emailA> account (which had no admin permissions anymore), so I could stop having to log into bothAll of my files are now gone.I tried signing back in as <emailA>, but the account deletion worked (hooray) - I went through the new user signup flow, and there's simply nothing there.I have filed a support ticket (

How do I import CSS to my UI.HTML file? I’ve been trying forever but unfortunately with no luck. ui.css is linked in my project folder, not under any folders. Here’s what I currently have in my ui.html file: <link rel="stylesheet" href="ui.css"> Any help is appreciated. Thank you so much!! <3 When I try the same code in the browser, it links and the elements change but, when I open my Figma Plugin’s UI window, there’s no luck.

Hi there I was wondering if it will be possible to export and import variables in the near future or is this a feature for plugins? Thanks, Jaclyn

I’m working with developpers and they need to be able to consulte our variable library to integrate our design system (espacially the colors). Does anyone know if, when you are a viewer it is possible to consulte them ?

Hi All! I am completely new to Figma and I designed a website homepage that has 49 different variants based on mouse hover interactions. I got everything up a runnign however I cannot find a clear answer on how I get the Figma deisgn to an actual website. I’ve tried the following plugins: Figma to Wix, Zeplin, Anima, TeleportHQ, Figma to HTML and CSSSiter.io Perhaps I’m not using to right keywords to try to answer this but in short, I want to get my design and interactions (the component and all 49 variants) onto the site.

How is it possible that ALL plugins available to export variables into CSS convert the name of the variables to lowercase? You can set variables in Figma to be uppercase and when you inspect, the CSS will show the variable in uppercase: color: var(–Patch-Reef-Blue); But all the variables export plugins will convert this to color: var(–patch-reef-blue); therefore the need to manually rename… Is this me or Figma? Thanks!

I designed my app for iPhone 16 Pro Max.Now I want to use Prototype to scale everything down to see how it looks on smaller devices.So I select iPhone 13 Mini in Prototype Settings.I get an enlarged iPhone 13 Mini. It is iPhone 13 Mini form factor, but on my screen it takes up the same area as the iPhone 16 Pro Max. It is currently set to Responsive.Now I go to this page, everything is messed up on Preview only. On the design itself it is ok. Here is how it looks like on Preview:Here is what it looks like on Fixed:And there are similar issues throughout the rest of the app.Before I preview on iPhone 13 Mini, there are no issues previewing on iPhone 16 Pro MaxWh

PPT file import feature into Figma.  How do you preserve the fonts from your PPT source file after importing into Figma? I tried it and all fonts and its formatting fell apart.Is there are a way to preserve fonts when importing? 

Hello Community. I've been given a task to make some modifications to a dropdown menu, but I'm confused. I'm hoping somoene can please give me some more insight about the following changes I need to make. I tried to understand What the programmer is asking for me to make these changes. I follow his instructions on A) states 1, 3 ,5 to replace states 2, 4, 6.  So on column A is following as he has instructed. Now on B, he says, state 4 should be copied on state 2 and 6 And make 6 more brighter.   Have I understood correctly? Is column B as it should appear according to his instructions? Thank you.

Hello Figma Community. I’m fairly new with Figma, and also with web interaction concepts, because I’m coming from the world of print design. I have a question related how this particular concept works with a 6 state button function. I’m confused why it’s set up the way it is, with the hover states being on 5 & 6, and not on states 3 & 4. One would think, the button by default is OFF, and when the mouse hovers over the button it would HOVER, then when pressed it would make some change of colour (button Background or text colour Change).  I have been assigned a task in my group, and this is the layout of the buttons, Can someone please explain how this works, and what would be a good example, by making a mock up I could possibly follow the layout.     Thank you. 

What is the difference ? Why it exists when there is native fetch?In both fetch, the request is performed in the user machine (the desktop Figma app where a plugin is running ) or it’s proxied to an internal Figma server ?In case it’s proxied , is there a list of known Figma IP address to use as whitelist? Context: plugin development

I am using supabase auth for users in my figma plugin, and it requires me to store supabase_url and anon_key. These are sensitive variables that should not go public. Storing them in ui.html is not recommended as it is easily inspectable. So I researched about different approaches. One way I found is by storing them main thread (code.ts) which can communicate to ui.html via post messages. Although I am not sure that this is the perfect way to conceal your sensitive variables. I need help of developers building on plugin to give some insights. Thanks!

We have the “Select Matching Layers” tool, which will selected matching elements across different Artboard/Frames… but is it possible to do a similar thing for elements on the same page? It seems like it’d be a great feature if you had (for example) a grid of ‘product cards’ for an eCommerce website design. All of them are going to be made up of the same bits. So selecting the image or text of one of the cards, then being able to select all of the matching elements within the parent frame/group to edit would be neat. Then you could edit without needing to go through and click on every single instance - of course I’m talking about stuff that isn’t a component here. Is there a way to do this now and I’m just missing something - or is it a good feature request? Thanks in advance!

I created typographic styles for headings and paragraph text and applied them throughout my design. When I change them, some of the text styles are changing from “Ag” to “T”. The text styles that have “T” in front of them are not propagating into designs. This is unbelievably frustrating, especially because it seems like it’s randomly applied to some styles and not others. How do I fix this?

Hi, I’ve searched everywhere, but cannot seem to find out how to make the Resizing Panel show up on the right hand side. It’s just not an option that I can seem to access. Is there a certain shortcut I need to hit to access this like there is with Auto Layout?

Hello.I have a lot of icons with different names and spaces in them. I need to remove the "Pixel/Solid/" in the name, leaving only the final name of the icon, and also remove the spaces where they are present.I read the information about renaming, and there was an option with variables, but after trying it, nothing worked for me.  

We have december now, and i still cant acces the first draft feature, is this normal? I have the newest beta an ui, but its still not there?

Is there any use fo this tiny circle present in Linear Gradient? 

I keep receiving the following error message when attempting to run plugins: “An error occurred while loading the plugin environment.” I’ve cleared my app cache, restarted, and uninstalled plugins all to no success. When I open the console, it seems to stop at this point:

Hello. I am putting the finishing touches on my prototype but one thing is bugging me. The entire screen, including the status bar is pushed out when a new screen comes in. This obviously doesn’t happen on real phones but I can’t figure out how to do it.I tried choosing “animate matching layers” but when I do that, the screen that is sliding in has objects that don’t slide properly or stay visible when they should have disappeared, like some weird layer-stuff going on. I am sure this is simple to do but I can’t figure it out and it’s driving me crazy! I would greatly appreciate anyone sharing their process for making the screen move in/out from side to side (not scrolling) while the top status bar stays put.