ph1p/figma-measure

A plugin to add measurement lines

Figma Measure

A plugin to add measurement lines to figma.

You can find it here: https://www.figma.com/community/plugin/739918456607459153/Measure

Preview

You can find some videos inside the ./docs folder.

How to use?

• Open Figma
• Go to Plugins
• Click on Browse all plugins.
• Search for Measure and click install
• Ready!

You can now find this plugin in the Plugins section by right-clicking on your project. Clicking Measure opens a window. Now you can select one or more elements and click on the different alignments to add lines, tooltips, fills etc.

Feel free to open a feature request: https://github.com/ph1p/figma-measure/issues

Development

git clone [email protected]:ph1p/figma-measure.git
cd figma-measure
npm install

npm run build

or

npm run dev

• Open figma
• Go to Plugins
• Click the "+" next to Development
• Choose the manifest.json inside figma-measure/Figma-Measure
• Ready to develop

figma-measure's Issues

Free text annotations

Hi,
we are using your plugin for quite a long time. There is one thing we are missing.
We created a component in our design system helpers file for short annotations. (See screenshot)
It would be helpful if you could add a feature to create free text annotations.

Add possibility to choose between global and frame measure group

Measurement does not reach bottom of element

I love your plugin! There is a weird bug though, the dimensions to the bottom of the element don't 'reach' the bottom somehow. I've checked multiple times, there are no other ghost frames or anything.

Screenshot:

New way to store structure of measurements

Replace current way of storing data.

• Remove data from notes
• Create structure

Modulus Operator for Units

In the units field it would be nice if you could use modulus (%) so you can measure things like xft xin
(Or ($/32)' ($%32)" would be 4' 3")

Padding on Objects with Auto layout

Hey Phil, I already mentioned this on Figma.

When I try to use the measure tool for padding values on objects that have auto layout applied to them, it just doesn't work.
You can see at the end of the clip I tried the tool on an object that doesn't has Auto layout applied and the padding values show up. So it seems like the problem is caused by the Auto layout and not it being a component.

Thank you for your help and improvements on this tool. If you need anything else from me, message me.

Measure.Figma.plug-in.Bug.when.applying.padding.to.objects.with.autolayout.mp4

Best,

Maik R

Cant select padding measurements

I got a rectangle within a frame. I do select the rectangle but using the padding measurement does: nothing.

Darkmode UI design

Request: Lock new Measurements group?

I LOVE the new update, and that the global group is gone. With that said, can you lock the new group that is being generated again? It gets in the way of making more measurements. I think this use case will be more common, than folks wanting to edit/move the layers inside the Measurements group. Thanks!

How to remove the measure

Hello,

Thanks for the work done ! But I didn't find where I can hide the measure on an object.
Thanks for your help.

Flavien

Request/Issue - Don't lock child layers

Problem

The issue with how you have it now, where some child layers/groups are locked, is if designers are moving objects around and want to include the spec measurements with those moves. I have to dig through all the layer groups and unlock them.

Improvements

1. Simply just don't lock any child layers or groups in the "📐 Measurements" group you generate.
2. Update the "refresh" button so it recognizes all measured objects new positions

Related enhancement

If refreshed, keep the different colors the user has set. For example, I like to use different colors for padding, spacing, and sizing:

Percentage opacity gives too many decimal places

Seemingly any Layer opacity value other than 25, 50, 75, or 100 will display a percentage with a lot of decimal places, such as shown in the screen shot.

Choose Font (Tooltip)

Improve settings screen

Measure create a blank Frame outside of the main content.

I tried to measure the inner gap it works but it creates a new Frame outside of the main content.
baa837cb-cbf9-4a17-a5b9-31d185e7f01a.webm

Change color of tooltip

Bug: Padding

While marking up the padding for a component (that is built using auto-layout), the red lines that are produced are wrong. Please find the attached video as a reference.

Screen.Recording.2022-02-22.at.8.20.33.PM.mov

Label Alignment

Very good plugin!
Is it possible to consider increasing the position of tab alignment, left, right, below, above, to meet the needs of many situations
Thank you!

Dark Mode

Ability to change font size?

Is it possible to change font size? If not will this be added as a feature?

Handle new auto layout (absolute positioning)

Plugin not working

Hi!

Thanks for the great plugin, have been used it quite a lot!
Unfortunately it has not worked couple of last days (probably after Figma's last update), when trying to start plugin, nothing happens.

All the best
Marko

Idea: Show Frame Resizing & Auto Layout Settings in Tooltip

Fantastic plugin, thank you!

There may be good reasons why this isn't possible (or easy), but it would be great to be able to show the Frame Resizing settings (Hug, Fixed, or Fill) and the Auto Layout settings (direction, alignment and spacing) in the tooltip.

Hypotenuse length of vector

I'd love to be able to get an absolute measurement of the length of a vector, rather than its width x height. The math is super simple (thanks pythagoras), but really annoying to calculate a bunch of times for many different lines. Thanks for a lovely plugin.

Try size based on zoom

Reference color styles in tooltips

It would be really great to reference the color style name (or have the option to do so) in the tooltips instead of the hex code.

My use case is I am diagraming some components for reference and I want my developers to reference the color style name (variable) instead of the hex (or alongside it, similar to the inspector view). It's also good reference for designers so that they will learn and adapt to using color styles in stead of hex codes.

Find a way to implement annotations

Ability to measure space

thanks for building this plugin (and for fixing the issue with the install prompt showing up on every node!)

are there any plans to add the ability to measure spacing? it would be awesome to be able to measure the space between objects that are next to each other as well as the space between objects that are on top of each other.

Auto-layout Support

Hey! Thanks for the amazing plugin - we use it a lot and it has simplified communications greatly!

We use a lot of auto-layout and the plugin currently can't show a line for the distance between an element and its parent since you can't select them both at the same time. So I was thinking that it'd be great to have a new area for measuring an auto-layout spacing value.

You'd choose the parent that has the auto-layout and then get the ability to add a redline for the distance between the parent and its child (i.e. auto-layout padding amount)

Here's a mock-up of what I'm thinking:

Thanks again

padding measurement should not include shadows

Label Tooltip

Would be awesome to have a simple (pointing hovercard) to insert spec layer details, with a slight elevation style.