Ask the Community

Hi. I have a 3-level nested accordion. I have made 3 components each with a collapsed & an expanded variant. Levels 1 and 2 are working fine. For some reason, level 3 (the out-most level) isn’t even showing up as clickable. The prototype on-click is there. I can’t figure out what I’ve done wrong. This is the file if anyone can help. Figma – 18 Jun 24

Hi and help!As a designer, I start to work on an old project. The client give me access to 2 files : one with the wireframes and one with the components (library).Those files were exported to a local copy by the previous designer, then imported in a free plan by the client, so the links between them are broken 😫.I download the files as a local copy and import them in my paid plan, but I don’t know how to relink the instances to the library. What can I do ?

Hello Figma communityI am building two plugins, one private ( call it Admin ) where we can select a design and export it using JSON_REST_V1 format and upload it to our own DB  In another UI component plugin where we should load that imported JSON components from our own server  to allow users to chose from a list of design previews ( PNG images ) and copy a design into their workspace as a FrameNode or a component for that matter so that they can edit it as they wish. My problem is that I could not find a way to import that JSON_REST_V1 object  into the user's workspace. The feature I am looking to build is similar to the in https://www.flowbase.co/  Figma Plugin. Can anyone please nudge me in the right direction

I have a React front end with an express server that I’m using to send requests to the Figma REST API. The initial authentication piece appears to work. I call window.open from React to open my /auth route and complete the authentication in another window. The /callback route displays the access token in that window so the user can copy the value back into the React app where I’ll save it to localStorage so it can be used in other requests (this seemed a bit easier to me than messing around with session storage and cookies as I’m a noobie to this backed stuff). My problem is that when I try to use the access token for GET /user, I’m getting a 403 invalid token error. Here what things look like: Open the auth workflow from my React App: const getToken = () => { const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, width=500,height=600,left=100,top=100` window.open('http://localhost:9000/auth', 'Login to Figma', params)

I accidentally deleted a team, and I use the educational plan from my school email address. I'm supposed to restore the team by accessing the recuperation link sent to the email address connected to my account, but my school recently changed the address of all the students and I’m using my old email to Figma, so I don’t have access to it. What should I do? Is there any possibility the support team to send me the recuperation link? I'm really worried my files will be permanently deleted.

Context: I’m using Slide Deck mode:Prior to the new update with 30 new features, I had been using Smart Animate to animate objects across multiple slides, with good results. Now the workflow gets more granular, and actually allows us to animate the objects within a single slideMY PROBLEM: Now there is a limit of 1 single animation per object (e.g. FADE IN). I cannot apply a 2nd animation to the same object (e.g. FADE OUT), so I cannot have that object leave the slide. This means that an object that is brought into a slide via an animation cannot be animated out of the slide. It must remain, apparently. Am I missing something really simple? Or is this a weird limitation on the animation workflow? All I want is for an object to appear and then disappear on the slide seamlessly.

I created a plugin that allows me to create pages, rename them, and pull in components for things like the cover. A few days ago it suddenly stopped working and now I get an error “Error: in remove: Removing this node is not allowed”. Its pretty much stopping right at the originalPage.remove() section but not sure why it would cause an error now. const page = figma.createPage(); page.name = "Cover"; page.backgrounds = [{ type: 'SOLID', color : {r: 0, g: 0, b: 0}}]; const originalPage = figma.currentPage; figma.currentPage= page; originalPage.remove(); async function importNode() { let importComponent = await figma.importComponentByKeyAsync("b917533f747dd140e0922675938169c95e3f4456"); let importComponent2 = await figma.importComponentByKeyAsync("e44e6e490be70ccc67b34702d4af234c765a020e"); importComponent.createInstance(); figma.currentPage = page2; importComponentOntoPage(page2, importComponent2); figma.currentPage = page3; importComponentOntoPage(page3, im

Hi, I’m fairly new to figma but have some website designs under my belt. I want to create a carousel with navigation dots underneath as is more or less standard. But I want the navigation to be animated. Up until now I’ve always made the dots with auto layout and just moved the dot that indicates the position left or right in every instance.But now I want to basically to create a dot that will stretch into the next position to indicate the second image in the carousel. To achieve that I would probably need an in between state of the dot?Is there a way to nest such things in figma? Could I create an animation and then tell figma to play the animation when the dot moves or something similar? Or do I have to create inbetween states for every individual movement? The dots and in between state of the highlighted dot. 

Hi all, So I’m hoping to be able to create a component animation which will “highlight” a particular line in this transit-map style layout - so I created a variant in which the other lines all become grey. The effect works - but the hover is activating when I hover over the whole bounding box area of the red line, rather than when I just hover over the line. This is obviously happening because the connection is made to the overall bounding area box of where the red line is. Is it possible to make the hover only work over the thinner line/object? I guess that it might not be possible given how objects/lines/strokes are represented in Figma. But maybe there’s a workaround, if someone much smarter than me could enlighten me?? Thank you all in advance.

Hello,  I try to export parts of my design screens (frames) to PNGs and JPGs and I get weird pictures. I have cleaned up my designs and carefully gotten into the frame to see what could make the export look as if the frame is just a transparent item and I still get a wrong export of a picture.Do you know how I could solve the issue? Thanks a lot in advance! Warm regards, Eleni 

Let’s start with some background. Our team of designers began using Figma for design and delivery last year, for which we have purchased over 200 enterprise seats. Initially, the delivery process was quite pleasant, up until Figma started charging for Dev Mode. Before the existence of Dev Mode, engineers using the Inspect Panel’s viewing functionality was sufficient for us. We did not anticipate Figma making “minor adjustments” to the Inspect Panel for view-only users to make Dev Mode more appealing. Engineers have been complaining that they can no longer efficiently view design drafts or copy CSS code as before (not referring to Dev Mode beta, but the original Inspect Panel before Dev Mode). Some engineering teams have even asked if the designers could switch back to Sketch, as the delivery efficiency in view-only mode has severely deteriorated. However, with many designers in our team and significant effort invested in building component libraries on Figma, and all business design dr

Hey everyone, Does anyone know when the AI tool will be rolled out to all users? I’m on the paid Team Plan and using UI3. I can already see the AI beta settings in the admin section, with everything enabled, but there’s still no AI button in the toolbar. Does this mean it’s not fully unlocked for my team yet? We’re really eager to try it out! 🙂 Any idea when it will be officially released to everyone? Thanks in advance!

Hi to all, is it possible to export assets from figma like images, svg?. I need a zip archieve of this files. thanks!

When i place the overlay manually inside the frame, the prototype does not show me the overlay, but when i choose the other options they work fine, this is getting annoying as we need to position the overlay in the place that we want.

I am new to writing Figma plugins, however i have started quite a large project. Hence, for code cleanliness i would like to hold some of the functions, types etc. in other files apart from code.ts. However, when i try to import a function into code.ts to run, from another file, Figma throws an error that it does not recognize the ‘import’ syntax. Syntax error on line 1: Unexpected token Is there a way to import a function to the code.ts, so that i dont have to copy the whole codebase into code.ts.

Working on a document traversing plugin, I was required to build up a progress indicator in the UI. Basically traversing all pages all componentSets all componentsin this order.I had communication working between code and ui, but from one day to another, this changed. Now I can get only message from UI to code, but not back. Code is sending, no matter what I am handing it for sending, “undefined” .. On UI side, this is awaiting the messages:window.addEventListener("message", (event) => { console.log("Received " + event.data.postMessage) if (event === undefined) { console.error("undefined event sent, why?") return; } if (event.data === undefined) { console.error("undefined event.data sent, why?") return; } if (event.data.postMessage === undefined) { console.error("undefined event.data.postMessage sent, why?") // ^ it breaks here, since postMessage is undefined return; } // .. actual code comes here, but not req

I am attempting to create an animated effect similar to the one you will see at this URL when you click the Menu button. You will see 8 boxes animate in independently, one just after another. Using Smart Animate I can get them to all fill in together, but I cannot figure out how to have each individual element animate in on it’s own. Any guidance is appreciated.  

The documentation here suggest that external agencies and freelancers will be able to edit inhouse files as long as they have their own Figma licenses, removing the need for us to pay for full edit licenses inhouse for them to use. It’s really unclear if this has been implemented or not with the latest changes on 11th March. If I downgrade our agency users seats to colab seats inhouse, can they still edit if they have their own full seats on their accounts?

Hello. Could you please tell me how to restrict the ability to leave comments on the mockup for viewers?

 Copy as Text是我工作中的高频操作，自己自定义了快捷键，但上次更新后发现快捷键不管用了。定位了两天，发现其实是有些文件在菜单栏里没有 Copy as 的操作，举例，同样是选中文字，在一个文件里是有Copy as选项的：而在另一个文件里则没有： 期待尽快解决，谢谢

I am practising autolayout and I have a design with a couple of autolayouts created. However I am wondering why I do not get up the autolayout UI in the panel to the right? The first pic is how my UI looks and the pic below shows how I want it to look/it should look. Does anyone know what issue I am running into? Thanks. 

Hey, dudes! 😀In the teacher's lesson, when selecting an object, a window with options appears at the top, but I don't have such a window in Figma. 🤷‍♂️ As far as I remember, I used to have it too, but now I noticed that it is no longer there. Is there any way to install it? 

Is there a way in export settings to not create a destination folder when exporting frames or images? Please help!

I am currently creating a design system in Figma and I would also like to incorporate entire page layouts as templates into the Asset Panel.In this community file https://www.figma.com/community/file/1380235722331273046 ,there is a section in the Asset Panel called 'Examples' with layout templates. When you embed one of these templates on a page, this frame is not a component, but a regular frame with a blue border, which is made up of subcomponents.Does anyone know how I can implement this in my design system as well? When I insert components  from the Asset Panel into a page, they are always components and not regular frames...

Good day!I am experiencing difficulties changing my billing plan from a monthly to an annual subscription. I would appreciate your assistance with this matter.I am unable to find the "Change Plan" option anywhere in the Billing settings. For convenience and cost savings, we would like to switch to an annual plan.Thank you in advance for your help and for the work you do.Best regards,Rons Cartler