As I've mentioned before, I've long had a passion for learning new skills and that's especially true when it comes to picking up new frontend development skills.
When I moved over to using Figma as my main design tool outside of my day job, I wanted to find ways to make the process of handing over to development easier. Although Figma does a great job of handling developer handoff, it renders the font sizes as pixels much like any other design tool does.
I was desperate to have an easier way to provide the relevant Rem or Em values to developers (including myself) so that I didn't have to find an online converter or just make up random values to try and find the closest match. And that's how Px ›› Em was born.
Over one evening, I was able to dig into the Figma API documentation, make sense of what was possible and create a basic proof of concept that did what I needed it to do.
The final output
Over the course of the following few days, I made adjustments and updates to the plugin, enabling some extra functionality for changing the base Px value from the browser default of 16px and also allowing for the conversion ratio to be changed based on
some common scales (including the Golden Ratio).
The core Px ›› Em functionality is:
- Open the plugin without selections to convert any number to ems
- Select a text node anywhere in your files and open the plugin to see the current pixel value and convert it to ems
- Change the current selection to update the input value and enable a new conversion
- Change the baseline px value to whatever you want it to be and see the relevant changes in em conversion
- Change the scale by which you want to convert based on common scales used
Creating the code wasn't as complex as first anticipated, so here's a snippet of how the actual calculation works as a function.
var baseValue =
var scale =
return(px / baseValue)* scale;