I looked in the community and found a couple of related posts, but they’re related to accounts/ownership, and since I’m the account owner and I created the file, I’m baffled here.
The inspect panel has disappeared from all my files. I’ve created all of them and never had a problem seeing this panel before (I rely heavily on it). I am logged in (as myself), I appear to be able to fully edit the design of the file, set prototype actions, and so forth.
Just no inspect window. They keyboard commands to show it do nothing, it’s not in the menus, it’s just gone.
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.
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.
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).
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.