Ask the Community

Interactive components not working. How to fix it?

I’ve been setting up a design system for me as a designer, but ultimately I would like to give developers proper insight into the way I have set up my design system. What I like about Figma’s Dev Mode, is that it allows to dive deeper into the variations of components, for example. What I miss, or what I didn’t discover yet, is that developers should be able to inspect the intricacies of component properties. Here is an actual example: A button, which has 3 states, but also a prefix icon and a suffix icon. This button, with states and optional icons, is available in three hierarchical levels: primary (dominant styling), secondary (less dominant styling) and tertiary (subtle styling). The Playground is a nice way to discover all of the available variations of a component (including boolean/enum properties). But you can’t really inspect what is going on. I would like developers to be able to easily discover metrics and style properties of any of the variations. Question 1: how can I a

Recently, I used ‘Make Design’ as part of the AI beta, but it’s gone from the menu. Are others experiencing the same issue?

Hi, so basically I want to try making a “dress up generator game” where you can change clothes/hairstyle/pants/etc The reference I had in my mind is something like, theres an avatar at the top and the outfit options on the bottom. there will be 2 or more sections for “hair, clothes, pants” section where in each section, there will be a multiple option for hairstyle, variations of clothes I have tried using components for only ONE section where you can click option hair 1 / hair 2 / hair 3 and it went well. But I was wondering how do I save this option state (lets say I choose hair 2) and now I want to move/click the other section example pants, which obviously I want the “hair 2” still there without getting resetted when I’m choosing the Pants section. Is there anyone can help or have a tips on this? Thankyou so much

I am a developer, and we’re trying to figure out if Figma is something we want to use in the company I’m hired in. The designers started using this recently, and made the button states as variants, which i guess is how it’s done in Figma, so it has a variant for hover, focus etc. But it could’ve been any component with different variants, doesn’t matter. I am wondering if there’s really not an easy way to see the difference between two variants, preferably while in dev mode? Here i would think i could click, and somehow compare them. Going into the playground i can swap and visually see the difference, but only visually… Going to the main component, i can try to figure out the difference, but it doesn’t seem “safe” and it’s also just very time consuming and annoying having to leave the main page of the design 300 times, when trying to design an entire page. Is there really no easy way when on the “main” page of a design in dev mode, where you click on something, to tell that it has di

"Hello Figma community, I wanted to share my concerns about the use of AI in Figma. I’m disheartened by the idea that AI will be utilizing my content, as it’s essentially my creative work and I’m uncomfortable with the notion that it might be used by others without my permission. Furthermore, I worry that AI integration could lead to job losses for many designers, as their tasks and responsibilities might be automated. Have you considered the potential impact of AI on our industry? I’d love to hear your thoughts on this topic.”

Hi there, I’ve watched this helpful tutorial https://www.youtube.com/watch?v=DuJL8t4myms (building a dropdown with variables) and there are many more like this one, but none of the ones I’ve found take into account the fact that the dropdown, not being in overlay, when inserted into a page with other inputs tends to push the next element below. If you use the absolute positioning function or set the height of the instances for just the touch are, the dropdown instead will appear behind the next element as there is no control of the z-index. Does anyone know a solution for this case? Thank you

How can I quickly access the ‘Edit Object’ tool for vectors in the new Figma update?

I’ve had a bad experience these days with variables. I imported components from another design system, and all the work I had done was compromised by phantom variables. I used all possible plugins, but after several attempts, those variables were still there. Now I have doubts. I redid everything from scratch, and I would say everything is perfect, but with the new functionality of iOS and Material UI kits, a doubt haunts me. I don’t want their variable change mode, so I’m running tests with various plugins to disconnect everything. The problem is with the frames. I think it’s all inconvenient. Is there a way to avoid all this? Thanks.

Hi, I created some blog cards and wanted to use autolayout to make it so the text moves down accordingly when the title breaks into two lines or more. But there doesn’t seem to be a way to make that happen only through the text- I need to manually resize the frame around the title for the autolayout to detect it. Is there a workaround for this?

I recently learned about the Figma AI feature and am incredibly excited about its potential. As a long-time user of Figma, I have always appreciated the innovative tools you provide for designers and creative professionals. The release of Figma AI is particularly exciting to me, as I believe it can significantly enhance the efficiency of design workflows and expand the diversity of creative expression. I have applied for access to the Figma AI feature for both of my accounts several days ago, but I have yet to receive a response or access. I am very eager to experience the Figma AI feature firsthand, as its powerful capabilities in intelligent design suggestions, automatic layout adjustments, image recognition, and generation can greatly benefit my current work. I am confident that by using Figma AI, I can not only improve my efficiency but also explore unprecedented design possibilities. I kindly request an update on the status of my application and the opportunity to test the Figma A

I’m trying to create an app that shows artworks. One page shows many pics. When you click a pic, it navigates to another screen with a larger copy of that pic and other info. Is there a way to have each pic open the screen with the big pic without having to create a new big pic screen for each artwork? I was looking up variants and overlays, but neither seemed like what I’m looking for. Thanks for your advice!

One of our clients is saying that she has trouble finding Figma prototypes that she has viewed before. Over time, her links get lost in the pile of emails or kanban-board cards, so she can’t go back and view the prototypes. Is there a way that she can do a search in Figma for past prototypes she has viewed? A few of them come up in her “Recently Viewed” section, but not many. (She’s using the browser version, not the app. And she hasn’t necessarily received invitations to all of these prototypes - many are just sharable links that she viewed.)

I often have a problem that has been going on for about two months. When I want to change one color to another in a group with many multicolored objects, all the colors change to the same color when I click with the eyedropper. Does anyone know how to solve this problem?

Hello! Product Manager / rookie Product Designer here and I need some help. (I am much more visual than technical overall). I am working on a large new white-label SaaS app that will allow clients to completely change the colors of our app by mapping their branding colors to our established style sheet. I have a few spots in my design where I have an element in a “light grey” color style on top of a background layer using one of our “background” color styles. I found that depending on the background color the client uses the greys elements can almost disappear if I use the standard “Pass Through” blend mode. I switched them to the new “Plus Darker” blend mode and love the results. The elements have looked good with almost any color combination. I have a few other elements that use “Multiply” and also love the way those elements look in Figma. My problem however has been getting my nearshore Android dev team to actually implement the layer blend modes in app. I found some Android docume

I cannot figure out where to go to manage users. I found where to see them, but there are no options to add or remove users. WTF???

I often use CMD+K in Slack/Spotify to open search. And for sure CMD+Space in OSX finder. I know Figma has CMD+/ to search the local file. What if that index was broadened to all files? Ex: I want to quickly open a command panel and type the name of the file. On enter, open. If it’s currently open, change tabs. If it’s not open, open in new tab.

I just updated Figma to the new UI3 but I can’t find how to connect an element to one of the Boolean variables that I created. With UI2, this used to be in the Layer section in the Design panel on the right side of the canvas but now that section is gone. Does anybody know how to find the link variable icon. Maybe they changed it but I can’t seem to find it anywhere.

The scale does not work correctly in the desktop application. Everything is covered with soap and 100% looks like 110%. In the WEB version there is no problem! Windows 10. This may be due to the scaling of the interface. But I no longer find the 100% zoom option for the interface. And the abbreviated command Ctrl+ALT+0 does not work. Solved the problem: ctrl + shift + alt + +/- - scale inteface

I’ve paid for a Pro plan, I see my credit card charged me but I still “free” near the file name. Haven’t received an email confirmation

This is the code I am using to convert the image URL const imageData = await fetch(data.coverURL); const imageArrayBuffer = await imageData.arrayBuffer(); const imageUint8Array = new Uint8Array(imageArrayBuffer); // Create a new image in the Figma document const imageHash = figma.createImage(imageUint8Array).hash; console.log('Image hash:', imageHash); and here is the URL https://is1-ssl.mzstatic.com/image/thumb/Publication6/v4/60/29/a3/6029a31a-bf59-43fb-3a29-23ff12d8631d/Cover_BellsBigMove.jpg/800x800bb.jpg Getting this error VM4198:6 Refused to connect to 'https://cors-anywhere.herokuapp.com/https://is1-ssl.mzstatic.com/image/thum…/6d6c0fd5-0d8b-df53-5a2c-1d349e0ed9b3/617513652833_cover.jpg/500x500bb.jpg' because it violates the following Content Security Policy directive: "default-src data: blob:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Why i still not got the update of Figma UI 3?

Hello. I followed several similar tutorials in order to create an interactive calendar. In the first frame I created 3 different “states” of an element - default state, state while hovering and state after clicking. I connected them in the “prototype section”. I clicked on the “play” button and it worked, it changed the background color after hovering or clicking. But then I moved to the second step - making it a component so I can easily create several elements with different numbers with the same function (changing the background after hovering/clicking) and making an interactive calendar out of it. I made the whole first frame a component. Then I made a second frame and I pasted the first box from the component (default state) several times and changed the number inside. The boxes were automatically connected to the second box in the first frame (but not to the third). When I clicked on a play button, it didn’t work, the numbers (1, 2 and 3) didn’t change their background after hove

Hi! I recently posted this suggestion for some improvements with compatibility on the iPad (Make the iPad compatible for editing & some ideas for improvement on the browser experience). In my suggestion I talked about shortcuts for cmd and shift keys. This would really make it easier to select things and so on, but for now I wonder if it is possible to use a physical macro keyboard with the iPad? It would really help to just have a few keys to bring with me instead of a whole keyboard, when i’m on the go. Does anyone have experience with this and have anyone tried it using the Figurative app? Thanks in advance, best regards, Milton, a UI/UX designer from Sweden 🙂

Hello, I have a scrollable element with several buttons, however in the prototype when these are pressed the button below them (fixed on the page in which the scrolling element has now covered) is being pressed instead… any tips?