How-to · Figma for Mac
How to use Dev Mode in Figma on Mac: inspect designs step by step
To use Dev Mode in Figma on Mac, open a Design file in the desktop app and click the Dev Mode toggle in the toolbar, or press Shift D. Then select a frame, component or layer, and the Inspect panel shows its properties, styles, variables, assets and export options.
Quick answer
- Open a Design file. Dev Mode does not run in FigJam or Slides.
- Press Shift D (⇧D) or click the Dev Mode toggle in the toolbar. Press it again to leave.
- Select a frame, component, instance or section, then read the Inspect panel.
- Click Mark as ready for dev in the toolbar when a frame is final.
- No toggle? Check your plan and seat before you try anything else.
What you need
- A Figma Design file, not FigJam or Slides
- Dev Mode access on a paid plan, such as Professional or Organization
- A Full or Dev seat, or basic inspection on a Collab or View seat
- Figma desktop app on macOS 12 or later, or the browser version
How to Inspect a Figma design in Dev Mode on a Mac in Figma on a Mac
Open a Design file in the Mac app
Open the Figma desktop app and open a Design file. Dev Mode does not run in FigJam or Slides, so a whiteboard or a slide deck will not give you the toggle. Find a Design file in the file browser and open it.
Tip: Starter team files do not include Dev Mode. Check your plan before you spend time looking for the toggle.
Click the Dev Mode toggle or press Shift D
⇧D
Click the empty canvas first, so keyboard focus is not in a text field. Then press Shift D, or click the Dev Mode toggle in the toolbar and choose Dev Mode. Figma's help page writes the key as Shift D. A third-party Mac guide writes it as ⇧D.
Tip: If Shift D does nothing, confirm the file is a Design file and that you are not typing in a text box.
Select the layer you want to inspect
Click a frame, component, instance or section on the canvas. Dev Mode shows the details for the selected layer. Start with the whole frame, then select a button or a text layer when you need its exact values.
Tip: Select the whole screen first. Narrowing down later helps you see which parent frame a value belongs to.
Read the Inspect panel
The Inspect panel opens for the selection. Scroll it from top to bottom. It lists the layer name and type, the layer properties, applied styles and variables, assets and export options.
Tip: Read every section once before you send a link to your developer.
Switch layer properties between Code and List
Layer properties can show as Code or List. Code gives you copyable snippets for your developer. List shows the same values as plain rows. Pick the view your developer asks for.
Tip: Ask which view your developer prefers before you start copying values.
Check styles and variables
Applied styles and variables appear by name in the Inspect panel. Quote the name when you talk to a developer, not only the raw value. A name is easier to find in the code than a number.
Tip: If a value has no style or variable, ask the designer who made the file whether one should exist.
Compare changes before a handoff
Open Compare changes from the Inspect panel to see what changed since an earlier version. Use Compare with main component to check how an instance differs from its main component. Both help you explain a change in a few clicks.
Tip: Compare before you send a second link, so the developer can see the difference without asking.
Export assets from the Inspect panel
Select the layer, then use the export options in the Inspect panel. You can export PNG, JPG, SVG or PDF. Choose the format your developer asked for before you export.
Tip: Ask about the format first. Exporting the wrong format means a second round.
Mark the design ready for dev
Select the frame, component, instance or section that is final. Click Mark as ready for dev in the toolbar. Leave unfinished frames unmarked so nobody builds from a draft.
Tip: Ready for dev works on every Dev Mode plan. The Completed status needs an Organization or Enterprise plan.
Return to Design Mode
⇧D
Press Shift D again to leave Dev Mode. You can also choose another mode from the toolbar toggle. You are back in the Design editor with the same file open.
Tip: A Dev Mode link opens in Dev Mode automatically, so the person you send it to does not need to press anything.
Before you start: file type, plan and seat
Dev Mode only runs in a Figma Design file. It does not run in FigJam or Slides. If the file opens as a whiteboard or a slide deck, you will not see the toggle, so open a Design file first. You are in the right place when the usual design tools and the layers list are on screen.
Next, check your plan. Figma's Guide to Dev Mode lists Dev Mode on Professional, Education, Organization, Government and Enterprise plans. Figma's admin article says Dev Mode is not available on the Starter plan. If your file sits in a Starter team, move it to a paid team or ask your admin what your options are.
Your seat decides how much you can do. Full seats and Dev seats get full Dev Mode access. Dev seats also include Slides and FigJam. Collab and View seats only get basic inspection.
| Seat type | What it gets in Dev Mode |
|---|---|
| Full | Full Dev Mode access |
| Dev | Full Dev Mode access, plus Slides and FigJam |
| Collab | Basic inspection only: measurements, copying code, exporting assets |
| View | Basic inspection only: measurements, copying code, exporting assets |
Basic inspection still helps. It covers measurements, copying code and exporting assets. If you need more than that, ask an admin for a Full or Dev seat.
Desktop app or browser on a Mac: does it change Dev Mode?
It does not change Dev Mode. Figma's guide to the desktop app says the Mac app has the same features as the browser version. The desktop-only items are plugin and widget development, local fonts without the font installer, tab groups, split tab view, multiple windows and desktop notifications from the menu bar. Dev Mode is not on that list.
The desktop app needs macOS 12 Monterey or later. Monterey came out in October 2021. Figma says the app is optimized for both Intel and Apple silicon Macs. If your Mac runs an older system, use the browser version instead.
Keep the app current. Figma says support for old desktop versions ends six months after a release. The app shows an update prompt when you are not on the latest version. The downloads page I opened did not show a version number, so rely on the in-app prompt. For a fresh install, read how to install the Figma desktop app on Mac.
How to turn on Dev Mode on a Mac, step by step
The steps below cover the Mac desktop app. The browser version has the same Dev Mode features, so the steps are nearly identical there. Work through them in order the first time. After that, you will mostly use the toggle and the Inspect panel.
Read the Inspect panel in Dev Mode
The Inspect panel is where Dev Mode does most of its work. It shows details for whatever you select on the canvas. Figma's guide lists what you will find there. Most of it helps a developer, and some of it helps you check your own work.
- Layer name and type, so both sides use the same label
- Layer properties, shown as Code or List
- Applied styles and variables, with their names
- Assets used by the selected layer
- Export options for PNG, JPG, SVG and PDF
- Compare changes and Compare with main component
- Component metadata and Explore component behavior
- External dev resource links
- Code Connect snippets, where your team has set them up
Code Connect is listed for Professional, Organization and Enterprise plans. If your team is on another plan, you may not see its snippets. Check with your admin before you rely on them.
Read every section once before you send a link. A developer who opens a file cold will look at the same panel. You want to know what they see before they ask.
Mark a design ready for dev in Figma
Ready for dev is the handoff signal. Select a frame, component, instance or section in Dev Mode, then click Mark as ready for dev in the toolbar. Every Dev Mode plan includes Ready for dev. The Completed status needs an Organization or Enterprise plan.
Here is a worked example. Say you have a settings screen with three frames: Desktop, Tablet and Phone. Your developer starts with Desktop. Mark that frame first. Leave Tablet and Phone unmarked until the spacing and colors are final, so nobody builds from a draft.
If you change a marked frame, tell the developer what moved. Then open Compare changes so they can see the difference for themselves.
Measure spacing and compare versions
A third-party guide to Dev Mode on Mac lists the Option key for measuring the distance to another layer. It lists Option with Command for measuring to a nested layer. Figma's official help page did not list either key in the pages I opened, so test it yourself. Hold Option over a layer in Dev Mode and watch for a distance readout.
If the readout does not appear, use the Inspect panel for exact values. The panel shows the values the layer already has. That beats estimating a gap by eye.
Compare changes is the other half of this job. It shows what changed between versions, which helps when a developer asks why a button moved. Compare with main component shows how an instance differs from its main component.
Export assets from Dev Mode
The Inspect panel includes export for PNG, JPG, SVG and PDF. Select the layer, choose the format, and export. Ask your developer which format they need before you start. For the full steps, read the SVG guide or the PNG guide.
A worked example: handing off a login card
Open the file that holds the login card and select the card frame. Press Shift D to enter Dev Mode. The Inspect panel shows the card's layers. Click the sign-in button to read its properties and any applied styles.
Next, click the logo. If it is a vector, export it as SVG when your developer asks for vector art. Then select the whole card and click Mark as ready for dev. Send the file link or a Dev Mode link to your developer.
A Dev Mode link opens in Dev Mode automatically. The developer does not need to press anything. Add a short note with the frame name, so they know which screen to build first.
Keyboard shortcuts for Dev Mode on Mac
| Action | Mac shortcut |
|---|---|
| Enter or leave Dev Mode | ⇧D |
| Measure distance to another layer | ⌥ (third-party guide) |
| Measure distance to a nested layer | ⌥⌘ (third-party guide) |
Figma's help page writes the toggle key as Shift D with no Mac symbols. Mac users usually read it as ⇧D. If the shortcut fails, use the toolbar toggle. It does the same job.
Common mistakes that stop Dev Mode working
- Pressing Shift D while typing in a text field. Click the empty canvas first.
- Opening a FigJam board or a Slides deck and looking for the toggle. Dev Mode does not run there.
- Using a Collab or View seat and expecting the full Inspect panel.
- Marking a frame ready while its spacing or colors still change.
- Running an old desktop app. Figma removes support for old versions six months after release.
- Selecting a single layer when you meant the whole frame. Mark the frame, not the layer inside it.
Most of these are quick fixes. Seat and plan problems need an admin, so raise them early instead of waiting for a deadline.
Figma Dev Mode not working on Mac? Start here
Most failures come from one of three places: the file type, the plan or seat, or keyboard focus. The troubleshooting list below covers each one. Work through the file type and focus checks first, because they take seconds.
Why teams bother with Dev Mode
Handoff is where a design and a build can drift apart. Figma's own 2025 research, as summarized on its statistics page, reports that 91% of developers and 92% of designers think the handoff process could be improved. The same page says 84% of designers collaborate with developers at least weekly.
91%
of developers say the designer-developer handoff could be improved, per Figma's 2025 research
79+ Design Statistics for 2026 (Figma Resource Library)92%
of designers say the designer-developer handoff could be improved, per Figma's 2025 research
79+ Design Statistics for 2026 (Figma Resource Library)84%
of designers collaborate with developers at least weekly, per Figma's 2025 research
79+ Design Statistics for 2026 (Figma Resource Library)25%
fewer iteration cycles possible when designs are validated before development (UserTesting, 2025)
79+ Design Statistics for 2026 (Figma Resource Library)The same page cites UserTesting from 2025 for a 25% figure. It says validating designs before development can reduce iteration cycles by that share. Treat these as vendor-reported numbers, not promises. Count your own handoff rounds before and after you switch.
Where Lazur fits in
Lazur is a voice assistant for the Mac. Hold Option and Command, ask your question, and Lazur answers out loud. It listens and looks at the screen only while you hold the shortcut. It does not click buttons or edit your file.
Ask where the Dev Mode toggle is, and Lazur draws a circle and a label around it. Ask how to mark a frame ready for dev, and Lazur guides you one click at a time, waiting for each click. You stay in control of the file the whole way.
Lazur is not a plugin or add-in for Figma. It works across apps on your Mac, and it looks at your screen only while you hold the shortcut. The Figma page for Lazur shows more of what it covers.
Next steps after your first inspection
Once a design is ready, you may need to share it. If a stakeholder only needs to look, give them view access instead of edit access. The guide to view-only sharing covers the invite and link roles.
For more Figma shortcuts, open the keyboard shortcuts panel and keep it nearby. The shortcuts panel guide explains where to find it.
If you want help with the rest of your Mac work, check the Lazur pricing page. Lazur has a free trial, and dictation is unlimited on both paid plans.
Figma shortcuts for this on Mac
| To do this | Press |
|---|---|
| Enter Dev Mode or return to Design Mode | ⇧D |
| Measure distance to another layer (third-party guide) | ⌥ |
| Measure distance to a nested layer (third-party guide) | ⌥⌘ |
| Clear text focus before pressing the toggle key | Click canvas |
If it does not work
- The Dev Mode toggle is missing from the toolbar.
- The usual cause is the plan or the seat. Starter team files do not offer Dev Mode. On a Collab or View seat, ask an admin for a Full or Dev seat, or move the file to a paid team.
- You see 'You cannot access Dev Mode.'
- The message means the file's plan or your seat does not include Dev Mode. Confirm the file sits in a paid team, then ask your admin for a Full or Dev seat. Figma's Dev Mode for admins article explains the seat types.
- Shift D does nothing.
- Click the empty canvas to move focus off any text field. Confirm the file is a Design file, not FigJam or Slides. Then press Shift D again.
- Dev Mode access keeps closing on its own.
- A Figma Community thread from March 21, 2024 describes access that closed every 15 to 17 days and returned only after an admin re-invited the user. Community support told that user to use the help request form with their Figma account email and file links. Do the same if your access keeps closing.
- The desktop app shows an update prompt, or Dev Mode behaves oddly.
- Figma removes support for old desktop versions six months after release. Update the app from the in-app prompt, restart it, and try Dev Mode again.
- The distance readout does not appear when you hold Option.
- The Option shortcut comes from a third-party guide, not Figma's help center. Use the Inspect panel for exact values, and test the shortcut in your version of the app.
Faster with Lazur
Do it faster: ask Lazur while you are in Figma
Hold ⌥ ⌘ and say what you want. Lazur sees your Figma window. Lazur draws a circle and a label around the button or menu you need.
- 1
Hold ⌥⌘ and talk
- 2
Lazur draws a circle and a label around the button or menu you need.
- 3
You stay in Figma. Nothing to copy into a chat window.
Free for 3 days, then $18/month. Download for Mac
You say“Where's the Dev Mode toggle?”
Lazur · points at itLazur circles the Dev Mode toggle in the toolbar and labels it on screen.
Questions people ask
Is Dev Mode in Figma on Mac the same as the browser version?
Dev Mode itself is the same. Figma says the macOS desktop app has the same features as the browser version. The desktop-only items are plugin development, local fonts, tab groups, split view, multiple windows and menu bar notifications.
What is the Dev Mode shortcut on Mac?
Press Shift D. Some Mac guides write it as ⇧D. Click the empty canvas first so the key goes to the canvas and not a text field. Press it again to return to Design Mode.
Can I use Dev Mode on the Starter plan?
No. Figma's admin article says Dev Mode is not available on the Starter plan. Move the file to a paid team, or ask your admin about your plan.
Which seat do I need for Dev Mode?
A Full seat or a Dev seat gives you full Dev Mode access. Dev seats also include Slides and FigJam. Collab and View seats get basic inspection only, such as measurements, copying code and exporting assets.
What does Mark as ready for dev do?
It marks the selected frame, component, instance or section as ready for a developer to build from. Every Dev Mode plan includes Ready for dev. The Completed status needs an Organization or Enterprise plan.
Does Dev Mode work in FigJam?
No. Dev Mode does not run in FigJam or Slides. Open a Design file instead, then press Shift D or click the Dev Mode toggle.
Can Lazur turn on Dev Mode for me?
No. Lazur does not click buttons for you. Ask where the Dev Mode toggle is, and Lazur circles it on your screen. Ask how to mark a frame ready for dev, and Lazur guides you one click at a time.
Sources
- Guide to Dev Mode in Figma · Figma Help Center · checked 2026-11-07
- Dev Mode for admins · Figma Help Center · checked 2026-11-07
- Dev Mode focus view · Figma Help Center · checked 2026-11-07
- Guide to the Figma desktop app · Figma Help Center · checked 2026-11-07
- Figma Downloads · Figma · checked 2026-11-07
- 79+ Design Statistics for 2026 · Figma · checked 2026-11-07
- Everything You Need to Know About Dev Mode · Figma · checked 2026-11-07
- Figma Community: Dev mode doesn't work · Figma Community Forum · checked 2026-11-07
- How to Open Dev Mode in Figma (Shortcut and Access Fixes) · figmaplugins.co (third party) · checked 2026-11-07
Try Lazur free for 3 days
Hold a key and ask. Lazur sees your screen, points at the button and talks you through it, in any Mac app. No credit card.