Ask the Community

Hello I made a button with an animation on the icon that looks like this:  I created variables to allow me to change the icon from the instance.  My original button works as I want.But the copy with the icon change doesn't “play” the back animation.Is there a way to make this work so I can change the icon quickly without having to duplicate all the animations? First, I created my two iconsThen I created a static state that will be in my default button. And 2 states for the animation with a delay. And finally the default button and its hover version, with a rollhover and a “reset component style” state to return to the default state before the animation.Figma file is here, Figma file  Thanks for the help. 

Why? Background: I work in the financial sector. We consist of a holding company and other smaller, specialised sub-companies. We are very tech-heavy and UX maturity is still in the early stages, and I am in the process of merging the companies onto one Figma. The workspaces would be ideal for this. But also for legal requirements. As we are very dev driven, we really wanted to work with the Rest API because it benefits our design system. But the sales team told me that we need at least 6 designer licences before we can get Enterprise. At the moment I am only one designer in my company. The other companies have one each. The group-wide expansion is currently being organised. I have been offered to “simply” add more licences and then I’m good to go. Can someone explain to me how I can sell the management that you have to spend an extra €4500 to make it work? I can understand not wanting to give a certain level of support to smaller teams because otherwise the overall quality of the serv

Hi, I am working on a designsystem/ UI-kit in figma. I am currently working on the button components using variants. I want to create differents sizes. eg. small medium and large and set these as variants.I want the width to be responsive to the size of the device. For example the big button will take up the complete width of the screen minus 7px margins on each size.I know I can do this with auto-layout -> fill container and applying margin to the whole screen-frame. However I can not add this setting to the main-component button since it is not inside a frame/does not have a parent yet. Is there any way to achieve responsive components that size with the screenwidth by having "fill container"? Thank you so much in advance!  

Hi lovely Community, i am a bit lost atm….  i trying to do a style with only the corner borders are visible..  In this picture i tried it with own vectors… but i want to work it with auto Layout so it adjust to the text inside…. and the border should have some space between button (green) and the border….i need to auto layout also to work with design so i can work with variants… with normal designs and small adjustments i am capable to do… but with this kind of border i am so lost HOW to do it. Maybe someone have an idea and a good explanation <3 

Is there a way to revert to a previous value of a variable other than using another variable to store it? ie. is there a variable history so that in a non-linear process, you can revert back to the previous value (component state)?

I have multiple HTMLS. I want to embed them into the plugin through iframe, but some of the contents cannot be displayed completely.For example: In the canvas area chart, the Dark Mode button cannot be switched;However, html can be displayed and used normally on the browser. May I ask if there are any restrictions on figma? I hope you can help answer this const updateIframeContent = () => {nextTick(() => {if (previewFrame.value && props.htmlContent) {try {const iframeDoc = previewFrame.value.contentDocument || previewFrame.value.contentWindow.document;iframeDoc.open();iframeDoc.write(props.htmlContent);iframeDoc.close();playLightAnimationOnce();} catch (e) {console.error('error', e);}}});};<iframe ref="previewFrame" class="html-iframe" :class="device" @load="onIframeLoad"></iframe>

Whenever I move my frame, the lines i created won’t follow. They dissociate themselves(although being in a group element) from the rest of my design. How to freeze them within the frame?

I am try to recreate these chat bubbles that hug the message within them. As you can see in the video when you resize the browser the chat bubbles also resize but they still hug the text. How can I do this in Figma? When I set the auto layout to hug the text and then resize the screen the text eventually gets pushed off screen. The only way Im able to get it to resize with the screen is if I set it to fill container, but then there is a ton of space left over if the message isn’t that long. Please Help!Gif 1: Example I am trying to replicateGif 2: Fill ContainerGif 3: Hug

My organisation has an annual subscription that is renewing later this year. What is the process to change the annual subscription e.g. upgrade from professional to org, add/remove seats? What is the window in order to do so and who should we contact? 

HI All, I want to be able to select two colours and at the same time - so for example purple and pink and have it link to an image with both colours blended? what do I search for to be able to do this - We have the blended image - I am unsure and unable to work out how to do this and I suspect I dont know the correct terminologyThanks in advance 

I understand how to alter the angle of a normal linear gradient, but I don’t understand how to set the angle of a linear gradient when creating it through the “New color style” panel. I want to set it in the style so that the angle is applied to all objects that get the style.Can anyone explain how to do that, please? Here I create the new style (I don’t see any way to set the angle)… Here I apply the style… Here I adjust the angle of the gradient……and as you can see it then breaks the connection to the style and the Fill is changed to “Linear” instead of “Example gradient”.

Hello: I have been struggling to make this work all day with no luck… basically I am making a filterable table with vehicle information. I have figured out how to make lines of data for each different vehilce by utilizing modes, howver I can’t figure out how to affect more than one mode at once.  For example: the first column in this table is a simple check box. I am trying to utilize a “select/deselect all” checkbox on the top of the table, but I am only able to get it to select the default mode and check the first line, or change modes and change the line associated with that particular mode. I forsee this being an issue in future filters as well, as I will be selecting criteria to toggle the visibility of lines on and off.  Here are some images to help explain where I’m at: Any help would be greatly appreciated! Thanks!

Hi guys, Use components from a lib by assets or by master document of the lib?What are the problems when using a child component generated from the parent component (master) of a master lib and manually inserted into the archive design HOME? Which structure should I use? Option 1Team A- Project X- archive design HOME:Assets:- lib components master- lib iconsSteps:1 - asset > Insert component to archive design HOME OROption 2Team A- Project X- archive design HOME- use component childrenSteps:1 - Archive component master lib open2 - Generate component children3 - Insert component children to archive design HOME What problems will we face with option 2?- breakage of updates from the master reflected in the child component?- size file?- analytics lib?- ...

Facing boolean issue. The frame is disappearing after performing Boolean. Created a new file but still the issue persists. Also restarted figma, to clear the caches. Facing this issue in latest figma version.Did, tried searching but the problem is so simple their are no proper solution. 

Why do I show the same font with different thickness, and sometimes when I click, the thin font becomes the thick reality

When I select dropdown menus on the right side of the screen, they open below the bottom of my screen, so I can't see or click on any options. Anyone know how to fix this? I can't grab and drop them elsewhere. Annoying af, especially since I’m new to Figma and trying to follow along with a LinkedIn training.   

hi there, I’m getting the following error message when linking a Figma section in Jira under ‘add design’. The error occurs with my new company Figma account and didn’t/doesn’t happen when copying a section from my private Figma account into the same Jira ticket… so I guess the error is coming from Figma.

Hi, I am trying to crete a user journey with 3 different ‘bands’ illustrated in each their own color. The shape is an S-shape.How do I create it? I have tried everything I could come up with. See picture below for exampleThanks  

Hi everyone,I am using an icon library and would like to apply a color variable named “color-icon-primary” to all the icons. When I add this library to a document / design system I will also have a color variable of the same name setup in this document. Is it possible to merge color variables of the same name to allow me to control color of the icons from the current document ? (not the library)How is everyone managing this ? 

I feel like All libraries should show All Libraries in the file. I have an additional 2 Libraries that contain color variables ONLY. These should show on the side panel perhaps with a “0” components sub heading.This means when sharing the file other designers / devs would see I am referencing third party brand colors etc from a shared / managed library. Thoughts ?   

Hi,  Trying to restructure my company’s use of Figma. Apparently, some colleagues have a Pro plan (at least 3 that I know of). But none of them work in a company/team-wide project and files are scattered all around, which is a pain for the front devs (incl. me), who happen to be on free plans (that’s fine, tbh). So my question is: who should create a company/team project and invite people with pro/free plans in it? Someone with a pro plan or I can do it? Thank you for your time

I have been trying to apply tokens to my Figma file, but when I click on “Apply to Document” or any other option, nothing happens, and the tokens are not imported into Figma.Do you have any solution or workaround you could suggest?If possible, please recommend a good alternative where I can import JSON files easily.

Situation: I am creating a template for several app screens. For each project, the layout will stay the same, but the colours will change. I would like to be able to copy a page full of artwork frames and components to a new file, bringing at least the colour styles with them. Currently the styles do transfer over, but aren’t applied to individual items in the artwork (see screenshot). Am I missing a step?I can achieve what I want by duplicating the file, but in some cases there will already be other pages of assets, so duplicating a file won’t help with file organisation.  I haven’t tried this using published styles. That is my next step, but didn’t think it would apply in this case as I don’t need a universal systen of colours. 

Hello, gurus.Please help me?How to generate vertical position flowcharts online in Figma with AI?Or how to turn the horizontal flowchart to the vertical position flowchart generated by the AI?FIGJAM FlowchartFIGJAM generates great horizontal flowcharts with AI, but for mobile usage, it's easier to read vertical flowcharts.

I want to share only some screens/frames or a flow to the developers and when I checked the internet I came across “Copy Link to Selected Frame” option. which is still not working as expected (it shows all the other screens or mess out there). Can someone help on this please.