Skip to content

🚀 v1.4.0 — Style Comparison Accuracy

Latest
Latest

Choose a tag to compare

View all tags
@swarnpallav swarnpallav released this 30 Sep 09:39
v1.4.0
0379374
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

This release is about trust. It removes a class of false positives that came from comparing Figma defaults and CSS shorthands, and it surfaces real typography issues that were previously hidden.

✨ What's new

  • Typography and text color are now compared for frames that wrap a single text layer (for example a Figma label frame mapped to a <label>). Style details shows which text layer the values came from.
  • Border width is compared per side (top, right, bottom, left), so borders that differ by side — such as joined checkbox or button groups — are now validated instead of skipped.
  • Figma padding on an invisible frame is treated as equivalent to CSS margin on an invisible element. Matching rows show Match (margin).

🧠 Improvements

  • Styles are now compared for every matched node, not only for nodes with a size mismatch. A correctly sized element with the wrong font, weight, or color is now reported.
  • Text layers with mixed styles use the style that covers most of the text instead of dropping font size, weight, line height, letter spacing, and color.
  • When an invisible Figma frame matches the element's margin box better than its border box, size and gap checks use the margin box. One 10px spacing difference no longer shows up as padding, gap, and height issues at once.
  • Radius and border width are reported once when uniform, and per corner or per side only when they differ, instead of up to five overlapping issues.

🐛 Fixes

  • Fixed a phantom 1px stroke on frames with no stroke. Figma reports strokeWeight: 1 by default, so stroke values are now sent only when a visible stroke exists.
  • Fixed a phantom 0px radius on wrapper frames and instances. Radius is now sent only when the node's box is visible (fill, stroke, clip, or shadow).
  • Fixed browser radius being read from the border-radius shorthand, which returns all four corners when they differ. The single radius is now derived from the four computed corners.
  • Fixed per-side Figma strokes being dropped when strokeWeight is figma.mixed.
  • Fixed false border color diffs when some sides have no border, since the browser reports currentColor for those sides.
  • Opacity and font weight no longer display with a px suffix in Style details.
  • Labels now say "border width" and "border color" instead of the SVG terms stroke-width and stroke-color.

🎯 Why this matters

Design systems commonly wrap the element that draws a border inside an instance or auto-layout frame, and express spacing as padding in Figma but margin in code. Previously both patterns produced confident-looking but wrong fixes, such as "set border radius to 0px" on a button that was already correct. This release makes the reported diffs line up with what is actually visible.

⚠️ Note

  • Reload both the Figma plugin and the Chrome extension after updating. The padding/margin equivalence depends on a new hasVisibleBox field in plugin snapshots.
  • Because styles are now compared for every matched node, you may see typography and color issues that were always present but previously hidden.
Assets 2
Loading