Where has the Inspect tab gone?

I’m a designer working on web UI.

I want to hand some style parameters to a developer. Historically I’ve done this by going to ‘Inspect’, which was next to ‘Design’ and ‘Prototype’.

I’m aware that dev mode now has a cost implication, but Inspect was always a functioning solution. Has this feature now been paywalled?

What is the solution to my problem? Thanks for your time in advance.

10 Likes

Hi Olly,
Thanks for reaching out to the community. To give some clarification, after the Dev Mode beta ends, users who do not have a Full or Dev Mode seat will still be able to access information on designs through the Properties tab. This Properties tab is only visible to users viewing the file with view only access.

Users with editing access will be able to either use Dev Mode or inspect the design from the Design panel.


For more information on the view-only properties panel, you can check these following articles:

Hope this helps!

Thanks for your answer, Celine. It does clarify but unfortunately, it is not the same. The design tab doesn’t allow viewing the CSS, previously allowed for the starter plan.

I am really sad about this update as I don’t need the dev mode but can’t have the same info I had before :frowning:

10 Likes

The “Design” tab never provided a CSS code.

In “Design” mode or “View only” mode:

Or use plugins that are available in “Design” mode.

1 Like

Agree. The new properties panel doesn’t have nearly as many features as was available before. All the communication from Figma gave the impression that the only thing that would change regarding the inspect panel would be where it was located.

Any help or clarification would be appreciated!

8 Likes

Just bring the previous inspect tab and the way inspect worked back, please. Not everyone is going to use Dev mode. The current way to inspect is such a downgrade from what it was before.

13 Likes

The design tab is far from what the properties tab is meant for. The properties tab is a list of the final attributes of a specific element. Nothing is hidden behind multiple clicks, colors are in hex values not hidden behind design-system names.

Keep your CSS code and whatever else the devmode has behind the paywall. Just add the properties tab for editors as well.

Figma has just become utterly annoying to use. I do understand you are trying to force people into buying dev mode. The only thing you will force is people to find alternatives.

11 Likes

Hey all; thanks for the feedback regarding this experience. I am on our advocacy team at Figma and have been staying close to this feedback to discuss internally.

Our initial thinking for designers/editors was to have a single entry-point into the inspect experience. Having both the Dev Mode toggle, and the Properties/Inspect tab would be confusing; but we also acknowledge that this does create a delta between what an editor and a viewer sees.

The second point about the code snippets in the previous inspect experience; this has been something that we’ve heard through a number of channels, and in some of the other threads on the forums.

I think the past replies have provided clarity on what options currently exist; but I wanted to flag that we are having convos internally about ways to make this better. The feedback is helpful and appreciated, and I’ll report back with any updates.

Some questions that would help me in my convos:

  • Re: the code snippets in the previous inspect experience; can you describe how you used those? Did you copy them in their entirety? Or just a line here and there?

  • @LukasDev: you mentioned wanting the properties tab back as an editor (not for code snippet reasons); can you describe how this is helpful in your workflow? Just trying to understand your use case better!

  • For those on the starter plan, can you describe how you are currently working today? There is a number of different scenarios; I imagine a developer who may need view access to be on a starter, but I am assuming a designer using Figma for business/freelance would be likely be on a Pro plan. Any context here is helpful to understand the scenario.

May also come back with more questions!

I used to copy one line from code here and there, and even use it as helper whenever I was writing CSS and forgot a specific syntax (such as box-shadow), it was faster than looking anywhere else. I don’t remember one instance where I used the CSS in its entirety.

It also helped me when I was training design interns who wanted to learn a little bit about web development, I could explain to them how things translated to CSS without having to move to a foreign software.

The previous Inspect mode was such an upper hand over Zeplin as well, I understand they aren’t your focus, but companies outside the US (which pay for Figma in some absurd currency exchange rates - BRL for example, it’s almost 5x) were much better off not paying Zeplin and having devs just inspect the Figma files as viewers. It’s not a choice for them to add more seats on Figma or pay for Zeplin, they will just suffer a worse experience than what they had before.

5 Likes

Without having to sound disrespectful, we all know why Figma has made the business decision to hide what was initially one of it’s best selling points, the inspect tab, behind a paywall.

Funny thing is, up until few days ago, I could launch a Chromium Inspect tool with a shortcut, and now that’s disabled as well.

It’s embarrassing, after years of cult-like love for Figma, having to justify why we cannot award someone an upgraded seat for these standard features, because Figma decided that after Adobe merger fell through they need more money.

It’s so disappointing, I mean, I have t-shirts and hats from Figma, and I used to wear them with a sense of pride. Now Figma is becoming just another cash-grabbing entity that’s breaking the industry.

I feel really sorry for you Tom, being an advocate, having to deal with the backlash that’s directed at people like you, who did not make the decision to ruin our experience.

There’s only one way to solve this, and everyone knows what it is. Bring the old inspect back for free. Like it used to be.

12 Likes

Thanks for reading and answering @Tom_Lowry , but again, this is a problem mainly regarding the fact that we have to pay for an inspect tab. From customer perspective, it looks like hiding this inspect tab was the main point for creating a DevMode, and then a more developed an improved DevMode was created so it could be justified and sold as a complete new experience for developers, while the main point here is the most of developers are view-only users that drop by Figma from time to time.

If you want to know the experience of a starter plan user, here is my case: I was using a free account as a designer, and I invited a developer, also for free. When DevMode ended beta, I thought about upgrading, but suddenly I realized we have to pay for two seats, because if developer becomes a profesional plan user, it converts me directly in view-only user. When I realized this, I started to look for other alternatives outside Figma. So Figma could have had one more customer, it resulted in Figma forcing us to be two customers and then both customers quiting Figma.

Hope this info is usefull for you.

9 Likes

Currently pay for a seat in Figma, and i often use drafts to stage and try out ideas and used the inspect a lot - adding in DevMode has degraded Figma. I would’ve rather have a stripped down version of what we had as I at least could

i need to view access my own drafts to use this??? Is that correct?

3 Likes

@Tom_Lowry

The main problem is not “why do we need this feature”. The main problem is why the community did not appreciate this update - we HAD this feature.

and many more…

Instead of creating a tool that solves problems, you chose another way - to create problems in order to develop a tool

3 Likes

@Tom_Lowry I’m being honest, my clients start asking about viewing dev mode today. And after researching for a few hours, I realized if Figma doesn’t reverse their decision on making the Dev Mode / Inspect feature so money hungry, sooner or later all of your individual clients will find another tool to use. I was paid 1 year of Figma by my company but I also have other small clients, and I can’t ask ALL of them to paid 15$ EACH ALL THE TIMES. It’s so damn annoying. I’d rather quit, but can’t right now. Good luck to your company if this goes on.

2 Likes

You’re lying. This is not the actual reason why this change was made. You’re a part of an organisation which is clearly very creative, with perhaps some of the best product people in the game. You cannot tell us that there was no other way to avoid a “confusing” experience other than to put the view under a full paid seat and reduce the free view to something which is laughable for handoff of any nature.

Unreal! I feel bad that people like yourself have to fend off decisions like these!

6 Likes

In fact there could have been a very easy solution: just having for everybody the same inspect tool Dev Mode has (box model view and CSS snippet) with a message saying “You are using the free version of Dev Mode. Do you want the full version? Watch our plans”. FIXED.

1 Like

The dev mode was a nice change from the inspect tab. A welcomed one, as the hovers on elements gave details like margins, gaps, dimensions and distances between elements. I understand turning new feature paid. But putting existing free features under a paywall (which is all the problem now) feels bad.

Just put free features to the dev mode. The features which were on the inspect tab, they should still be free of charge, it doesn’t feel right to see them being taken away in a paid plan. They would be an entry point and a demo to what dev mode more advanced features could do. Exactly like how variables were introduced: basic features for free, advanced ones under a paid plan. It would only feel less frustrating.

An alternative to make all of this feel less wrong would be adding a cheaper developer targetted tier (cheaper because you would obviously use less features from the full premium design experience). Maybe a one time license? It feels wrong to have to pay for the full Figma paid feature set each month if I’m “only” a dev, just integrating my trusty graphic designer mockups.

2 Likes

I’m a UI engineer that also has write access to the file because sometimes I want to be able to do small modifications to designs.

The problem is clear.
Previously, the status quo was that it didn’t matter what sort of permissions I had, I was able to inspect the CSS output.

It was mainly why we moved from Sketch + Zeplin to Figma.

After a few years of build a cult-like community Figma decided to build a super power feature but put it behind a paywall - which is fine if you can afford it

Now, the shitty part.
You removed an unpaid, super-useful feature and only made it accessible via “View only”. users. Why? I mean why ??

We all know why… but the way around it to

  1. create another account
  2. give it read only mode
  3. open and login it in a different browser/profile/incognito while you keep editing in another or in the app.

Why do I have to do this?

Solution is simple, just enable the damn tab not just for “View only”. You’ll still make money and the community will not go from love to hate you.

Find a way to solve this Tom and you’ll be the hero that keeps the love flowing towards Figma.

7 Likes

@Ovidiu_Bodea You don’t need multiple accounts. just switch and back to dev mode.

I don’t like how switching to Dev Mode closes my current open plugin. I’m building a plugin and often need to grab css definitions in my file to apply to the plugin running in Figma. Before I could grab it from the inspect without any issues

2 Likes