Back to Plugins
Auto Number

Auto Number

Automatically mark width and height in Figma.

annotationautowidthheightmeasuremeasurementsize

Plugin Preview

Auto Number preview

About this plugin

Automatically mark width and height in Figma.


Function demonstration video.


Using this plug-in, you can do interactive measurement effects in your Figma documents, directly label the width and height, you only need to follow the steps below:


1. Create a new text node with any content text.


2. Input the text node in a frame.


3. Select the text node in the frame and turn on the [Node under control] switch in the plugin panel. At this time, the content of the text node will be replaced with the width number of the outer frame.


4. Adjust the measurement settings you need, click [Apply all] button, then the plug-in settings will be applied to all nodes in the document that are set to [Node under control].


5. Add auto layout and label lines in your frame, and then adjust the frame width, you can achieve the effect of the demo video.


6. If you just need the prefix of the label and want to switch the width and height of the text, just rotate the outer frame.


Notice:


1. The plug-in can only recognize the width of the container frame. To mark the height, please refer to the demo video.


2. After optimization, when adjusting the size of a single label, there will be no stalls, but if there are many annotations in the document, such as hundreds of them, there may be a short stall when clicking [Apply all] button.


3. You can directly copy the finished label and reset its width, just like the demo video.


3. The plugin will automatically recognize your font.


4. You need to keep the plugin turned on to use the functions.


5. After closing the plug-in, the set options will not be retained. If you need to retain the setting function, please feedback in the comment area.


在figma内自动标注宽高


使用本插件,你可以在你的figma文档中实现交互式标注效果,直接标注宽高,你只需要按以下步骤进行操作:


1.新建一个文本节点,内容文字任意


2.把文本节点装在一个frame里


3.选中frame里的那个文本节点,打开插件中的【是否受插件控制】开关,此时文本节点的内容会被替换为外层frame的宽度


4.调整你需要的标注设置,点击【应用全部】,此时插件设置会应用到文档里全部设置了【是否受插件控制】的节点上


5.给你的frame添加自动布局和标注线,再调整frame宽度时,就可实现演示视频的效果


6.如果你恰好需要标注的前缀,想要切换宽高的文字,旋转标注frame就可以了


注意:


1.插件只能识别容器frame的宽度,要标注高度可以参考演示视频


2.经过优化,在调整单个标注的大小时,不会出现卡顿,但如果文档中有很多标注,比如几百个,点击【应用全部】时可能会出现短暂卡顿


3.可以直接复制做好的标注并重新设置其宽度,就像演示的那样


3.插件会自动识别你的字体


4.你需要保持插件开启才可以使用功能


5.关闭插件后,设置好的选项不会保留,如果你们需要保留设置功能请在评论区反馈

Plugin Details

Version1
CreatedAugust 31, 2021
Last UpdatedJanuary 7, 2022
CategoryUncategorized
Creator刘松迪
Stats509 installs, 16 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma

More Like This

Discover other plugins in the same category.

No similar plugins found in this category.