ThisCalculator

Everyday

Figma Dev Mode Permissions, Design Inspection & Seats

Updated · Standard formula, shown below

Figma Dev Mode Permissions, Design Inspection & Seats

Figma Dev Mode permissions, design inspection access, and developer seats are all controlled through a single system: Figma’s seat-based licensing model. In short, you must assign a developer seat to a member of your team to let them use Dev Mode, and the design inspection features (like viewing measurements, copying CSS, or exporting assets) are gated behind that seat. This article explains exactly how permissions work, what each seat type can do, how to choose the right setup, and answers common questions about costs and access.

Background: How Figma Licensing Changed

Figma historically had two main license types: Editor and Viewer. Editors could create and edit files; Viewers could only look at them (with limited inspect capabilities). In 2023, Figma introduced Dev Mode as a separate, paid feature, and restructured seats into Full seat (Editor) and Dev seat (for developers). The Viewer role still exists for free, but it no longer includes access to Dev Mode or the full inspect panel. This change was designed to let companies pay only for the people who need editing power, while developers get a cheaper seat that still provides all the handoff tools they need.

What Each Seat Type Can Do

Here’s a breakdown of the three main roles in a Figma organization or team:

  • Full seat (Editor): Can create, edit, comment, and share files. Also has full access to Dev Mode if enabled. This is for designers, product managers, and anyone who needs to change the design.
  • Dev seat (Developer): Can view files, use Dev Mode, inspect designs, copy code snippets, export assets, and leave comments. Cannot edit the design file itself (except for comments and some file management).
  • Viewer (free): Can view and comment on files, but cannot access Dev Mode or the inspect panel. Viewers see a simplified read-only view.

Important: A person with a Dev seat can still open a file and see the design, but they won’t have the design’s full layer tree or be able to change anything. They get a developer-focused view that strips away editing tools and shows measurement, spacing, and code export options.

How Design Inspection Works in Dev Mode

Design inspection in Figma refers to the ability to click on any layer or element and see its properties: dimensions, position, fill color, typography, spacing, and the underlying code (CSS, iOS, or Android). In the classic (non-Dev Mode) inspect panel, this was available to all Editors and Viewers (with some limitations). Now, in Dev Mode, the inspect panel is the primary interface. To use it, you must have a Dev seat (or a Full seat with Dev Mode enabled).

When you select a layer in Dev Mode, you’ll see a right-side panel with:

  • Properties: Width, height, x/y position, rotation, opacity, and blend mode.
  • Layout: Padding, margin, gap, and flex/grid settings if the frame uses auto layout.
  • Typography: Font family, size, weight, line height, letter spacing, and text decoration.
  • Fill & Stroke: Color values (hex, RGB, HSL), gradients, and stroke widths.
  • Export: Buttons to export the selected layer as PNG, JPG, SVG, or PDF at various scales.
  • Code: A tab that generates CSS, Swift, or XML code for the selected element.

The code tab is what most developers use. It provides a clean, copy-paste-ready snippet that reflects the current design. However, note that the generated code is a starting point, not a perfect implementation—developers still need to adapt it to their codebase (e.g., convert px to rem, handle responsive breakpoints).

Setting Permissions for Dev Mode

As an admin, you control who gets a Dev seat from the People tab in your Figma organization settings. You can assign seats individually or in bulk. Here’s how the permission flow works:

  1. Go to Settings > People.
  2. Find the member you want to give Dev access to.
  3. Change their seat type from Viewer to Dev (or Full if they also need editing).
  4. Once assigned, they automatically get access to Dev Mode on all files in your team.

You can also set default seat types for new members, and you can revoke Dev seats at any time (which immediately removes their Dev Mode access). If you have a mixed team, you might want to create separate teams within your organization—one for design (with Full seats) and one for development (with Dev seats)—to keep costs down and permissions clear.

Choosing Between Full Seat and Dev Seat

Deciding which seat to assign depends on what each person does with Figma. Here are some guidelines:

  • Give a Full seat to: Designers, UX researchers, product managers, and anyone who needs to create or edit design files.
  • Give a Dev seat to: Frontend developers, mobile developers, QA engineers, and technical leads who only need to inspect and extract assets.
  • Keep as Viewer: Stakeholders, executives, or clients who only need to view and comment occasionally.

One common misconception is that developers need a Full seat to inspect designs. That’s not true—Dev Mode is specifically designed for them, and it’s cheaper. However, if a developer also needs to make small tweaks (like adjusting spacing or renaming layers), they’ll need a Full seat. In that case, you might consider giving them a Full seat and using the Dev seat for other developers who only inspect.

Costs and Billing of Dev Seats

Figma’s pricing for Dev seats varies by plan. Generally, Dev seats are significantly cheaper than Full seats. For example, on the Professional plan, a Full seat costs more per month than a Dev seat, and on the Organization and Enterprise plans, you pay per seat per month, with Dev seats priced at a fraction of Full seats. Exact prices change over time, so check Figma’s official pricing page for current numbers. Billing is prorated, so if you add a Dev seat mid-cycle, you’ll only pay for the remaining days. You can also switch a seat from Dev to Full or vice versa, and you’ll be charged the difference for the rest of the billing period.

Common Problems and Misconceptions

Here are a few issues that come up often:

  • “I have a Viewer seat but can’t see the inspect panel.” That’s expected. The inspect panel is now part of Dev Mode, which requires a Dev or Full seat.
  • “My developer can’t copy CSS.” Make sure they have a Dev seat, and that they’re using Dev Mode (not the old inspect panel). Also, check that the file is in a team that has Dev Mode enabled.
  • “Dev Mode is slow on large files.” This can happen if the file has many layers or complex effects. Try toggling off “Show code” or using the “Focus” view to reduce rendering load.
  • “Can I use Dev Mode on Figma Community files?” Yes, but you still need a Dev seat. Community files are free to view, but Dev Mode access is tied to your seat.

Alternatives to Dev Mode

If you don’t want to pay for Dev seats, there are a few workarounds:

  • Use the free viewer role: Viewers can still see the design and leave comments, but they can’t inspect properties or copy code. They can take screenshots and manually ask designers for specs.
  • Use Figma’s share links with “can view” access: This gives the same limited experience as a Viewer.
  • Export design specs manually: Designers can create a separate “spec” frame with measurements and export it as a PDF or image for developers.
  • Third-party plugins: Some plugins (like “Specify” or “Anima”) can generate design tokens or code snippets, but they often require a paid plan and may not be as integrated as Dev Mode.

These alternatives are less efficient and can lead to miscommunication, so most teams find Dev Mode worth the cost.

Frequently Asked Questions

Can I use Dev Mode without a paid seat?

No. Dev Mode is a paid feature that requires either a Dev seat or a Full seat on a paid Figma plan. Free plans (Starter) do not include Dev Mode at all.

What’s the difference between a Viewer and a Dev seat?

A Viewer can only view and comment on files. A Dev seat gives access to Dev Mode, which includes the inspect panel, code snippets, and asset export. Dev seats cost money; Viewer seats are free.

Can I switch a seat from Dev to Full and back?

Yes. You can change a member’s seat type at any time from the People settings. The change takes effect immediately, and billing is adjusted prorated for the remainder of the billing cycle.

Do I need a Dev seat for every developer on my team?

Yes, if each developer needs to inspect designs. However, you can share one Dev seat account among multiple developers if they work at different times, but that’s not recommended for security and tracking reasons.

Why can’t I see the inspect panel even though I have a Dev seat?

Make sure you’re in Dev Mode (toggle it from the top toolbar). Also, check that the file is in a team that has Dev Mode enabled, and that you’re not in a “Presentation” view.

Does Dev Mode work on mobile?

Dev Mode is available on the Figma mobile app, but the experience is limited compared to desktop. You can view properties and export assets, but the code panel is less usable on a small screen.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.