Ask the Community

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

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

Hello, I am working on a class project where I am prototyping a map for a small museum space. My goal is to have 4 buttons at the bottom of the display that when tapped, highlight different activities that correspond to each. Attached below is a screenshot of what I have so far (sorry for the lines across I have other interactions). In short I need each button to:when pressed highlight each shape of the corresponding color when pressed again revert those shapes to their default settings allow other buttons to be pressed at the same time, since some activities will correspond to multiple thingsAny help would be greatly appreciated! 

I’m reaching out to see if anyone else has encountered a bug with local variables in Figma. I’ve created local variables (color, text, etc.), but after applying them to components and assets, they sometimes vanish and become detached after a while. This can be frustrating and disrupt the workflow. Has anyone else experienced this? Are there any known workarounds or temporary fixes? Could it be related to a specific Figma version? Thanks in advance for sharing your experiences and any insights!

Hi, I am using an android table to use Figma. Both the actual app and the website run on Chrome won’t give me the option to edit anything. I need to use this app for my class and the time I’ve waisted from trying to figure out what’s wrong is effecting my grade.

I want to use magician but it is asking for an access key. Where can I get the access key?

I’m trying to retrieve the variable ids bounded to a text layer so I can use theirs names for documentation. I’m successful on shape and frame layers getting the ids of bounded variables for color, radius, and other properties usinglet variableId = node.fills[0].boundVariables.color.id;let variableName = figma.variables.getVariableById(variableId).name;return variableName;or let variableId = node.boundVariables.topRightRadius.id;let variableName = figma.variables.getVariableById(variableId).name;return variableName;but using let variableId = node.boundVariables.fontFamily.id;let variableName = figma.variableId.getVariableById(variableId).name;return variableName;only returns undefined. Inspecting it further, let variableId = node.boundVariables.fontFamily; returns the variable array, like [{"type":"VARIABLE_ALIAS","id":"VariableID:4

Hi, I want to install the plugin Export Kit Storm Lightning but I cannot find that plugin when I search. Does anyone have an idea ? Is the plugin not available anymore ?

Figma says it allows MOV files, but every time I try to upload my MOV (I need the transparent BG), it says error uploading video: video data invalid Anyone know why this is happening?

I’ve been diving into some Roblox scripting resources lately, especially around game UI and design, and I came across a site that focuses on tools like how to use scripts with executors. It’s more scripting-focused than design, but it got me thinking—how can tools like Figma be better integrated or referenced when designing interfaces for scripts like these?One issue I’ve noticed is that a lot of these game scripts assume very basic UI layouts or hardcoded positions, which makes iterating on design a pain. Has anyone here worked on bridging the gap between visual layout tools like Figma and functional scripting tools used in Roblox or similar platforms?Would love to hear if anyone’s tackled this kind of workflow or has thoughts on improving the design/dev handoff in game environments.

Good day, Sirs! According to the Figma Pricing page, as a Professional Plan user, I should have access to the Figma REST API, which would allow me to integrate and interact with Figma files programmatically, including updating Figma files (changing some properties of Figma file nodes). However, when I am trying to obtain a Personal Access Token, the only permission for “file content” is “read”, and no possibility to select “write” permission. Requests: Could you please explain how I can obtain a token with “read&write” permission for “file content” Please provide a list of node properties that can be “read-only” and “read&write” (or a source where I can find this info). Thanks in advance.

I have the following code:async function fetchNamespace(locale: string, namespace: string): Promise<Object> { const url = `https://myapiurl.com/v1/translation/${namespace}?format=flat` const headers = { "Accept-Language": locale } const response = await fetch(url, { method: 'GET', headers: headers }) const content = await response.json() as any return content[Object.keys(content)[0]]} It gives me the following error:Access to fetch at 'https://myapiurl.com/v1/translation/nes?format=flat' from origin 'null' has been blocked by CORS policy: Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response Is there a way to allow the "Accept-Language" header somewhere? I know the header is the problem because:I've tried sending the same request without the headers and it

How do I make a shape partially disappear behind. For example, I have a shape that I wish to be partially cut off (and not visible) by the navbar. Simply bringing the navbar entirely to the top of the stack does not accomplish this.   

Hello everyone,I’m new here and trying to find how to reduce the thickness of a flat icon copied as SVG from figma plugin, at this current scale, I’m looking to achieve a thinner width for this icon like a pen/pencil drawing.Has anyone had to resolve this please share with me?Thank you  

Hi everyone! 👋In FigJam, I love how you can create arrows and then reshape them freely by adding angles, and the corners stay nicely rounded no matter how you move the handles.I’m wondering:👉 Is it possible to do the same in a Figma Design file, but with a rounded rectangle instead of an arrow?Basically, I want to create a shape starting with a rounded rectangle and I want to be able to add angles to it (just like how arrows behave in FigJam), while still keeping the rounded corners.Does anyone know if that’s possible? Or maybe a workaround / plugin that can help?Basically I want to be able to reshape the rounded rectangle easily without the corne radius to change and be able to add angles like I want. How can I create easily a rectangle like the purple one in my pic? Thanks a lot! 

프레임 내의 레이어를 슬라이스하고 싶은데, '픽셀 그리드에 스냅' 기능이 활성화되어 있지 않아서 슬라이스 과정이 매우 불편합니다. 이 기능이 더 이상 제공되지 않는 이유를 알고 싶습니다. 이 기능이 없어서 작업에 지장이 있으므로 이 기능을 다시 제공해 주세요. 자동 레이아웃을 사용하고 슬라이스를 위해 전체 페이지를 프레이밍할 때 '픽셀 그리드에 스냅' 기능이 활성화되기를 바랍니다. Figma, 빨리 조치를 취해 주세요.

HOW CAN I FIX IT

Hi there, during a project I often reorganize pages and frames. Is there a way to move a comment to a different page? Or to have it follow along as I cut and paste that screen to a different page? Thanks