Figma released plenty of new impressive features during Config 2023, and a fresh dev mode was introduced. Dev mode is packed with impressive functionalities like a property playground, version history, and the ability to designate sections as ready for development. Yet, despite its immense value in bridging the gap between design and development, one feature hasn't garnered much buzz: the long-awaited ability to convert units. Finally, we can design using pixels (px) and seamlessly transition to CSS with rem units for inspection. In this article, we will learn how to switch units and, most importantly, uncover why it is an indispensable addition to creating accessible websites and web applications.

NEW: Switching from px to rem in Figma’s Dev Mode

Easy as cake! On the right-hand side of your window, you will see a toggle that allows you to switch between design mode and dev mode. Turn it on, click on the grey canvas area to see the overall settings and you’ll notice a dropdown menu. From there, you can easily switch from px to rem. You can even choose other units if desired (a bit about this later).

As you inspect the design, everything that is set up in px will be automatically converted to rem, assuming a root font size of 16px. If it finds another unit, such as %it will add the rem value for you as a comment. That’s it!

We keep designing with px in Figma, but developers can switch to rems whenever they want.

Source: https://uxdesign.cc/figma-now-supports-rem-units-understanding-the-use-and-benefits-5957fc1ecb78