Rather, it’s a jumping off point so you don’t have to go from 0 to 1 every time. We know that code isn’t useful out of the box. Much like Chrome Dev Tools, Dev Mode takes inspiration from other development tools to create an environment that’s immediately familiar to you.Ĭode in Dev Mode is entirely redesigned and customizable for whichever language you’re working in. By hovering and clicking around the Figma canvas, you can find and export all the information you need, like measurements, specs, and assets, and uncover additional context from your design system. Dev Mode is like a browser inspector for your design file, and it brings design concepts-shapes, layers, and groups-closer to developer concepts like code, icons, and tokens. While the Figma canvas is great for freeform design exploration, it can be confusing if you’re dropped into a design file that’s missing information needed for implementation. We’re excited to take this first step in bridging design and development in Figma, and we can't wait to see what teams do next. The easier it is for teams to design, document, find, and implement high-fidelity designs without losing sight of the work and each other along the way, the better the product outcomes. With Dev Mode, we see a huge opportunity to get developers what they need quickly and efficiently-just as we did with designers when we first set out to build Figma. 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, every team wants to work with as little friction as possible. We also know that understanding developers’ needs and their challenges is critical to making Figma a place where product development can be more efficient, collaborative, and expressive.ĭevelopers have unique workflows and preferences. Today, we know that on our paid plans more developers visit Figma than designers. With a single link, designers could collaborate on in-progress work, sharing early explorations, rather than safeguarding designs until they felt “polished.” As more and more designers embraced Figma and this multiplayer way of working, we began to see a natural broadening of use across teams and disciplines, especially with developers.

Figma was born on the web-an unconventional start to a design tool, but one we felt product design desperately needed.

Chief architect libraries