'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
What's new in Dev Mode?
Since announcing Dev Mode at Config 2023, we’ve been working alongside our customers to build a tool for better handoff. Dev Mode is entering its next chapter and now requires a paid seat to access. With this change, we’ve introduced new features and improvements to help you work faster, improve collaboration, and customize workflows.
Introducing new features to Dev Mode
Dev Mode in Figma gives developers everything they need to navigate design files and transform designs into code. With Dev Mode, designers and developers can stay on the same page, making sure important details aren’t lost in the handoff process.
We've also launched some new Dev Mode features and improvements:
- Speed up handoff prep with annotations in Dev Mode that stay up to date with designs
- Improved navigation and the ability to run plugins in Figma for VS Code
- A new modal to compare changes so you can see diffs in code and between two frames
- Auto run plugins for yourself. Or your entire organization (Enterprise plan only)
Learn more about what's in Dev Mode →
Learn how to get Dev Mode
The free Dev Mode beta ended on January 31 and now requires a paid seat within a team or organization. Your access to Dev Mode depends on your team or organization plan, whether your team or organization owns the file, and which seat you have. Dev Mode access, like our other seat types, is granted to a team or organization rather than an account.
- Starter plan: Not available
- Professional plan: Available with a full Design seat only
- Organization plan: Available with a full Design seat or as a standalone seat for $25/mo
- Enterprise plan: Available with a full Design seat or as a standalone seat for $35/mo
Users on the Starter plan and file viewers can continue to view properties and measurements, copy code, and export assets from Design Mode.
Note: If you are a freelancer or agency and are working on a file in your client’s team or organization, you’ll need to request a full design seat or Dev Mode seat in their team or organization. Learn more about our recommendations for working with clients in Figma →
Upgrade to a paid seat
To upgrade to a paid seat and continue using Dev Mode, click Get Dev Mode in the banner at the top of your file in Dev Mode and follow the instructions to upgrade your plan or request a seat.
Note: All upgrades to Dev Mode on paid plans will require admin approval. To minimize any immediate interruption to your workflow, you can continue using Dev Mode while awaiting approval.
Choosing the right seat for you
If you don’t wish to upgrade to Dev Mode, you can still inspect and collaborate on designs. As a viewer in Design Mode, you can inspect property values and frame details, export assets, copy CSS, iOS, and Android code snippets, as well as redline and measure designs using a modifier key.
Dev Mode
-
A
Advanced inspection capabilities and custom plugins
-
B
Compare changes between versions and link developer resources for improved handoff
-
C
Additional codegen languages
View access in Design Mode
-
A
Inspect property values and frame details
-
B
Export assets
-
C
Copy CSS, iOS, and Android codegen as code from the copy/paste menu when you right-click a layer
Here are some of the other key differences between what you can get in Dev Mode versus as a viewer in a design file:
|
What you can do |
Available in Dev Mode | Available to viewers in Design Mode |
|---|---|---|
|
View spacing and measurements |
On hover |
Via modifier key |
|
View property values and frame details |
✓ |
✓ |
|
Export assets |
✓ |
✓ |
|
View CSS, iOS, and Android codegen |
✓ |
✓ |
|
Access advanced inspection like compare changes and a component playground |
✓ |
|
|
Use annotations to add information and measurements to files |
✓ |
|
|
✓ |
|
|
|
✓ |
|
|
|
Use developer-focused integrations like Jira, Storybook, and GitHub |
✓ |
|
|
Explore design system components in a playground |
✓ |
|
|
Connect designs with links to tickets, documentation and components in code |
✓ |
|
|
✓ |
|