Ask the Community

Hello everyone,I'm facing a significant workflow issue when exporting from Figma to React, and I'm hoping the community can help me find a solution.Current Situation:My Figma file uses Untitled UI design system with properly configured variables (colors, spacing, typography, border radius, etc.) I've verified the variables are correctly set up: Colors/Brand/500, spacing-md, Text md/Semibold, radius-lg, etc. When I export/generate code from Figma, I get React code with custom Tailwind classes instead of Untitled UI componentsThe Problem (with real examples):What Figma exports:  jsx// Button<div className="shadow-[0px_0px_0px_1px_rgba(10,_13,_18,_0.18)_inset] rounded-num-8 bg-brown border-gray-400 border-solid border-[2px] overflow-hidden flex items-center py-2 px-num-12 gap-1"> <div className="relative leading-5 font-semibold">Add User</div> <img className="w-5 relative max-h-full" alt="" /></div>// Badge<div className="shadow-[0px_1px_2px_rgba(10,_13,

We are designing an application that helps users to create/develop a web application from prompt and part of this we wanted to generate the Figma designs and get the approval from users before we develop the application.This will help users know how the application is going to look like and enable them to make any changes to it.I’m looking for suggestions on how do we do this? Are ther any plugins that I can use or Does the MCP server supports this use case. 

Hey everyone!I’m exploring ways to streamline document handling in our design workflow. Sometimes clients or vendors still require faxed documents like signed approvals or contracts, and I’d love to move this process fully digital.Has anyone here integrated sending and receiving faxes online into their design or collaboration workflow, perhaps alongside Figma or other creative tools?I’m curious which online fax platforms work best for designers or agencies, especially ones that maintain document quality and security. How do you handle these situations efficiently without disrupting your creative process?Any tips or recommendations are welcome!

I sent a query on figma for educators and students and has not received any feedback. How long do I wait til I get a response?

I'm participating in a Connected Project as a guest and encountering an issue with Figma MCP.Around September, I was able to use Figma MCP without any problems, but recently it has started returning the following error:Error: This resource couldn't be accessed. IMPORTANT: Before continuing, you must tell the user to make sure their paid Figma seat includes Dev Mode access, they have the right permissions for this file, and the provided link is valid.I have a Full Seat on my own team and can edit files in the guest project, so I don't believe there are any permission issues. (I can access files from my own team via the MCP server.)The host is on an Org Plan, and I'm a guest on a Pro Plan.I'm using the desktop MCP server.Does anyone have any information about this?

MacBook Pro Pro M3, this is what the application window looks like. It only works in the Safari browser. How can I solve this problem?

Hello, I always have a lot of trouble connecting to my institutional email from my smartphone.I need to connect my Educational Plan account, which I opened with my university's institutional email, to a private email address. Is there a way to do this? Or is it possible to connect a secondary email address to the main one?Thank you very much.

Hey everyone,I’m trying to update an existing component that was originally designed for mobile. I want to create desktop variants of it, and I’d like to add a new property called “Device” with two values: “Mobile” and “Desktop.”I haven’t used Figma since the new UI update, and somehow this simple task feels impossible now 😅Here’s what I tried: Selected the main component set Added a new Text property called “Device” Went to one of the variants to assign that property…but the new property doesn’t show up at all when I select a variant. Am I missing something obvious here? Is there a new way to add properties that apply to all variants (like it used to be)?My brain is broken — any help would be super appreciated!

Cline (vibe coding tool) is insisting that Figma MCP cannot provide gradient values, and is telling me the only way for it to grab gradient values is by guessing from a screenshot or having me provide directly. I can’t imagine this is the case-- or is that accurate?

Hello, I have a question and something I have been struggling to figure out. I am putting together a set of carousel cards that would feature video and image. With Carousel there is a featured card and two cards that normally would peak on the left and right. In my design I am taking advantage of using the figma responsive feature this way I can reduce the amount of components I am creating.  When I try to pull the card with. the cards peaking on the left and right I noticed that the card on the right is not responsive to me downsizing the width. This is because I cannot set the card to fill or else it will show or places itself in the viewport.  Does anyone know how to fix this?  There has got to be a way to pull in the right card when i resize whats in the frame.  Thanks FC 

I'm prototyping in Figma Sites, and I want to create an interaction where:A user clicks on something (like a button). After a delay, another action happens — like setting a variable or triggering another interaction.In Figma Design, I used to do this by:Using components with hidden states. Using change to I could nest an after delay function Setting an "After Delay" interaction on the hidden state to trigger the next action.But in Figma Sites, I can't define components, and anything created outside that will be out of scope so I can't use hidden states to manage delayed actions — and that’s where I’m stuck.

Hello!I created the animation on a separate page beforehand because I couldn’t get it to work initially. The animation consists of two Frames, but when I move it to its intended location inside a Frame, both Frames just sit next to each other with no animation happening.If I move it outside the Frame, I can set it as a starting point and the animation works as expected. But inside the layout Frame, it stops working.Has anyone encountered this before? Is there a way to make an animation between two Frames work inside a Frame?

Recentemente estava usando o Fig jam para fazer um trabalho da faculdade, mas, as setas simplesmente não funcionam como eu queria, elas somente vão para o além quando eu clico nelas para trocar de posição.  Eu já tentei de tudo, pensei que era um problema num plugin que tinha baixado (dark mode) mas não era, pelo menos não tenho certeza.Desabilitei quase todas as configurações, nunca aconteceu isso, mas tem um detalhe, recentemente eu atualizei o meu pc do windows 10 para o 11, não sei se isso pode afetar alguma coisa, mas fora isso, não sei de mais nada.Se alguém souber como resolver esse problema, iria me ajudar demais, obrigado  

Hello , i'm using a team library with components with pre-builts interactions ( hover , click ...etc ) , to give an example let's say i added one the components ( drop down with open and closed states ) in my project from the library , when I set the instance to “Open” and edit its content ( menu content ), the original default values of the parent components still appear in the prototype instead of my edited text , which limits the flexibility of using the component within a real project context.For context, I’ve been using other systems with baked-in interactions (such as Arco Design), and I haven’t experienced similar issues with dropdowns or tooltips there.I’d really appreciate your insight or any recommendations on how to resolve these issues

Initial StateEnd StateHello all,I’m turning to you as experts and hope you can help because AI didn’t! :-) I’m trying to create a dynamic prototype that would allow me to get from Initial State to End State.Initial State:List of 1-N On/Off toggle buttons.End State:Random buttons (could be any amount) are clicked and activated to ON state The randomly clicked buttons show up at top right. (don’t have to be black) Ideally, if I click the green selected buttons again, the buttons at the top right would disappear.I’m wondering if this is possible using Variables and Conditions without doing the interactions with some “fake” overlays and hard-code everything.Each button is a instance of a button with the animated states inside.So far, I can’t figure out even where to start exactly.Any help or pointers would be greatly appreciated! Thank you.Alex

Hello Figma Team, I asked ChatGPT to specify a tool bar and it came up with the following.  I am relatively new to Figma so I wasn’t able to make progress after the frame definition.    How do I design the children as shown below?  Any help is much appreciated. Thank you,Mustafa ***************************** Frame (component) — c/topbar/defaultSize: 1440 × 64 Auto Layout: Horizontal Direction: Horizontal Primary axis alignment: Space between Counter axis alignment: Center Padding: Top 8, Bottom 8, Left 16, Right 16 Item spacing: 24 Fill: #FFFFFF (or your neutral-100) Effects: Drop shadow (Y: 1, Blur: 4, Color: rgba(0,0,0,0.06)) — optional Layout grid: 12-column, 1440px frame width, 20px gutter (optional)Children (left → right) and propertieslogo_left (group)Type: Frame (no Auto Layout) Size: 40 × 40 Constraints: Left & Center vertically Content: SVG logo or text; left-aligned Padding inside: 0left_spacer (flexible spacer)Type: Frame Width: 0 (use Auto Layout "Fill container" t

Hello. We are looking for a way to create banners at scale in various sizes (ex. 300x250, 250x250, 970x250). The solution right now is that we are using a Component that we copy over all the banners. And that works for one single set. The trouble shows up when we try to have 2 (Master) Components within the same file. Basically Component A (image) drives many banners.But if we copy Component A (image) to become Component B (image), the connects to its associated banners are lost. Can this be done in Figma - directly? Or Buzz? Or using a plugin? Thank you.

Whenever I export a PDF and try to print it from Preview, the sheet of paper comes out completely blank. I can only print Figma PDFs from Adobe Acrobat—when I do, the issue doesn’t occur. But that only solves my problem, not the issue for the rest of our team, who don’t have Acrobat.I notice a similar issue when placing the PDF in InDesign, the page also stays blank there, which makes me feel that something is wrong with the PDF itself. Is this a bug? Is there a workaround that doesn’t involve exporting as JPG/PNG? Additional information: Multiple team members have this issue, but not everybody. The PDF shows the full design in Preview. Printing as a JPG/PNG works fine. The issue also occurs from FigJam.

 为什么星星图案会溢出里面的画框，如何裁剪溢出内部画框的星星部分Why does the star pattern overflow the innerframe, and how to trim the star part thatoverflows the inner frame

The designs within Figma are bright and pop, but after converting to HTML and using the same hex codes they look faded and washed out. Is there a workaround? Is this related to color profiles? Left shows Figma, right shows HTML. Note the background colours and fonts don’t look as bright Help!! Just looking for the web to pop like the figma designs =)

Hello. I’m developing a Figma plugin to export designs to applitools. This it the manifest:{ "name": "Applitools Plugin", "id": "1011412324421890620", "api": "1.0.0", "main": "plugin.js", "ui": "ui.html", "editorType": [ "figjam", "figma" ], "networkAccess": { "allowedDomains": [ "*.applitools.com" ] }}and I see this in the console when I try to load the plugin’s manifest:Manifest error: Invalid value for allowedDomains. '*.applitools.com' must include a scheme, such as https://. but according to the documentation (https://www.figma.com/plugin-docs/manifest/#networkaccess) the manifest is valid.I want to resolve CORS issue which currently I do using cors-anywhere on herokuapp, but this isn’t something I want to keep for several reasons. I’m using the applitools JS images sdk internally to communicate with applitools, which uses XMLHttpRequest internally. I wrapped it using “monkey-patch” to “proxy” the requests to Figma’s fetch command and tried setting the “n

Hi,I can use Figma Make and it’s working perfectly. I am using Figma Site and it’s working perfectly. But, I can’t use Make in Site. When I am adding a code layer, or using Make in a frame, it’s saying “AI Features not Available.” I checked it in help center and it’s saying that there is connectivity issue but it’s not getting resolved for a week for me now. Help me resolving the issue. Thanks.

Hey everyone,This is Lia, I’ve been working on a web design project that connects homeowners with local contractors. My goal is to create a clean, trustworthy, and easy-to-navigate user experience for both customers and professionals.I’m trying to figure out how to simplify the onboarding flow — like, how do you make sign-up and service requests feel effortless while still collecting all the necessary details?I’d love to hear your thoughts on layout ideas, design hierarchy, or anything that could make this type of marketplace more user-friendly. What do you think works best for platforms that serve two different user types?

Hi everyone 👋I previously had access to the Figma Education Plan through the Google UX Design Certification on Coursera. I’ve now completed that program and I’m continuing to grow my portfolio while transitioning into UX design. When I tried to re-verify my Education plan this week, it asked me to be verified by a bootcamp admin. However, I/m not currently enrolled in any bootcamp or full-time program. I emailed education@figma.com twice but I haven’t received a response yet. Is there any alternative way of independent leaners or recent graduates to get verified? Even a short extension (6 months) would be extremely helpful for my portfolio projects and career transition. Would really appreciate any guidance🙏Thank you!Anuradha Singal(redacted by the moderator due to PII)

Hi everyone,I’ve been trying to recreate this animation: https://www.instagram.com/reel/CaenEwTg-Kf/?igsh=MWZlb3AzYWswdWQwOA==I managed to get to the last step, but I can’t find the Smart Animate option anywhere in Figma. I’ve tried multiple times, but it just doesn’t appear.Has anyone experienced this or knows how to fix it? Any help would be greatly appreciated!Thanks in advance.