Figma started as more than just a design tool. We believe design is about creating excellent products, not just individual tasks. That's why it's web-based: a single link fosters collaboration on live projects and early ideas. This collaborative approach unites teams to tackle problems together, fulfilling our vision of inclusive design.

Bridging the Gap between designers and developers with Dev Mode

Figma offered a new perspective on how developers work across a variety of environments, as well as real world examples about how their own team used Figma. Most critically, they shared a pivotal insight into what developers really want from a design tool.

“Developers shouldn’t need to worry about learning all of the interactions [in design mode],” says Joel Miller,

Figma prioritizes seamless workflows. To bridge the gap between design and development, created a dedicated mode for developers. This innovative solution allows them to move effortlessly between design and code without switching tools or files.

It provides a focused environment optimized for developer needs, while remaining seamlessly integrated within Figma. This ensures developers retain vital context from the design team, fostering a truly collaborative experience.

Despite Figma's initial focus on design, developers found value in collaborating with other teams. Figma team learnt from developers about the nuances of developer workflows, toolchains, and preferences to create a space in Figma that’s purpose-built for developers—from front-end developers working with mature design systems, to design systems engineers building components, to those building content layouts and exporting assets in their work with brand designers, to support a variety of teams, from idea to code.

What You Can Achieve with Dev Mode?

• Figma's evolving to integrate seamlessly with your workflow.
• The new developer workspace delivers the tools you need, right when you need them.
• It empowers teams to design, document, locate, and implement high-quality designs effortlessly – all within Figma.
• This streamlined experience keeps everyone connected and focused on creating exceptional products.

Communicating Design Intent Effectively

Forget manual measurements and cryptic notes!

Annotations in Dev Mode revolutionize design handoff. Designers can effortlessly add context, specs, and live measurements directly to their work. These annotations update automatically as designs evolve. Developers gain crystal-clear insights into design intent with easy access to notes right where they need them. This ensures seamless collaboration and eliminates the risk of missed details during handoff.

Boost Your Workflow with Annotations

• Effortless Measurements: Simply click and drag to measure anything in your design.
• Always Up-to-Date: Measurements and annotations automatically update as your designs evolve.
• Clarity Without Clutter: Highlight key details without making your canvas messy.
• Unlock Automation: Utilize plugins to customize and automate annotations for maximum efficiency.

Designers can simply label a section as “ready for development” and send it to developers directly, without creating a separate page or file. Diff support allows you to compare changes between different versions of a frame and stay up to date.

Compare the changes between two frames

We’ve redesigned the diffing modal so that you can compare between any two frames to see the difference between iterations of a design. You can also compare between detached components or overrides to the main component. Plus, the diffing modal is more interactive and includes code diffs, so you can see diffs both visually and in code.

Get Things Done Faster, Your Way

Dev Mode in Figma seamlessly integrates your existing tools and code with your designs. There's no single "right" way to work, so Dev Mode adapts to your unique processes and workflows, boosting your productivity from start to finish. Whether you’re looking to link design and code with Storybook, ensure accessibility with Stark, or streamline project management with Jira, Linear, and GitHub, plugins allow you to extend Figma’s functionality to flex however your team works.

Dev Mode empowers you to leverage your existing tools and code seamlessly within Figma. With the Figma for VS Code extension you can bring the power of Dev Mode into your code editor to review designs, see notifications and comments, and stay on top of changes without ever having to leave your coding environment. The extension also autocompletes code based on the design you’re inspecting, helping you work that much faster.

Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with focus view. We’ve also launched the ability to run plugins in VS Code, so you can leverage third party tools and customized code without leaving your code editor.

Empowering Adoption with Dev Mode

The code generated by Dev Mode serves as a launchpad, not a finished product. It saves you valuable time by providing a solid foundation. Dev Mode offers a familiar box model view and utilizes modern syntax with a tree structure for easy navigation. Plus, you can switch between dimension units (rems and pixels) to match your existing codebase seamlessly. Need production-ready code in a specific language like HTML & CSS, React, or Tailwind CSS?

Plugins like Anima or Figma to Code can help you translate the design into functional code quickly and efficiently.

Building designs with code that reflects your established component library is key to maintaining a cohesive design system. This approach ensures your designs seamlessly integrate with existing components, promoting consistency across your product.

You might extend Figma by developing your own codegen plugins, leverage the Code Snippet Editor to add dynamic code snippets that mirror your own component code, or build tools to bidirectionally sync design tokens with our Variables REST API.

Dive into Dev Mode

• Switch on to the Dev mode : Click the toggle shown in the picture on the right-hand side of the top navigation to switch into Dev Mode, or use the shortcut Shift + D.
• Inspect: Dev Mode prioritizes design integrity – you can't accidentally modify the visual layout while inspecting its code. This allows you to click around freely without fear of unintended changes. Clicking an element reveals its layer structure on the left panel. The main screen displays layer names and spacing information, while a dedicated right-hand panel, which we'll explore next, provides even more detailed insights.

• Ready for dev: Once the design is ready for development, designers can mark it as "Ready for Dev" with a clear </> symbol. This signals to developers it's prepared for their expertise. Disagree with the readiness? Simply click the symbol to provide feedback and keep designers informed. Additionally, you can easily share a direct link to the specific UI element with other developers for streamlined collaboration.

• Compare Changes: Unsure about a UI element's behavior? Dev Mode eliminates the need for designer inquiries. Simply tap into Figma's robust version history to compare changes and independently find the answers you need. This streamlines communication and empowers you to work efficiently.

• px or rem: Dev Mode allows you to easily switch from pixel (px) units to rem units for styling. This is crucial for responsive design. Using rem units lets users adjust the overall font size of your website through their browser settings. This empowers them to personalize the viewing experience for optimal readability and accessibility, minimizing the risk of usability issues across different screen sizes. It is also possible to set the root font size by clicking on unit settings.

• Code generator: The right panel displays automatically generated code for UI elements. It's a helpful starting point, but keep in mind (as of October 2023) it might not always be perfect. For example, it could use flexbox when grid layout might be more suitable or add unnecessary styles like background color. For production-ready code tailored to your existing codebase, consider exploring plugins like Anima. These can generate code and even open it in a development environment like Code Sandbox. However, it's important to note that these plugins might not be aware of your specific code style or conventions, potentially introducing inconsistencies or slowing down your workflow.

• Component playground: Like in React, Figma also has the concept of props. You can open the playground to toggle props on and off and see how the UI changes.

• Plugins: There's a variety of dev plugins available to help you be faster at work. One of them being variables2css, which allows you to quickly generate CSS code out of Figma variables used in the project:

• Figma in VS Code: With the Figma for VS Code extension, you can view your design files right where development happens in the code editor.

The extension will allow you to do the following without leaving Visual Studio Code:

• Inspect Figma files
• Receive notifications
• Get code suggestions from designs
• Run Dev Mode Plugins in VS Code

Conclusion

Figma started with a vision: to empower teams to create excellent products through seamless collaboration. By breaking down the barriers between designers and developers with features like a web-based platform and Dev Mode, Figma fosters a truly inclusive design environment.

This allows teams to tackle challenges together, iterate on ideas in real-time, and ultimately bridge the gap between design and development.

The result?

" Products that not only look beautiful but also function flawlessly. "