Skip to main content

Ask the Community

Have a question? The community is here to help!

  • 10,000 Topics
  • 38,352 Replies
10000 Topics
Schumoore
SchumooreNew Member
asked in Ask the Community
Interactive text input field in prototype

I’m a UX/UI design student who is new to the field so please bare with me.I want to create an interactive text input field for my prototype. I have a made an input field component with default and active variants. When the component is clicked on it switches to the active variants. What I can’t figure out is how to make it go back to the default variant when the user clicks outside of the component. Most of the answers I have seen online direct me to check off ‘reset component state’ under the ‘state management section’. That is not an option for my interaction, the only option I see is ‘reset scroll position’. Interactions details shown in picture.Any help would be greatly appreciated, thanks!

900
Schumoore
Chris65
Chris65New Member
asked in Ask the Community
Video used in Figma article

I’m looking to create a video demonstrating how a feature in Figma works like the one below. I’ve watched YouTube videos on adding video to your prototype (e.g., as a background) or creating a video player with pause function. But how is Figma creating the short demos I see in the below examples?https://www.figma.com/design-handoff/https://cdn.sanity.io/files/599r6htc/regionalized/61cadd50e0960147a9dcbeaa9738a7cd5e380a8c.mp4Thank you 

70
Chris65
J
Jorge_Torres
asked in Ask the Community
Making a component appear after a time delay with variable

so, I don’t know what I’m doing wrong I’m unable to make this component appear after 1s delay with a boolean variable. If I set the variable in the interaction from false to true it does work, but it doesn’t the work the other way.

5302
IT13
Pugalendhi_Vanangamudi
Pugalendhi_Vanangamudi
asked in Ask the Community
How to get value from figma api and show the data in plugin ui?

Developed a plugin to review design file and highlight the correction on plugin. Currently I can able to get data from Figma but how to pass that data into plugin UI

2433
nikitapashinsky
Emily25
Emily25
asked in Ask the Community
Issue with .png transparent backgrounds

I’m having the same issue! Confirmed that the PNG has a transparent background, every time I import it (either through importing media or just dragging the file) it has a white background instead of transparent.

787424
Mp Am
Coreywindow
CoreywindowNew Member
asked in Ask the Community
I can't add an icon to a template i am trying to redesign

Hi, I am using a preset design and I am unable to change icons to ones that I would prefer. any help would be highly appreciated. For example, I want to add a boxing icon that is provided with the template but I am unable to swap out the skate boarding icon.  

160
Coreywindow
Yara_Farhat3
Yara_Farhat3New Member
asked in Ask the Community
Would swapping libraries in a branch merge correctly in the main file?

Hello, we got a libraries from another team and it’s imported in our company’s folder. The new libraries has new components and styles (dark mode) so I need to swap the old library with the new one. I created a new branch to avoid ruining the main file and I am planing on merging it when I finish the dark mode library swap and mockups. Any idea if this will work?

191
vishwakarmayojana
KennLucas
KennLucas
asked in Ask the Community
I want hug AND fill action on text + icon 🤷🏻‍♂️

I can’t upload this without recreateing a file. I’ll try to get to it...but maybe someone knows the answer without seeing my file?I made a component variant that has text and an trailing icon.I want to be able to type text and have it truncate and still have the icon showing.IF I use fill on the text, it works. I just jave to manually drag the width of the instance. IF I use hug on the text, it is pretty! I love it...but… IF I do the hug, then the text gets too long, the icon will push off the edge. 🤬I tried doing a max width on the text, but then if I hide the icon I get a gap.Totally confused here and I think this should be really simple. Anyone have an idea what I am doing wrong?  

570
KennLucas
E
eunike_christabelle
asked in Ask the Community
Stop automatic carousel

How to stop automatic carousel while hovering the frame?

6112
Jonak
Barony
BaronyNew Member
asked in Ask the Community
Help please

 So guys, I'm new to Figma and I need a little help. I really don't know how to explain this, but when I'm in the prototype view and I hide that part of the component, the component below doesn't follow the top, how can I sove this?

241
Sergio NC
Sergio NC
Sergio NCNew Member
asked in Ask the Community
HELP - I cannot delete all items on a list sharing the same boolean because they have different variable modes

Hi everyone, Figma newbie here, I am almost done with my grocery prototype, but I have an issue with the New List flow: You add items via a checklist overlay. Each item (#Oats, #Quinoa, and #Brown Rice) have their individual, respective modes (See Layers panel). Ticking items adds them to the shopping list via a boolean variable called #Added-to-list. If you uncheck an item, you will remove it from the list. The remaining items are “preset”, more on that later. There is a Cancel button. It will set #list-total-price and #list-count to 0, and both booleans #Added-to-list and #Is_visible to False. Regarding the remaining items, those belong to a preset list belonging to an Import List flow. However, I want these items to show in the list and affect its price, etc. Their boolean is the aforementioned #Is_visible. Here I used a different variable format here: all items are on the same column, without modes. As you can see, if I return to New List after importing the preset list, those item

160
Sergio NC
Sabarish Nagaraj
Sabarish NagarajNew Member
asked in Ask the Community
decimal calculations.

in figma alignment, layout and position are all calculated in decimals how to convert in whole numbers

50
Sabarish Nagaraj
Todd813479
Todd813479New Member
asked in Ask the Community
How to align two lists of text, each with it's own text box across from each other?

Hello. I cannot find the answer to this and I am very sorry if this is a dumb question, but how would I best align two columns of text across from each other, the left aligned left and the right aligned right as in the example (not my work). The only solution I can think is to distribute the spacing on the left and drag rulers down for each row and align them that way but there should be a better way. Selecting all and trying to distribute or tidy doesn’t work. I will be doing this a lot and would love to know the proper way to accomplish this. Thanks to anyone who replies.  

40
Todd813479
Stephen_Moy1
Stephen_Moy1New Member
asked in Ask the Community
Show/hide relevant content in a Frame when hovering over items in entirely separate Frame

What I want to achieve The UI I have essentially has two separate sections alongside each other. A “stage” on the left of the screen which is in fixed position, 100% height, 50% width of window. And a scrolling feed of content to the right of that, about 10 items. The effect I want to create is when I hover over a card on the right, the larger “stage” is filled with relevant content (image/video mostly) of the item that has been interacted with. I want the appearance to be elegant so it fades in - but I can’t find a way to do this as they are not related / separated items. Possible options… I have tried a few things but I want to see if there is a better solution. Overlays: I can’t use overlays as I have a fixed header and the overlay overlaps this. Variables / Conditionals: I tried setting true/false and used and if/else condition to show and hide different frames but it doesn’t appear like there’s away to fade this. It just displays or hides instantly? Multiple Artboards: Have 10

6913
khompitoon5
dynamicarts
dynamicartsNew Member
asked in Ask the Community
How do you create an expanding button?

I’m trying to create a button which when you hover on it increases it’s size, but when doing so the alignment of it in the UI gets mismatched. Is there any way to change the position of an icon when you hover on it, so that when you hover it stays center aligned in your navigation bar? (I have tried searching for this, but no luck on forums. Please mind any issues with my post, this is my first one.)

371
dynamicarts
Trevor_Howard
Trevor_Howard
asked in Ask the Community
Is there a legend for layer icons?

Is there a legend for layer icons. Sometimes I run across one where I’m not sure what it means.

22284
Joe_Lakey
Guido3
Guido3
asked in Ask the Community
Need help with weird hover issue

I made a batch of button-like components for use in my project. At first all hover animations went smooth, just as I wanted. Further in the design phase I changed some background colors and I noticed my hovers were messed up, all except for one of the buttons. As you can see in the file, the left button’s hover doesn’t go smooth, the color fades just suddenly pop in. The right button works fine. Funny thing is that I made every button based off the left button, and only changed the shape in the background. I was wondering if any of you people could point me in the right direction to what is wrong, because I just can’t figure it out. Figma – 16 Jul 24

1317
Amelia Leason
Jace
JaceNew Participant
asked in Ask the Community
Mass Change Property of Multiple Components?

I have 3000 components with these properties in the wrong order. Is there a way I can change the order without having to drag them into place for each component…

19125
Sean_Sands1
Simo Casadei
Simo CasadeiNew Member
asked in Ask the Community
Templates are disappearing from my white board

Hi there,  I have a new issue (i am a student) when using the white board. No clue why it started.  When i am adding a template to the white board (any template), it shows up on the board but whern i place the curson on the sticky notes, for example,  I cannot edit them. I can’t really use the template. The moment I zoom in or out the board (doesn’t matter if with the mouse of the touchpad), the whole template is GONEEEE!!!! Why?? 😭 Please, advise. (I am working with a Macbook Pro).Many thanks,  Simo 

230
Simo Casadei
Petry Oliveira
Petry OliveiraNew Member
asked in Ask the Community
Swap variables in library level

I need help with swapping variables for a new library on FigmaI’m creating a design system that needs to swap the associated branding: colors, fonts, corner-radius, and border-stroke to be switched out. And the way that we do it on the component level is by switching the libraries (to the new ones), but Figma’s feature “swap libraries” doesn’t work with variables, only with styles and components.I tried to find a plugin that could do it properly, but the plugins that I found only change the variables available on the page, and don’t change directly the variables pointed on the variables panel.Has anyone faced the same issue? How did you fix it?

1221
Gustavo_Borges1
Muzi Yang
Muzi YangNew Member
asked in Ask the Community
Can I Join an Educational Team if I Have a Professional Account?

Hi everyone,I want to subscribe Professional Account on Figma (individual subscription), but I was invited to join an Educational Team. I’m wondering if it’s possible to be part of an Educational Team while maintaining my Professional subscription.

221
Celine_
Figmate
Hannah_B
Hannah_BNew Member
asked in Ask the Community
Cannot get canvas stacking to work as expected.

I am trying to create a dropdown widget that displays a calendar. I want it to appear over the top of other elements on the screen when the user clicks the widget.I have tried setting the canvas stacking to ‘first on top’ for the component variant, but I still can’t get it to work. Is there something that I’m missing? I have tried to attach some screenshots to this question but they would not upload. Please help, this is driving me nuts! 😂Best,Hannah 

492
Hannah_B
V
Vaibhav_Satishkumar
asked in Ask the Community
How to fit a frame to the dimensions of the screen?

Hi! I am new to Figma, and I was learning about how to use Auto Layout. I got all my components into the right spot, and when I change the dimensions of the frame they’re in, they adjust accordingly. When I run it and preview the frame in a different devices however, the entire frame itself just sticks out and doesn’t fit the screen. Here is an image showing what I see As you can see, there are still some black spaces. I was wondering how I could make it so that the frame will always have width and height dimensions that change depending on whatever screen I choose, so that one design fits all. Thank you in advance for your help

67785
Berkman
Gabi_Gordon
Gabi_GordonNew Member
asked in Ask the Community
Figma is rendering line-height incorrectly & it's messing up text alignment. Does anyone know how to fix this?

I’m working on updating my company’s design system. I am working on checkboxes and am struggling to get the line-height right, for lack of a better word. Before I begin: I understand that fonts/text display different in different browsers-- I am not worried about that. I am worried about getting the text correctly aligned in Figma while using standard styles so our engineers can use Dev mode. If I need to set inconsistent spacing for components in Figma, Dev mode won’t be useful for our engineering team. Like many companies, we use Source Sans Pro. I noticed that Source Sans Pro’s line-height seems to be off. If I have text center aligned, the descenders are cut off. If this was for only text like a paragraph, this would be fine. But since the text needs to be aligned with other elements, I’m not sure what to do. I also checked how Illustrator handled this. When Source Sans Pro has a font size of 16px and a line-height/leading of 16px, its container is 17.95px tall (I had to take a

6341
Anantha Pillai
A
Austin5
asked in Ask the Community
Communicating between Prototype and Figma Plugin

I’ve created a Figma plugin to get the state of local variables then trigger external API’s based on that state change. I’m trying to have a prototype instance of the file communicate with the Figma Plugin I created so when I click a UI element in the prototype, a variable changes which triggers an external API. Right now, there’s no way I can find to ‘listen’ for the variable state change in a prototype because it does not ‘write’ to the original variable value.

60811
xiduzo
Terms & ConditionsCookie settings