Ask the Community

I am a developer and designed a plugin for a Figma. Do we have any tool to run the QA automation tests on the plugin before releasing to production

i am creating a codegen plugin to generate code from Figma design. i would like to write some unit test cases for it? how i can do this using jest?

Hi, I have been trying that cursor move(without clicks) makes video in background play/stop .Although I tried to apply mouse enter/move out in tiles covering whole space, but video keep playing once stop in a tile. It would be great to hear solutions. Blue tiles with mouse enter/move out interaction 

I’ve been playing around with calendar-style UI designs lately and wanted to bring in an iCal-inspired layout. I found this use ical template free resource, which is technically for CapCut, but I’m curious if anyone has tried adapting that kind of layout or style into a Figma design.I’m hitting a few snags trying to recreate the spacing and structure visually without it feeling cluttered. Has anyone here tackled a similar challenge or have tips on clean calendar grid design in Figma?Appreciate any input!

We are having a persistent issue where our files look all messed up after merging a branch. A branch is reviewed and approved. All looks fine. It gets merged, and then whatever was in that branch suddenly looks terrible in the Figma file it is merged into. The components and layers appear resized and cut off, which can only be fixed by temporarily resizing them then undo-ing that action. However even after trying that, sometimes it renders incorrectly again and looks like a big mess. Is anyone else having this issue? Is the Figma team looking into this bug already? Thanks!

can anyone let me know

Hello, I’m preparing a presentation and wanted to use prototypes inside of the presentation, When working with it it all looks fine, but once I present a black outline appears. Can this be removed? In work When presenting, Best Regards

Hello! I desperatly trying to find out, why the IOS Assets (or components) can not be seen in the Prototype but in the figma file. What am I doing wrong? Wether if I copy and paste the assets to the frame or inserting it, i dont see anything. Is there something to activate or something? Im am using a windows laptop, freshly updated, drivers are updated. It’s so frustrating. In Prototype Mode In Figma File 

I created a slide deck template, added a 'table of contents' in the parent and attached links to individual title slides to individual sections of the presentationthe idea is to have a ready file structure with a working, clickable 'table of contents' after adding all the slidesunfortunately, after creating a new deck and implementing the template, the links do not workI wonder if there is a way to achieve what I intended?RegardsJoanna

Hi, Im a single designer, with no team, and I have few files of UI Kits, so to be able to use them and for the instances to get component updates do I need the Pro plan ? isn't there a way in the free plan ? Or just the copy and paste way ? --Kind Regards

I believe I first created an account on Figma for [redacted by forum admin/moderator to remove PII] about 2-3 years ago. Until recently I didn’t really use it, but now I urgently need it to start work on a client project that is quite time sensitive. However for some reason my account is not functioning properly and I cannot start any new projects. I keep getting the error: Limited access: To create new files, switch to a plan where you’re a full member. I went to my email to see if I could use the verification email from Figma I received in 2022 but this obviously wasn’t working anymore. I tried deleting the account so that I could recreate it with the same email but that didn’t work as I could not verify my password and I also cannot change my password as I don’t even remember it. So this basically means I”m logged into the account and cannot do anything. When I log into another account using my gmail [redacted by forum admin/moderator to remove PII] it does seem to work normally. Ho

 Hi! we are trying to get the variables from our library. I have been able to get a variable information by passing the variable id. I can see that the name is available (color/globant/red/100) however, If I inspect a component, such as the button, I can see that under “Selection colors” the color name i just mentioned appears (ok), but I am missing the css variables that is visible under Style var(--color-accent-success-default).  Also, I don’t see the variable value anywhere on the console.log. I need to get the value (this is a must) and if possible the variable name as well. Under valuesByMode it appears: valuesByMode: Object 4281:0: a: 1 b: 0.95686274766922 g: 0.95686274766922 r: 0.9882352948188782 but this is not really what we want. We are using a hexa value. We would like to get the hexa value. Thanks in advance.      

I would like to inquire about the recovery and relocation of my account.I used to use my existing account, [redacted by forum admin/moderator to remove PII] Google Link, but as soon as I graduated from school, my account was suspended and became unusable. In this case, I would like to transfer all the projects in this account to my account, [redacted by forum admin/moderator to remove PII] . I would like to inquire about this.You can authenticate that [redacted by forum admin/moderator to remove PII] is the owner of the account. It may be a certificate of school graduation or enrollment.I sincerely hope that the files will be recovered and transferred!For answers to related content and additional resolution confirmations, please contact [redacted by forum admin/moderator to remove PII] ! You can check my information and contact information.

Hi! We are working on a DS library that has a bunch of variables. We would like to get those variables to our codebase in Visual Studio Code, with Code Connect. I have cloned the “simple design sample” (https://github.com/figma/sds), but when I try to run the script for processing the variables, I get an error, that apparently says that I don’t have “read or write” permissions for “file_code_connect”. This is the error that appears on my console: response { status: 403, error: true, message: 'Invalid scope(s): file_code_connect:read, file_code_connect:write, file_comments:read, file_comments:write, current_user:read, file_dev_resources:read, file_dev_resources:write, file_content:read, file_versions:read, library_assets:read, library_content:read, projects:read, team_library_content:read, webhooks:read, webhooks:write. This endpoint requires the file_variables:read scope'}nameSpace com.figma.sdsfile:///Users/bruno.sastre/Desktop/genexus/figma-sds/scripts/tokens/fromFigma.mjs:99 con

I want to make an animation where an user taps on an item, and it opens a slide-in with the item details like the pics I attached, but I don’t want the slide-in to come from the far edge of the screen, I want it to appear from the left of the “Order Details” frame.I tried making an open-overlay with move-in animation, but I can't figure out how to make it appear from anywhere other than the very edge.Here’s a video of the problem with the prototype I made:Does anyone know how to solve this? Thank you! 

Anyone having problems with user permissions today? I have a user with a full seat, and there’s a folder that I’ve invited all team members to. This user has only View permissions to this folder, though other team members with full seats have edit access. Specifically: in Admin > People, he is shown with a full seat.I have a folder that I’ve shared with “Anyone in [team name]”When I open that listing in the Share popup, this user has “Can View” while other users with full access show as “Can Edit”“Anyone in [team name]” is the only thing that this folder is shared withI’ve changed nothing, and this is new today. 

I’m managing a Design Library. Some of the components have a drop shadow effect. When I use an instance of one of these components in a Design File and resize the instance by dragging or setting height and width, the shadow’s settings (position and blur) don’t change, making the shadow appear differently in relation to the component.Scaling with K solves this, but I’d like to find a solution which lets our other designers use height and width to resize. I’m concerned that they’ll do it regardless and make the component look incorrect.Is there any way to do this, without flattening the component contents and without making a shadow layer myself (that would be too much work)?

2-3 days ago shortcuts are not working as they did before. It used to be that shortcuts were mapped to physical location of keys, not mapped to the actual keyboard layout you pick from the system menu. Let me explain: I use Serbian layout for most of the typing since I have special glyphs I don’t kave on English layout like đšžćč. Serbian keyboard has mostly the same layout as the English one, except that Z and Y are swapped and other symbols like ±(); are on different locations. This is the issue with any other software, since you would need to stretch your pinky and index finger just to make undo action. Figma was great and unique because all the shortcuts stayed in the same place on the keyboard regardless of the layout. Now Figma is acting as any other program, I have to switch all the time between two layouts, Serbian for typing, English for everything else. This is supper annoying, can I switch this somehow back?

If you see the screenshot that I attach, the annotations appear in Design mode. I believe that they should appear only in Dev mode. Please advise how I can fix this situation.

I am new to Figma but I have worked as a developer with designers who use Figma. One problem that I have experienced is that Figma (like most design tools) throws out very crude HTML/CSS/React. There are a number of problems that arise when developers implement the Figma design. Based on my experience working with Figma designers, it gives the designers a lot of power to craft a beautiful user interface but it does little to aid the development design/build/test/redesign cycle. Instead, at best, it can be the first step in a waterfall development process. What are the best practices for including Figma in a design/build cycle? Is there a way to define a theme (CSS) that is maintained across an entire website?

Basically, I am trying to make an interaction where I select 3 of the checkboxes and it changes the disabled state to active. I swear i’ve been making conditional statements and applying variables all day but nothing is working lol. Someone please help me  😭I initially made a number variable: selectedcount = selectedcount + 1 and applied it to the checkboxes but figma didn’t recognize it in variables when i was clicking on the checkboxes in prototype. I am down to hop on a google meets to see how you all do it or even share my file. This is for a school project.Thanks!  

Hello everyone,I’m currently facing an issue with the new Figma AI feature. Although I have enabled the AI feature in my Figma account settings, the "AI First Draft" option is not available when I create a design. I’ve tried refreshing and restarting my session, but it hasn’t resolved the problem.Is there a specific requirement or step I might be missing to use this feature? Any guidance or solutions would be greatly appreciated!Thank you in advance for your help!

I am running into an issue where the eyedropper tool for picking colors is not working correctly / doesn’t work.

Hey Figma Community! 👋I’m trying to solve a problem around reusing common flows across multiple files in Figma.Specifically, I want to: Create a component for a flow (multiple screens with interactions) Include prototype interactions (like navigation, transitions, etc.) as part of that component Publish this component as part of a shared library And then use it in other design files without breaking the prototype connections The issue I’m facing is: when I use that published component in another file, the prototype interactions often break or don’t work as expected.Has anyone figured out a clean way to achieve this? Or is there a best practice for making flows reusable with working prototypes across files?Would really appreciate any tips, workarounds, or ideas. 🙏Thanks in advance!

Hi everyone,I’m developing a Figma plugin that extracts design properties from selected nodes, including text styles and color tokens. For text styles, I successfully retrieve the applied style using:const textStyle = figma.getStyleById(node.textStyleId);This works great for identifying and mapping text styles. However, I can’t find a way to get the color variable applied to a node. When inspecting node.fills, I only see the RGB color, but not the token assigned in Figma variables. Example:In Figma, the text color is set using a variable:color: var(--color-foreground-primary, #000); But when I check node.fills in the plugin API, I only get:{ type: "SOLID", color: { r: 0, g: 0, b: 0 }}I tried checking node.boundVariables, but it doesn’t seem to return color-related variables. Questions:1️⃣ Is there any way to get the applied color variable name (e.g., "color-foreground-primary") in a Figma plugin?2️⃣ Can we extract this information from boundVariables, fills, or another API method? If