A CAD-style dimension annotation tool for Figma. Drop well-formatted dimension callouts (line, arrows, witness/extension lines, and a value label) that read like real drafting and carry real-world units instead of screen pixels.
Figma has no native equivalent. Dims fills that gap for anyone doing technical or mechanical drawings who wants proper dimension callouts.
- Real-world units: in, ft, mm, cm, m, with a configurable DPI and drawing scale.
- Figma native: every dimension is built from standard Figma vectors and frames, with no custom rendering. Each one is an auto-layout frame, so Figma stretches it in both axes when you drag and the label recomputes automatically. Lines and witnesses stay editable by hand like any other vector.
- 8 variants: horizontal / vertical, standard / inline label, and flip, from a grid of one-click drop buttons.
- Adjustable styling: arrow styles (line, triangle, reversed, circle, diamond), stroke thickness, font, witness-line gap and overshoot.
- Live updates: labels stay correct while resizing and are refreshed on reopen.
- Restyle in place: select placed dims and re-apply the current settings.
Requires the Figma desktop app.
npm install
npm run watch # compiles code.ts -> code.jsThen in Figma: Plugins > Development > Import plugin from manifest... and pick
manifest.json. Run it from Plugins > Development > Dims (Cmd+Opt+P re-runs the
last plugin). Re-run after each recompile, since Figma doesn't hot-reload.
- Open the plugin panel.
- Set your units, scale, and styling (sections are collapsible).
- Click a variant button to drop a dimension.
- Resize the dimension frame to fit your feature. The value updates automatically.
- To restyle existing dimensions, adjust the settings, click Select all (or select dims manually), then click Update selected Dims to re-apply the current settings.
Dims. was developed with the assistance of Claude Code.
MIT (c) Human Crafted, LLC. See LICENSE for details.