Check & download the extension here --> ruleruler.design

How did the idea come?

In my company (Aluxion) we always try to take care about the front-end finish, using design systems and looking for the pixel to fit as much as possible the proposed design. A couple of months ago, working on the final stages of a commercial application, the design department was asked to perform a visual QA to verify that the measurements of the elements and font types fit the design well. As expected, this task was an ordeal, the inspector is not something friendly for design people, nor for an initiated developer. So we looked for extensions that would make our task easier, and although we found some, none of them combined everything we wanted in one.

This is how I came up with creating an extension (as a challenge more than anything) that allowed to see the font styles and the measurements between elements in a comfortable and fast way.

First steps

The first approach I made was to go through all the elements on the page and create a box with their measurements in a very small font size. I thought it would be comfortable to have all the measurements of the elements together, but the result was something like an ultra-baroque painting:

Looking for the UX

It was clear that the user couldn't have all the information, one of the basic rules of the UX is that only relevant information should be displayed for the user. So I tried various possible interactions until I realized that the interaction was already there, I just had to catch it. For the design of our applications we use Figma, what kind of interaction will our designers and developers be more used to? To which this tool offers us without a doubt.

Analyzing the UX

The interaction is quite simple:

1. The item you go through shows your measurements.
2. When the item is clicked, it is selected.
3. When you move the cursor, the measurement relationship between the selected element and the one you are on appears.
4. Also, to add value to the product, the item you are on shows its font type and allows you to copy the font styles.

Once the interaction was clear, undoubtedly the most complicated point was the third. How do I create the lines and what possible scenarios can be given depending on the position of the elements? Here, after playing around with figma, narrow the result to 4 possible scenarios that had to be covered from the code:

Implementation

I love React, I am a big fan and I use it professionally in the applications, however and considering that this was more of a challenge than anything else, I wanted to try creating the extension with flat javascript without using any external library, so I also made sure that Google did not put any impediment to upload the app to the Chrome Store.

Basically I divided the implementation into X main methods (not counting other aux functions):

• openClose(show). Used to show or hide the extension. It is responsible for instantiating the elements, setting the listeners and assigning the corresponding css to the different components that make up the extension.

• handleHover(elem). Used in the mouse listener to analyze and display the dimensions of the element you are on and the distances between the selected element. It also calls drawNav to show the font styles.

• handleClick(elem). Set the lines above the element you click and save the it to be used in the handleHover.

• drawNav(elem). It is responsible for creating the nav and displaying the font values of the element you are on.

• copyCSS(). Copy the styles to the clipboard of the item you are on.

Results

Although the extension is in Beta and it still gives some errors in some pages, the results have been very satisfactory and it is already free available in the chrome store for those who want to try it.

ruleruler.design