From problem to plugin

Background

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 started learning Vue, I chose to utilise the Vuetify library to speed up the process and allow me to focus less on creating CSS and more on learning the necessary JavaScript and language specifics. Using the Vuetify library taught me the basics of working with APIs to leverage specific behaviour.

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.

The solution

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.

function pxToEms(px){
 var baseValue = 
  document
   .getElementById('newPx')
   .value;
 var scale = 
  document
   .getElementById('scale')
   .value;
 function calculate(){
 return(px / baseValue)* scale;
 }
 return calculate;
}