Hey Product Hunt! I’m Emil Sjölander, an Engineering Manager at Figma. Today I’m excited to introduce Dev Mode, a new space in Figma built for developers working with design files. While Figma has historically been considered a “design tool”, it’s not just a tool for “designers”. Figma’s multiplayer platform has made it really easy for teams to jump into a design file together and view the latest work. And consequently, it’s much easier for designers to collaborate on ideas with developers. In fact, about 30% of Figma users today are developers. But the same things that have made Figma so great for design, have also introduced new challenges for developers. It’s difficult to navigate a big, messy design file. The live file means it’s hard to know what’s the latest, or what’s changed. And translating designs to code can be manual and tedious. So today we’re introducing Dev Mode, a new home in Figma for developers. Dev Mode is packed full of features to help navigate & implement designs efficiently. Some of my favorite features of Dev Mode are: - The general interface changes have made it much easier to navigate & find the things I’m looking for - Easily being able to compare changes in a design over time to spot even the smallest updates is a life saver - The VS Code integration is magical. It gives me access to Figma without leaving my code editor and even provides code autocomplete based on the designs I need to implement! Starting today, Dev Mode is available in beta and free for all users for the rest of 2023. This is just the first step in making Figma better for developers, and our team already has ideas for how we can evolve from here - like supporting different handoff workflows, supporting more frameworks and languages for code snippets, and even introducing AI to further improve developer efficiency. But more than anything else, we are all super interested in hearing what you think! Add your reactions to Dev Mode and suggestions for how to further improve the dev experience in Figma below and our team will get back to you! For more details, check out our blog post: https://www.figma.com/blog/intro... Enjoy!

A hearty congratulations to all involved! The launch of Dev Mode marks a significant step forward in consolidating the Figma platform as an all-inclusive, collaborative tool for design and development. It's an exciting era for digital design tools, and Figma is undeniably leading the charge. I'm eagerly looking forward to witnessing further expansion, innovation, and refinement in this platform. Keep up the relentless effort, and continue setting the benchmark in the design tool industry. 🔥

Now it's clear why Adobe wanted to buy Figma for $20B.

🤯🤯🤯

So thrilled to test this :D

Version control with Figma for devs 😊, thanks team!!

Huge W from Figma on this announcement. Love it.

Congrats for the launch!

I think this is a great move. Something that designers have been waiting for a long time. Makes the hand-off much more easy.

This looks great! Does it support generating tailwind as well?

Truly a game changer

Congratulations on your launch of PH🚀

Congratulations on the highly anticipated launch of Dev Mode by Figma! This exceptional application is set to revolutionize the design and development process, making it faster and easier for teams to curate, inspect, and implement designs seamlessly. Dev Mode empowers teams to transition effortlessly between design and development, bridging the gap and fostering collaboration like never before. With its powerful features, Dev Mode streamlines the workflow, saving valuable time and effort for designers and developers alike. We are thrilled to hear that it is now available in beta and free through 2023, allowing teams to experience the benefits firsthand. Your commitment to providing innovative tools that enhance the design and development experience is truly commendable. We applaud your dedication and look forward to witnessing the positive impact Dev Mode will have on teams worldwide. Here's to a successful product launch and a future filled with streamlined workflows and exceptional design implementations!

What does it do exactly? 🤔

Interesting step and the opposite direction of Framer. Bigger products instead of smaller landing pages. Cool, I like it! :)

This is genious!