Ask the Community

I swear it was originally a thing that “open in playground” meant developers could change states of things and inspect those variant values.???My developers only get a turn-stuff-on-and-off toy.No inspect options.Are we missing something? Doing it wrong?How are developers supposed to get styling for variant states? 

example image, ill apply the technique to a private design​​​​im pretty new to figma and graphic design in general so, i wanted to know what kind of solution can make what i want with this, i want the black outline of the circle to “mask out” the square there, for solid backgrounds i just made it the same color but for gradients like this well, it looks like an out of place ringi experimented with masks but got nowhere, i know its basic but its getting frustrating, applying the same gradient to the outline in a seperate layer feels like patching it with some tape i want a more sophisticated solution if possible

Hey! This is my first time posting here, I’m learning Figma alone from this site, Youtube and Coursera and I got to Variables(still struggling with some parts but I’m learning) (Since I don’t know anyone who works with Figma this question might be stupid but I got no one to turn to) What I was wondering is how should I better approach a new project? Should I start with adding all the information in local Variables ( both primitives and semantics) or should I design my page first and then allocate the variables for them? Whatever video I’ve watched , in 3 months since I’ve been studying Figma I didn’t see any projects made from scratch. I’ve been doing little stuff, learning on sections, but I’d like to approach a full site with variables, prototyping, responsive layouts, carousels and w/e I’ve learned so far but my brain melts when I try to think of the full volume and I’d at least like to have a good approach..  

Hi, I’m new to Figma. I need help, please, on the following issue: when I draw some element (eg. square) on my frame in Figma, I point the cursor to a certain position on the frame, but when I click to draw the shape, the pointer moves / “jumps” to 5 mm away. This slows down the entire process and it’s very frustrating to work without precision, in a design software. Is there any way to correct this? I checked and I have the snap to grid active. Thanks

Hi everyone,I’ve been working on creating animated social media content using my Figma designs, but I’m running into a few challenges and would love some advice.First, I’m looking for a reliable tool to export and animate my Figma designs efficiently. I tried this template, which worked well, but I’m curious if anyone has other recommendations, especially for tools that integrate well with Figma.Second, I’m having trouble optimizing the animations for different platforms (like Instagram or TikTok). Does anyone have tips for maintaining quality while keeping file sizes manageable?Lastly, I’d love to hear how others handle syncing animations and transitions smoothly in their social media content. Are there any specific techniques or tools you’ve found particularly useful?Thanks in advance for your help! Looking forward to hearing your

I am trying to select the “change to” option when creating a hover function for a button within a component, however it is greyed out and won’t let me click it, preventing me from creating my calendar function. Does anyone have a solution to this? 

Ive been playing around with using variables + components. You can change Figma component variants using a string variable (which is great!) but everything is instant. There doesn’t seem to be a way to define any sort of transition between variants. This is also true for number, color and boolean variables. When a variable is set it’s always an instant change. Is there a way to achieve this?

----RESOLVED---In our library we have 3 colour libraries: primitives (color scales) semantic componentWe have linked our primitives to our semantic and in general the semantic ones to the components which works fine when testing light mode dark mode etc. Some instances we need to pull from the primitives into the component collection, but this just doesn’t seem to work. Any one know why? what might we have done wrong? 

Is there any way to change the state of a variable when the user scrolls past a certain point instead of adding a ‘mouse enter’ and ‘mouse leave’ interaction?

Does anyone know what happened to the WireGen plugin? It’s not listed among the plugins.

When copying (Ctrl+A, Ctrl+C) components that are wrapped in a Selection frame from one file to another, the variable settings and the arrangement of the components inside the inserted Selection frame get reset. Has anyone else encountered this? It used to work fine before, but after the update, it broke. I tried to illustrate this with screenshots.OriginalPaste 

Hi, I am trying to find a solution to export a Figma design to Bootstrap 5 CSS and HTML. I tried several plugins but none of them generate responsive HTML using Bootstrap 5 classes. Sample HTML that I would like to see: Plugins that I tried: Anima AutoHTML Builder.io Codia-AI Figma to code Dual

As a designer, I want to see where I used a specific color token in my design system project and have a preview when making color changes.

Hello. I dont have a computer, only tablet. Im also from not english-speaking country and that means that basic fonts are not usable in my language. I tried to find solution and way, how to set up fonts in web version from android, but couldnt. Do you know the way?

Hello everyone,I'm developing a Figma plugin with Create Figma Plugin toolkit that uses LemonSqueezy for license management, but I'm encountering persistent CORS issues. Despite implementing various solutions, I keep receiving errors like:Access to fetch at 'https://api.lemonsqueezy.com/v1/licenses/validate' from origin 'null' has been blocked by CORS policyProblem ContextMy plugin needs to validate licenses using the LemonSqueezy API. I've implemented a system where:The main thread (main.ts) sends API requests to the UI thread (ui.tsx) via figma.ui.postMessage() The UI thread performs the fetch requests and returns results to the main threadWhat I've Already TriedUsing a CORS proxy: I've attempted to use api-cors-anywhere.lemonsqueezy.com instead of api.lemonsqueezy.com, but still receive CORS errors. I

Hi Is there a way to reproduce this design without beaking the autolayout ? To fill with the grey rectangle I had to use a rectangle form but I need to break the autolayout.Thanks a lot :-) 

Hello everyone,I’m working on an M2 Mac, and all of my prototype files load fine in both web browsers and the desktop app. However, when I try to conduct user testing and the user does not have a Mac, the prototype won’t load (gets stuck with the bar about 99% full), so that we can’t continue the usability test.So far I’ve tried:Physical Pcs running Windows 10 and 11, and my virtual machine running Windows 11 Many browsers: Chrome, Safari, Edge, Arc - across both Mac and Windows (based on other community threads) - Getting rid of all smart animate, getting rid of components with more than 1 variant, getting rid of overlays My file memory is down to 2%, and even this prototype with just 2 screens and 1 text box won’t load: (

Hi I created a design file and copy pasted color variables from old file. But only variables won’t be published. I tried to recreate a new color variables but some works and some don’t?? Can anyone know what is going on and how to fix this? Thank you.

I'm just working my way into Figma.I downloaded a wireframing kit from the community and wanted to publish it as a shared library.When I click on “Publish”, the Figma window dims briefly, then the wireframe file is visible again, but nothing has been published. I have no access to the components from another file (the library is not displayed for selection). Identical with another wireframing kit.What could be the reason for this? If I create components myself and share them as a shared library, it works without any problems.Thanks for your support!

Hello Figma Community, I’m encountering an issue in my Figma project related to the behavior of clickable objects when they are covered by another component variant. I’m seeking assistance to understand and resolve this problem. Problem: I have a Figma file where I’ve created a component that changes to a different variant on interaction. However, when this variant covers part of another object that was clickable before, I notice that the covered object remains clickable even though it’s not visible anymore. Expected Behavior: I expect that when the new component variant covers an area, the objects underneath it should not remain clickable. The covered objects should be effectively hidden from interaction until they are visible again. Steps

Minha biblioteca de componentes fica solicitando para atualizar nos arquivos uma atualização não feita, ja conferi no componente pai se o erro estava em alguma camada mas não Sempre que publico ele adiciona um contorno que não existe no componente fonte, alguém sabe como resolver?

Hi, I’m new to Figma. I have opened a “.deck” file in my Figma Mac app. Now I want to install the “Pitchdeck Presentation Studio” plugin to the Mac app because I heard it enables export to other formats. Question 1: How can I install this plugin to the Mac app? Question 2: After having it installed, how to open and export the “.deck” file to other formats? Thank you all for your crowd wisdom!

Hi all, Need some help with the age old problem of Sofia Pro not showing the correct font weight when the Inspect panel is open. In this example, semibold has been applied but in the Inspect panel it shows as font-weight:400; for all weights.  It’s causing additional back and forth between developers when reviewing components while they are technically following the designs and the information in Figma… except it’s the wrong font weight :( I have seen some other threads that have been opened in the past but was wondering if someone had a newer solution to fix this.  Are my only options to solve this problem still: Ask developers to refer to the name ‘H6/D Semi Bold’ for the right font weight?  Edit the metadata? Thanks in advance!   

I know how to create a standard button in Figma where you use a stroke around the text to make it expandable, but I'm having trouble with a custom shape button. Specifically, I want to create a button using a custom shape (like an ellipse) that will resize based on the text length.I want the text and button to expand together, so the button adjusts automatically if the text changes or is longer. Is there a way to achieve this with Auto Layout, or is there a better approach for this kind of dynamic resizing with custom shapes?Any help would be greatly appreciated!Image 1 is my buttonImage 2 is what currently happens if the text is longer  than the button