Figma’s Dev Mode: A Hands-on Guide

Are you a frontend developer or visual designer looking to optimize your workflow with Figma’s new Dev Mode? With this guide, one of our Designers, Mikael Cederbom, will walk you through the features and tips tailored specifically for maximizing your productivity and making collaboration smoother between designers and developers. Whether you’re curious about how Dev Mode works, or you want to dive deeper into its specific functions, this article has you covered.

What is Dev Mode?

Dev Mode, launched in beta during the summer of 2023, is a new workspace in Figma designed to simplify the handoff process between designers and developers. It aims to provide developers with easy access to the specifications they need for implementing designs, such as measurements, code snippets, and asset exports. By harnessing familiar tools, Dev Mode improves the experience of inspecting elements, viewing layers, and accessing design information, making it easier than ever to translate design into code.

Switching to Dev Mode

There are multiple ways to toggle into Dev Mode in Figma, making it easy to access when you’re ready to dive into development details:

Toggle in the editor bar: The most straightforward way is by clicking the Dev Mode toggle in Figma’s interface.
Keyboard shortcut: Use Shift+D to quickly switch to Dev Mode.
Search with Command: Press Command+P (Mac) or Ctrl+P (Windows), and search for “dev” to enable the mode.

These quick methods make it easy to navigate between design and development environments, so you can adjust your workflow according to the stage of your project.

Improved Rendering of Code

One of the most valuable features of Dev Mode is its ability to streamline the design-to-code process. It allows developers to inspect frames and components and provides suggested code snippets based on preferred programming languages like CSS, ShiftUI, or XML. Developers can also customize the units for dimensions—switching effortlessly between px, rem, or other units—ensuring that the code output matches project requirements.

How to Switch Code Language or Unit

Enter Dev Mode without selecting any frame or element.
In the right panel, navigate to the Code Settings section.
Use the dropdown menu to change the code language or unit.

This feature helps reduce manual work for developers, making sure the code is more aligned with their coding standards directly from the design.

Ready for Development: Streamlining Handoff

Knowing when a design is ready for development is crucial to avoid unnecessary back-and-forth between designers and developers. Dev Mode simplifies this with a new tagging feature that allows designers to mark sections or components as “Ready for Dev.” This visual cue indicates that a design element is finalized and ready for implementation.

How to Mark a Design as ‘Ready for Dev’:

Create a Section: Use Shift + S to create a new section.
Mark as Ready: Click the “Mark as ready for dev” icon next to the section name.
Frame Level: Remember that to mark individual frames, you must be in Dev Mode.

This feature helps maintain clarity in project status, ensuring that developers only work on finalized designs.

Compare Changes: Track Design Updates

During iterative design processes, tracking changes can become complex, especially over long sprints. Dev Mode includes a feature similar to Zeplin’s Compare Changes, allowing developers and designers to review what has been altered between versions.

How to Use Compare Changes:

Select a frame you want to compare.
In the right panel, click Compare Changes.
Use the history panel on the left to choose the date for comparison.
Review the changes under “layers” to see what elements were edited, added, or removed

This feature ensures transparency and makes it easier to identify updates, making handoffs smoother and minimizing miscommunication.

Downloading Source Image:

A common challenge in design handoffs is obtaining the original source images. Rather than exporting entire frames, which can include unwanted elements, Dev Mode allows for easy download of the specific image assets used in the design.

Two Ways to Download the Source Image:

Download from the Link: Select the frame with the image and use the link in the right panel.
Download from Assets: Use the assets section for a quick export.

This feature ensures that developers get images at the correct resolution and size, streamlining the process of integrating assets into the codebase.

Component Playground: Experiment Without Breaking Designs

The Component Playground is an excellent way to explore the different states of a component without affecting the main design. It’s especially useful when working with variable modes or interactive states defined by the designer.

How to Open the Playground Modal:

Select a component (either an instance or master).
In the right panel, click Open in Playground.

Playground lets you explore variations of a component, making it easier to understand how it should behave in different contexts without the risk of altering the original design.

Show Me the Grid: Design with Responsiveness in Mind

For responsive web design, grids are crucial. Designers can apply grid layouts to frames, but Dev Mode makes it easy for developers to toggle the visibility of these grids to understand how elements are structured.

How to Show and Hide the Grid:

Press Shift + G to toggle grid visibility.

This quick access helps developers visualize how a design adapts across different screen sizes and ensures the layout aligns with the intended design.

Figma VS Code Extension: Integrate Design with Code

The Figma VS Code extension brings Dev Mode functionality directly into your code editor. It allows you to receive comments, link designs to your codebase, and stay updated on design changes without leaving your coding environment.

Install:

Find Figma for VS Code on the Visual Studio Marketplace.

This integration reduces the need for switching between apps, making it easier to keep design and development in sync.

Jira Plugin: Manage Design Issues Effectively

For teams using Jira, Figma’s Jira plugin is a game-changer. It enables you to create, import, and link issues directly to pages or layers in Figma, providing easy access to relevant design context.

How to Get the Jira Plugin:

Go to the Plugins tab in the right panel.
Search for “Jira” or use the Browse in Community option.
Install and configure with your account.

This helps reduce context switching, ensuring that design feedback and tasks are centralized within your project management workflow.

Cost Considerations for Dev Mode

Starting in 2024, Figma’s Dev Mode has introduced new licensing costs. While many features will remain free, advanced capabilities such as tracking design changes, customizing code output, and syncing files with codebases requires a paid license.

$25 per seat per month for the Organization plan.
$35 per seat per month for the Enterprise plan.

When deciding whether to invest in a Dev Mode license, consider your team’s needs and the potential for improved efficiency in the design-to-development process.

What Designers Can Do to Improve the Workflow

Collaboration is key to leveraging Dev Mode effectively. Here’s how designers can contribute:

1. Mark sections as ready for development

2. Add descriptions and document component variations

3. Use grid layouts to guide responsive designs

These steps ensure that the development process is smooth and minimizes back-and-forth during handoff.

Wrap-Up: Embrace the Power of Dev Mode

Figma’s Dev Mode offers an out-of-the-box solution for enhancing the design handoff process. Its features support both designers and developers in creating a seamless workflow. As we move into 2024, it’s worth assessing the cost of these features against the value they bring. With the right setup and close collaboration, Dev Mode can transform how you turn designs into reality.

Explore Today:

Choose your code language
Download and export assets
Compare changes in Playground
Integrate with tools like VS Code, Jira, Storybook and GitHub

By embracing these tools, you can make the most of Figma’s Dev Mode and build better digital products. Stay tuned for more Hands-on Guides in the Knowledge Hub!