Ask the Community

Is there a way to build a prototype where a user can press a button to change the colour mode of the page they’re currently on? Eg. to change dark mode to light mode. But without creating a duplicate of every single page 🙂

I have a line of four buttons with for each of them a normal state and a clicked state, I would like that when one of the four buttons is clicked the others cannot be. How to do it I am blocked ?  Thanks

First, so sorry to bring this up again. I know we have all struggled with this for a long time. Gleb seems to be the only master to have really nailed it!​@Gleb ,had this solved pretty well in a previous answer to someone. I have made it work in the past, but this time I am at my wits end!I tried a lot of different options. I tried making EVERYTHING hug. I tried the fix to fixed size without auto layout. It just is not working for me.I have a navbar component with a round “seal” logo displayed. However there are times where a different size or shape logo will have to be swapped there. I will not be the one controlling the logo, so vendors could throw in anything really.Here is the file that I have along with a video showing how I tried to do it. Figma is being weird about uploading the file so you can view and get my Figma file directly here.  I REALLY do not want to have someone detach the instances in order to customize that, but I am close to scrapping the whole thing.  I am exhaust

A font shows up in Figma under “installed by you” as a new font but nowhere in my finder or font book. So confused

Im doing an app with your regular footer with the diferent sections, in this case a map, a list of vehicles and a report, the idea is that when you click in either vehicles or report the footer expands upward untill it reaches the header.i have a component with the footer and the two sections of vehicles and report nested inside with height 0, then when either is pressed it expands like the picture below:I have the heigth set to hug for now but it should be a fixed value to cover the entire screenthe thing is that when i try in the prototipe the footer expands downward no matter what i change (i tried changing the constrains and the auto layout order) making it imposible to see the items.like this, the footer expands downward and out of frameanyone now how to fix this? i want the prototipe to have just one screen but working with components makes it a difficult task

I have a layout that has typical navigation on top, and on some of the pages, I will have a disclaimer that floats (sticky) at the bottom of the window. When the expand button is selected, the disclaimer should expand upwards and stop at the bottom of the header nav. Also, be able to scroll down to read the disclaimer. I’ve been trying all sorts of ways to do this to no good solution; I can do this pretty quickly, duping the layout and linking to the new layout with the disclaimer expanded and in position. I would like to do this in one layout if possible. See the attached Figma file and screenshot for what I’m trying to achieve. https://www.figma.com/file/hPeVw7S9VvTxRUIbvV9a8S/expanding-footer?type=design&node-id=1%3A27&mode=design&t=t3UWPakF5t8WXxQP-1

Hi Everyone,Hoping to get some help with component animation. I have two components. The first component has a bar in it that uses after delay and smart animation to change the color of the bar from green to yellow to red over 10s.The second component uses the first component and animates the first component across the screen, left to right, over 10s. Basically I’m trying to make it look like a timer that is counting down and changing colors the closer it gets to zero.However, when I drop the 2nd component into a frame and run the prototype the 2nd component animation runs first and the once it’s done moving left to right THEN the 1st component’s animation of changing the bar’s colors runs. Is there a way to get the animations for both components to run at the same time?I’ve added some screen shots to hopefully help visualize things. In the bottom right you can see the green bar moved across the screen, once that was done then it changed from green to yellow to red. Again I’d like that

Hello! I would like to know if there is a way to transform text to RTL using the Figma API. I would like to replicate the behavior of the button to change the direction of the text that Figma offers, but doing it from my plugin, and I currently can’t find a way. Thank you very much and greetings.

I am a Design Ops Lead. Our organization uses SCIM for provisioning. Currently, the process for adding new users is tagging me in a Jira ticket to grant permission to the user via the Figma admin panel. Until the user logs in, I cannot grant those permissions, so I send an email advising the user to log in via SSO. Let me know when they have logged in, and then I can grant permissions. This seems like a lot of steps. Is there a simpler way? SCIM, SSO, Admin, Members, Permissions

Hello, I spent some time trying to find a response in existing question but wasn’t able to. Here’s my problem: I have a text object that would show 593x89 (width and height) in the properties panel.  But, when I export the element to PNG, the file I get is smaller (cropped) 587x61 px The exported file is used to create HTML code to replicate the figma file, so when we set the asset to the same position that in the figma file (e.g. top: 219px, leftL 56px), it’ll look off position, because of the missing “padding”. Here is the exported “cropped” asset on top of the original image:  Is there a way to export the asset with a size matching the figma object, or to find out the “cropped” top and left pixels so it can be added to the top and left position? Thanks a lot in advance 

I faced a problem in Variables in @figma How can I turn LTR to RTL like this example from English to Arabic . Anyone solved or faced this problem?

Hi,I have a nice background color for my website. But I don't know how to recreate it in Figma. I have also asked the AI, e.g. ChatGPT, Copilot or Google Gemini. They can't replicate it either. Here is my CSS Code: radial-gradient(71.86%_100%_at_14.25%_0%,rgba(198,224,255,0.1)_0%,rgba(255,255,255,0)_100%),radial-gradient(100%_100%_at_50%_0%,#18181B_0%,#09090B_100%),#09090B

Hey everyone, Ive seen a few older posts about this issue. This post was back in 2023, but I also found out from 2024. I’m really confused about if this bug has persisted for anyone else? My PM is going through prototypes and certain random elements wiggle and he scrolls down the page. It’s very frustrating. I’ve checked my designs and prototype settings so many times.Just hoping for an update on this issue?

Hi! I’m creating a navigation bar. Watched a few tutorials. I have done the following:I chose 5 icons from Material Symbols. made the icons as components. created a nav item from one of the icon components. created a sub-variant of that nav item. added yes and no states to both the parent and sub-variants. changed the color of the sub-variant. create a navigation bar duplicated the icons and tried to change the states. I noticed that only the first icon is changing its state correctly. but the rest of the icons only the text is changing color but not the icon. Any idea what I did wrong? 

This is a really minor issue but frustrating nonetheless. When I go through my design I make sure that certain elements like a side navigation and a placeholder browser bar are in the correct position, and locked. Only to reopen my design later, run through the prototype and see each one has shifted by a few pixels in any direction. This has happened repeatedly, and I have to go back through each page and manually adjust the placement. Most people won’t notice the minor shift, but when you’re walking through a prototype and things are shifting it looks messy. Anyone else experience this? My Figma is up to date for reference. 

Hi,I have a project, to which access has been granted for an entire Team. Nonetheless, my colleagues within that team report not being able to access the project.The project permissions state that 8 users have access through the Team, even though the Team is larger than 8 users.What might prevent the remaining members of the Team from accessing the project, and how can I fix it?I’m also noticing as I browse the Team member list, that some users I can “Grant admin access” and others I can “Invite as admin” instead. Seems like those I can “Grant admin access” to are the ones who can access the project. I seem to be unable to figure out what the difference between these users is, and therefore, how I can get rid of this difference. 

I’m able to get an image with the image rest api (GET https://api.figma.com/v1/images/:key?ids=:node_id), but it doesn’t crop the result to the provided node id. Instead, it renders everything below the top layer the node is nested under.This is what I receive from the api.This is what I want from the api roughly. Is it possible to get the desired result from this api, or do I need to explore alternatives? The node ids I’m using are derived from the url after clicking on the node in the figma viewer (www.figma.com/design/{file_id}/{file_name}?node-id={node_id}).

When will the applications for the Figma affiliate program open again? I saw this program a few days ago, and it was accepting responses, but now it is not.

I’m having issues with my prototype, I would like that when the variant is open/expanded that it would re-centre. Can anyone advise how to present correctly? (check image captions) The frame within ‘new in town’ does not have auto-layout settings as the prototype requires scroll settings and cannot function in AL. When opened, the frame will only open within parent frame.Switched to Auto-layout settings, opens as intended but cannot re-centre :( 

I am having trouble with some elements/graphics not appearing on the prototype display window, as seen below on the screenshot. How do I have them appear on the prototype mode?

When I select two or more frames, and click the action button (command + k on MacOS), I don’t see the “create component set” option, and I end up having to go back to the previous UI to create my components interactive. Please fix this problem!

Hey guys! This is my first time posting on the Figma community, pleasure to meet you all! 😊 So my question is… If you’re designing a product for a web browser and you want to test it on a phone, how do you personally accommodate for the phones notch and the browser header and footer that would usually be on the page? When I load my design on a template or on my iPhone, the content goes behind the notch and I’m not sure of the most efficient way to design around this. Is it as simple as ading in fake browser headers and footers into every design? If so, would you submit designs to developers with these included in, or remove them at the end? Thanks in advance! Tom

I have shared the design system file and design file with the client, and now the client has to reattach each component manually, which is time-consuming. Is there any smart way to reattach all components easily?

The topic I am after was closed Absolute Positioning: Fill Horizontally. Starting a new thread in hopes something has changed. I have an input field component that I have a dropdown on, it’s placed with absolute position. The component needs to be responsive; the input itself resizes but the dropdown does not. The “fill container” option is removed from the dropdown when absolute positioning is applied to it. Image below.

Hi, I am struggling with the overlay feature, and the alternative option feels brutal.  I simply want the drop down of an input row to produce a modal. Some issues I’m having include: (1) height dimensions and managing a scrollable overlay and (2) using smart animate such that the dropdown modal appears from the bottom of the input bar rather than the top of the screen. Is this not possible? The alternative would be to create a frame hide it and switch between A LOT of variants. Has someone figured out how to manage overlays in a reasonable and dynamic manner? I’m not having much luck.