Updated a month ago
Development
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.
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.
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).
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;
}
Fill in the form to start a conversation