Home
    About
    Writing
    Playground
    Projects
    Features
    Bookmarks
    Uses
    Home
    About
    Writing
    Playground
    Projects
    Features
    Bookmarks
    Uses

Press

+ K

to find anything

Go back
Go back

From problem to plugin

First published: 03 December 2020
development

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;
}
Last updated: 27 April 2023 (5 months ago)

    More to explore
    • Design as Code
      What learning Vue has taught me about the future of design, development and the modern web.
      27 April 2023
      Design
    • Why every designer should experience customer service
      It's common when joining a new company to get thrown straight in at the deep end. Sometimes, it’s better not to.
      27 April 2023
      Opinion
    • Thinking in design-code
      My personal approach on how to think about code from a design perspective and how to implement those changes.
      24 March 2023
      Design
    • Rumination, iteration or procrastination
      Knowing when to let an idea go and when to not even go there.
      24 March 2023
      Design