Where is the Inspect Tab?

I think I’ve figured it out, but something is still broken.

Evidently I now have as an option the new “Dev” perspective. If I activate this, I get an Inspect tab.

The problem is, I can’t edit the CSS the way I used to. I can copy it, but I can’t edit it directly.

The problem with this is, if I want to quickly copy all of the properties of a given component to another frame (like autolayout), I can’t just grab the CSS and paste it into the CSS inspect window of that other frame (because I can’t edit the CSS anymore).

I’m probably just missing something here, but I relied on that capability, I hope it hasn’t been removed.

Everything was working fine, but yesterday Figma suddenly froze, the inspect panel disappered after relaunch. Figma for Windows, Win 10 LTSC. I removed Figmaand installed again but no success. No inspect panel in Chrome also in Dev of desing more

@Tcoz I’m having the same problem and it looks like figma support has decided to pretend everything is fine while they fix the issues.

I received an email from them, they recognize the issue and are going to see about fixing it.

I need the inspect for color styles. It’s driving me nuts not being able to quickly get CSS values of the colors and especially gradients.

You guys bwoke it.

There is a workaround for copying CSS:

1. Turn off developer mode.
2. Right-click on the object or layer to open a context menu.
3. Scroll down the context menu and select: “Copy/Paste as → Copy as Code → CSS”.

It works for me. I found more CSS styles there than in developer mode.

The Develop mode will be free for now, but later will be locked behind the paywall, but now we have a free INSPECT tab. So with that removal, we are unable to get the developers to see this inspect tab. How can we get that back, as I’m not going to get the developers used to a mode that the boss won’t pay for later.

This. If I have to pay for a developer license just so that my development teams can inspect the spacing and coloring of a read-only document, this is going to be a big issue for my company.

The developer tab already has a “copy” button above the layout and styles windows, the issue is that we can no longer directly edit the content of those windows (like if we want to quickly change a padding value).

Once I’ve set the initial values with the UI, I tend to use the edit-css-directly capability almost exclusively. Having it removed is a big problem.

For what it’s worth, I’m not sure I really see the need for a “Developer” perspective at all.

One of the points of Figma (unless I’m just wrong here) is to bridge the gap between designer and developer. If we start breaking Figma into “designers look at it this way, developers this way (more of an output-only view)” we begin to drift apart from a very useful overlap. Not to mention we already have tools that work that way.

We need designers to think a little more like developers, and we need developers to think a little more like designers. Figma covers that ground fairly well, but I think something along the line of an “advanced” tab would be a useful way of maintaining a single perspective with some capabilities isolated for what should probably be thought more of as a “power user” or developer/designer.

Having the same problem. Tab is not there anymore and as a dev new “dev” tab is not useful at all. I want to copy-paste the whole whatever-it-generated and clean it up myself, not having the configuration split into 4 different windows based on random attributes. This is why we picked figma in the first place, removing this feature is blind.

Figma please bring back the default Inspect Tab since Dev-Mode is opt-in and requires payment after the beta.

Greetings people of the community. Am having the same problem, i can’t find the Inspect Tab. Is it a general problem?

@chiagozie_Oscar_Favour It’s not a problem, you just need to switch to the “Dev Mode”.

Guys, you can use the ‘Figma to Code’ plugin.
This option is more convenient for me than the one Figma offers by default.

It’s not that the tab can’t be found or that we can’t copy the CSS (please see original post). My second post in this thread discovers it in the Developer tab.

The problem is that, in the Developer tab, we can’t edit the CSS directly, which is something you used to be able to do right in the Inspect tab in the Design mode. When Dev Mode went live, I had some work to do, saw the inspect tab was gone, I activated Dev mode, found the CSS blocks, but you can only copy, you can’t edit or paste. Many Figma users rely on this feature.

The plugin you mention is one of a few good ones for rendering out the code but it doesn’t fix this problem. Every time I tweak a padding or something I don’t want to have to use the UI, I just want to edit the CSS directly (like we all used to).

You have never been able to edit CSS in the Inspect panel. It just wasn’t possible.

Admittedly I haven’t been using Figma that long, but I’m pretty sure I have done this in the past. I’ve also made the issue clear directly to Figma (I got a couple emails from them on the matter) and they never told me, “you could never do this.” Maybe I was using a plugin or something (I have a few installed), but it seemed to just work.

Previously, no plugin could affect the Inspect panel. Now, with the release of Dev mode, plugins can only generate code (codegen plugins). And in both cases it is impossible to edit the code manually. You are probably confusing something. The only way you could change the code in the Inspect panel was if you were working in a browser and some browser extension could make changes to the Figma frontend. But again, there has never been a native code editing function.

Again it’s curious that not one other person anywhere has said this, and in fact others have told me that they miss the feature as well. Not sure what’s going on here.

I’m missing the same functionality. The inspect tab was not only a super fast way of quickly copying and overviewing CSS layouts, flex properties and individual lines of code, it was also easy to access. Now we have to switch to Dev mode to access the same functionality that was accessible for years?

Any statement from the Figma Team on this?

Because it would have been great if the initial promo videos specifically mentioned: “Hey the inspect tab is now dev mode”. At least that would have been transparent. I don’t have an issue paying for Figma and good functionality, but switching to a whole other mode of editing is not exactly the epitome of accessibility and usability… Giving a choice is. Just a setting somehwere that can switch Dev Mode to the Inspect Tab.

👆🏽👆🏽👆🏽 THIS

Plus the fact that I could go to Inspect mode and screenshot with red measuring lines before. Now you basically cannot do it easily without agreeing to the new Dev Mode terms, risking some upcoming bills, or using a plug-in—at least not on a Mac. 🫠

At least Figma should make the Dev Mode beta a real, additional opt-in, not taking away some basic feature like this…

It’s hurting to see the inspect tab gone and merged with dev mode which requries a paywall. For what it’s worth, they removed a free tool and made it paid.

Is it the monopolistic way of building products and luring money ?

This was one of the best features I loved about Figma. This makes me feel like they’re forcing me to purchase the dev mode subscription. Not cool Figma, not cool.

You can use the Inspect plugin instead https://www.figma.com/community/plugin/1254262542670221199