Report a Problem

Hey, we recently launched a plugin for FigJam (https://www.figma.com/community/plugin/1220696620350131525) that exports notes as Stickies and clips as Embeds. This works fine for Figma Desktop App but doesn’t replicate same behaviour on Figma on web. We have followed the official guide for implementing drag and drop for self-hosted UI. Guide: https://www.figma.com/plugin-docs/creating-ui/#drop-events-from-a-non-null-origin-iframe Official Code Example: https://github.com/figma/plugin-samples/blob/master/icon-drag-and-drop-hosted/index.html We’re now left with the following doubts Is it not possible to implement drag and drop for self-hosted UI on Figma Web? If yes, what else should we do to ensure the same? Currently its not possible to test Figma plugins for web during development, could there be a way to test how plugins would function on web in the future? This would help us avoid unexpected behaviour after we launch or update the plugin.

When I create svg nodes in figma.createNodeFromSvg, two different style nodes were create. However, these svgs have same style in browser. The only code diff were linearGradient x1,y1,x2,y2 as fellow image. It seems like Figma can not handle percentage type linearGradient right？ linearGradient with percentage type x1,x2,y1y2 in browser linearGradient with number type x1,x2,y1y2 in browser

I create a variable: let iconVectorPaths : VectorPaths = []; I assign a path (pasted from copied Chrome inspector object): iconVectorPaths = [ { "windingRule": "NONZERO", "data": "M 4.989105701446533 6.993822125878069e-7 L 5.989105701446533 6.993822125878069e-7 L 5.989105701446533 16.013992309570312 L 4.989105701446533 16.013992309570312 L 4.989105701446533 6.993822125878069e-7 Z" }, { "windingRule": "NONZERO", "data": "M 16 5.024010181427002 L 16 6.024010181427002 L 2.1366776081777061e-7 6.024009704589844 L 2.636236331454711e-7 5.024009704589844 L 16 5.024010181427002 Z" }, ... And then later assign it to a variable of type VectorNode: iconVector.vectorPaths = iconVectorPaths; This last assignment concatenates values of many data: attributes of the original into every data: attribute of the VectorNode’s vectorPaths array. Why?

I’m working in a branch and have made a lot of edits. Normally I update from main every now and then to get things up to date and to get rid of the popup, but when I did it today I see that the page I’m working on is changed when opening the dialog. The preview in “Keep branch” is reflecting this and showing me an older version. In the background I can see that the view shifts into the “Version history” view which is very strange. It’s driving me mad. Please help

Sometimes when I add a new component and go to publish the change, the library file shows that it is up-to-date and there are no updates. I cannot copy + paste these components where they need to go either (the linking breaks). Occasionally, entire pages full of components become unlinked and do not appear in other files.

It seems that I have created two rectangles with exactly the same style property, but they look different. Even copying & pasting the style can’t solve this problem.

When I use the example in waitForTask doc the widget doesn’t stop rendering const { widget } = figma const { Text, useEffect, waitForTask, useSyncedState } = widget function WaitForTaskExample() { const [textContent, setTextContent] = useSyncedState("text", "Initial") useEffect(() => { waitForTask(new Promise(resolve => { // Simulate async work setTimeout(() => { setTextContent("Final") // Resolve the task resolve() }, 1000) })) }) return <Text>{textContent}</Text> } widget.register(WaitForTaskExample) On the setTextContent the widget seems to restart and rendering again and again

Whenever we have a branch open from a main file and are doing work, we are constantly getting updates that the branch is different from the main file. This is to be expected, as I am working in the branch, but this is persistent and never goes away. The moment I start making changes in a branch, I am presented with a dialog stating there are changes in the main file, even if it hasn’t been touched. Then if I click Update and Keep Main, I will end up overwriting all of the work that has been done on the branch. Not sure why this is happening, but it is certainly frustrating as it negates the whole point of a branch.

If you change the name of the instance by calling the rename function, the documentchange event will fire and indicate that the name property has been changed, but if you undo/redo, this event will not fire. Steps to reproduce: Place an instance of any component on the canvas, or select an existing one. Run the plugin with the documentchange event listener. figma.on( 'documentchange', ({documentChanges}) => { console.log(documentChanges) } ); Change the name of the selected instance using Figma’s native rename function. Undo and redo the last action. Expected result: The documentchange event will fire and print an array of objects to the console. Actual result: The documentchange event does not fire.

If you have some problems with changing color while using variants in Figma, Here is a solution: All in all, you need to Flatten each layer of a variant, for this, as you know Figma doesn’t have the Flatten each layer option, so I suggest you download the Automator plugin. After that, Select all layers (you can do this by pressing Enter while selecting the parent layer) Run Automator > Object > Flatten selection, then click Flatten each layer. Done!

When I have plugin panel open such as “Tokens Studio”, opened submenu is overlapped by plugin. Problem is that I can not have them on the side as overlapping submenus.

I am trying to change the image But I can’t choose image

Form input values become unresponsive on reopening of app after closing it from the plugin API figma.closePlugin(). Well it works fine when we reopen after closing it from inbuilt plugin ‘X’ icon placed the top right corner.

When i click publish plugin button, nothing happened. Some error info shows in dev tools. here is my plugin manifest file, and plugin id is provided. 2023-01-30T07:40:00Z

I had a component with that had a Color Style layered in this manner: Image Layer (85% opacity) – just the Figma’s native placeholder checkered background #858585 Solid Layer (beneath Image) I recently updated this Color Style and added an image to replace the placeholder checkered version. When I publish the update and update my component instance on a separate file, the error “An invalid image or thumbnail was removed.” For now, I’ve been able to avoid this error by layering the Color Style in this manner: Image Layer (0% opacity) – the original checkered background image layer New Image Layer (85% opacity) – the image I intended to replace the placeholder #858585 Solid Layer Is there a way to fix this issue so that I don’t need to layer redundant image layers? Thanks!

I was working on a branch and was at a point I needed to update the branch with recent updates from the main file. When resolving the conflict between main & branch (it was the only conflict and was an entire Section that I had been working on in the branch) I chose Keep Branch, it kept everything as expected EXCEPT for all the arrow styles on lines that I had updated in that Section. I noticed the arrows weren’t displaying correctly in the branch window when viewing the conflict side-by-side, even though they were clearly a different style in the branch itself.

In my colour library “Light Theme” I have a colour style called “contentDefault” if I create a rectangle in the library, apply this style and then run figma.currentPage.selection[0].fillStyleId I get the fill style ID S:1eab1fd8b8857bf87c862afd0590934a23ac0368, (key changed). If I run figma.getLocalPaintStyles() I can see this same key appears as a local paint style in my library. The library is published and up to date. In a separate local file I have 2 different text elements and they both have the style “contentDefault” applied to them, but when I run figma.currentPage.selection[0].fillStyleId they have two different values: One is S:1eab1fd8b8857bf87c862afd0590934a23ac0368,15:73 while the other is S:effba5ca507e1ec8b0b745807cfb2da2e0c3fcdb,2398:0. If I open the colour style selector it indicates that both of these styles are “contentDefault” and both are in the “Light theme” library and if I select “Go to style definition to edit” it takes me to the same library file. If I create a

Documentation for this feature is here figma.com but when I try to use it, I get this error figma.createImageAsync is not a function Even in the app I get the same error Thanks!

Hi I thought this was a missing thing in Figma but it seems it’s not working in Windows only. For instance… SHIFT + 0 SHIFT + 1 SHIFT + 2 It’s very useful and more productive to have them. Thanks

There’s a couple of times, the search function in Figma just breaks down and only shows me community files. It happens randomly and also happens to a lot of people in my org. Frustrating because I have to go through a list of files to search for the one I need

I have 10 public files and was quite happy about the possibility to lock frames/content but the insert links where still clickable. Has this option been removed? Is there a new way of doing this? Was quite nice for the user imo. Like within a readme file.

Hello, my name is Kamilla I am using Figma as my main tool, also I use plugin-called “Dark mode switcher” and it keeps my time, helps me to complete my works as fast as it possible. But now I ran with a problem like-Dark mode switcher does not work. Please tell me, what happened, and how long should I wait for the solution of the problem?

I’m getting some kind of weird rendering when importing a svg using fractalNoise as filter. here’s the output: the noise looks something like this <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"> <feTurbulence type="fractalNoise" baseFrequency="0.176" numOctaves="4" seed="15" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence> <feSpecularLighting surfaceScale="29" specularConstant="2.1" specularExponent="20" lighting-color="#6400ff" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting"> <feDistantLight azimuth="3" elevation="156"></feDistantLight&gt

While my plugin is running, I converted group into frame. So, I checked my selected node on my console using figma.currentPage.selection[0]. It shows me the previous state of a node, however

The title says almost all. I would like to kindly request a couple things regarding the Developer VM: Add a checkmark to the menu item when it is activated If possible, on reloads, keep the downloaded plugin code name instead of incrementing a suffix. If you are concerned about cache, just append a random query string to the request. Changing the name of the file confuses the Debugger that also has to reload all source maps Improve the documentation about the Developer VM in the API docs. Essentially it says “When the option is enabled, these plugins will run in the browser’s JavaScript engine, so that developer tools can be used”. And that we need a debugger statement to find our code. No mention to sourcemaps (hugely important) In fact, with Dev VM on you don’t need the debugger. Simply group files by “Authored” and plugin’s code goes straight to the top Or search for the code you want to find, set a breakpoint and you are ready to go (that being said, I just posted abou