Ask the Community

I have the following image, with a transparent background in the spots that look white: The thing is, I need those parts to be white, not transparent, when I export the image as a PNG. I am trying to essentially create a mask, only with it being completely solid within the outer lines of the mask, and have it be a few pixels wider than the original image (so that there is essentially a border on the image, if that makes sense). I’m just not sure how to do this. I can create a mask, as seen below (made red for example) but I can’t quite get what I’m looking for. Any tips would be greatly appreciated.

So basically, I’m a newbie to Figma and I have a website design idea in mind. My business is selling protein powders, so I’m picturing protein powder being packed into a protein tub with a scroll-down animation. I have seen a similar website with coffee beans being prepped and poured into a coffee cup as the customer scrolls down on the website. PLEASE IF ANYBODY KNOWS HOW OR WHAT I COULD USE TO GET STARTED, IT WOULD BE MUCH APPRECIATED.

The new UI makes it harder for me，All the click areas are abnormally small

‘Sections’ can be exported as pdf files, but one for each section is created as a pdf file. Is there a way to create a single pdf file?

Why can’t I see the option to join the U3I - AI waitlist in Figma? I only have the “Learn about UI3 + AI access” option.

Hello Figma community! I have a question about hover button state and icons. I have a component set of buttons in different states, and separately I have icons as components that I can use in button instances. However when I change a button icon in one, it doesn’t follow the colour change. How can I fix that? Here is some pictures to show what I mean^ Components: Button in action after icon was changed in the instance:

Does this occur to others too?

Hello all! I am searching for a library of “Figma Design System Icons” to create a keyboard shortcut guide for using the vector tools. While I know many of the commands intuitively, I would like to create a quick reference sheet to share with the greater Figma Community. Being as forums can be a black hole, please feel free to email me: me@niccoquinto.com

I have a section with placeholder information like “Incognito Bird” (random name), city, phone number, and email. I’ve created a component for this section with three different states or variants: Default Variant – This is how it looks initially, showing the placeholder details. Hover Variant – This appears when I hover over the section, giving visual feedback that it’s clickable. Edited Variant – Once I input my information and save it, this variant shows the updated details. Here’s how I want it to work: When I hover over the section, it should switch to the hover variant. When I click on the section, an overlay should open where I can input my details. After I input the information and click “save,” the section should switch to the edited variant, showing the updated information.

Hi, I’m trying to build a side navigation bar with anchor links right now for a website prototype and I’m struggling to get the interaction animations to work. For reference, I’ve used component variants to animate which navigation button is selected, and then hard-wired the scroll-to animations in the actual frame. However, when I actually test the prototype, the animations bug a lot, some examples including: Clicking the navigation button won’t trigger the scroll-to animations In some cases I have to double click to trigger the interactions when it should just be one click I’ve made a simplified version of it here: https://www.figma.com/design/yzn57JN2qYWrHkrEernVHu/(TEST)-Anchor-link-sticky-bar-animation?node-id=0-1&t=V49NGzzPhp9kHf8z-1 Please help!!! It feels like I’ve tried anything, and I don’t know if there’s a solution that I just haven’t got to yet, or if it’s just another Figma bug, or if it’s just not possible.

Hello! I am using the Slides feature from Figma and I cannot see the layers panel on the left side as I was able before. I am using the desktop app for Windows, and I am in design mode and the panel is not visible. However, if I access Figma from the browser I can see it there. I started having this issue last Thursday. I could see the layer panel before. Thanks for you help! 🙂

Everything online says tap the question mark in the bottom right corner. There is no question mark in the bottom right-hand corner. How do I revert?

Hey 🙂 Currently I am working on a big project, that involves a lot of different state of different components. Is it possible to change the property of an element/component through clicking on another object? Given my screenshot below it should be, no? But linking this rectangle with the below component doesn’t work at all. I would love to be able to switch the state of the linked object when I click this (example) rectangle in prototyping. The linked object has different properties available, but I can’t select them tho. Could you please explain my what I am doing wrong? Thank you 🙂 Cheers

Hello! I am new to using Figma and have been making my way through the Google UX Design Certification. I think I may have over complicated one of my portfolio projects and am hitting a roadblock for one of the planned frames. I’m designing this project to be a voter resource tool, where they can see who currently represents them on a state and federal level (US) and who is currently running for office. I’m trying to make something that would be user-friendly for seniors, folks who are first time voters, and folks with learning disabilities. I’m trying to create a way for the user to compare candidate views on top issues in one screen, instead of having to go back and forth to each candidate. I cannot figure out how to do this currently. I’ve figured out overlays for my settings screen and menu and am trying to avoid making a billion more screens to account for every possible combination of candidates being compared. You can see some of the screens in the following screenshot - I still

Hi guys! For those who have a product that is displayed on mobile and desktop, how did you build your design system? Do you have one single design system or one for each? Giving that some of our platform components are quite different from one to the other we are thinking about building two design systems, but then once we’ll search for an asset we won’t be able to know from which design system it comes from. Still getting used to Figma here, so I’m hoping you guys can help me! Cheers, Gaëlle

There’s a lot of posts online and on the forum about embedding Figma into other websites, but I was wondering if it was possible to embedded websites inside of a Figma Design file? Specifically I’d like to embed a SketchFab model, ideally just providing the standard SketchFab iFrame code, and have it load in the design file and be usable? Something like this model. Is anyone aware if this is possible, or somethat that could be created through the Figma plugin api? Thanks

Please help me in this, i am trying to create thumbnails that enlarge on hover individually but scroll vertically together as a panel. there is also a little text under these thumbnails that scrolls. the scrolling is happening with a scroll bar and thumb. later, the panel is to be added to a website screen, with the hovering and scrolling of panel happening without disturbing the rest of the website screen. I have tried many methods, but basically the scrolling is overriding my thumbnail components’ hover interaction.

I saw some past topics about this but no real fixes: I can’t select any other frames of a gif as a preview other than the first frame. All software is up to date. Is there some other way to fix this?

I made this top bar for my app and it was working great, stretching according to a size of the frame, but once I made this a component and added to my library, it stopped working. How do I fix this?

Hi Community, I accidentally purchased 3 pro editor seats under my private email, instead of under my work email. Can this be changed somehow, or do I need to delete everything and re-purchase? Thank you!

Hi friends! I have a quick question: When inspecting in dev mode, I noticed a gap value displayed as “6x” with an info icon. This container is set to wrap, and the actual gap size is 24px. Do you guys know what the meaning of “6x” in this context? And how could I expand the info icon to learn more? Thanks in advance! 🙂

I am not seeing respective icons, the cursor stays the same if I try to rotate, create new frame. Even I can not see the eye dropper tool. Don’t know why it is happening.

I understand that creating a Stripe account in India is invite-only, but several platforms, like Lemon Squeezy and Dribbble, still offer India as an option for connecting with Stripe for payouts. Dribbble, for instance, recently launched their “Send Proposal” feature, which allows users in India to receive pay-outs via Stripe despite the invite-only restriction.

I can’t find my Figma file. Yesterday, I worked on it, but I can’t find it in my files, also not in my deleted files. How can I restore this? Notification: Hmm, we couldn’t find that one… This file may have been deleted, moved, or made unavailable. Try reaching out to the file owner I am the file owner and can’t find it. Please help and restore it! Link: https://www.figma.com/design/yfyjfpKdyMwwyNRQaSmfmp/soefheerhugowaard.nl?node-id=360-5744&t=8CbSGcVIymaTsXJa-1 Document: Soefheerhugowaard.nl Kind regards, Jeroen

Might be simple answer… When I create a new design file and then turn on a shared library is there a way to view all the available text and color styles from the shared library in the right Design panel in my new file? I don’t mean when I’m applying the styles to text or objects. I want to be able to see all the styles in the Design panel of my individual design files just like I can see them when I’m working in my library file: