Figma to Code Style Diffing
Catch visual discrepancies between Figma designs and actual browser rendering. Compare computed styles against Figma Dev Mode CSS with tolerance-aware diffing and severity classification.
Bridge Design and Implementation
Automatically detect style mismatches between Figma specs and your live pages, with smart normalization and configurable tolerances.
Visual Element Picker
Click to select any element on the page with a blue highlight overlay showing tag, classes, and dimensions. Or type a CSS selector directly.
Smart CSS Parsing
Paste CSS straight from Figma Dev Mode. Automatic shorthand expansion for padding, margin, border-radius, border, gap, and background.
Tolerance-Aware Diffing
Configurable thresholds classify mismatches as major, minor, or negligible. Subpixel rounding is auto-detected and annotated.
Style Normalization
Hex to RGB, rem to px, font-weight keywords, font-family extraction, and zero-unit stripping ensure accurate comparison regardless of format.
Batch Comparison
Compare up to 50 elements at once. Enter a selector matching multiple elements, paste multi-block Figma CSS, and get an accordion results view.
Report Export
Generate markdown-formatted diff reports with severity badges, match counts, and element info. One-click copy for PRs, Slack, or docs.
Quick Setup
Load the extension into Chrome in under a minute.
1. Clone the Repository
Download or clone the source code from GitHub.
git clone https://github.com/glorynguyen/ui-checker.git 2. Load in Chrome
Open chrome://extensions, enable Developer mode, click "Load unpacked", and select the chrome-extension folder.
1. Navigate to chrome://extensions/ 2. Toggle "Developer mode" (top-right) 3. Click "Load unpacked" 4. Select the chrome-extension/ folder
What It Extracts and Compares
Automatically extracts 38 computed CSS properties from selected elements, covering 5 categories.
| Category | Properties | Description |
|---|---|---|
| Spacing | margin padding gap | All directional margins, paddings, gap, row-gap, column-gap |
| Typography | font-size font-weight color | Font family, size, weight, line-height, letter-spacing, text alignment and transforms |
| Sizing | width height min/max | Width, height, min-width, max-width, min-height, max-height |
| Layout | display flex position | Flexbox direction, alignment, wrapping, positioning, and z-index |
| Visual | background border shadow | Background color, border width/style/color/radius, box-shadow, opacity, overflow |
| Variables | var() fallback overrides | CSS variable detection, inline override editor, saveable variable mappings with JSON export/import |
How to Use
Open DevTools, find the "Figma CSS Diff" tab, and start comparing.
Single Element
Pick an element or enter a CSS selector. Paste the Figma CSS from Dev Mode. Click "Compare" to see color-coded results grouped by category with severity badges.
Batch Mode
Toggle Batch Mode, enter a selector matching multiple elements (e.g., .card), paste multi-block Figma CSS separated by /* label */ comments, and diff them all at once.
CSS Variables
Paste Figma CSS with var(--name, fallback) syntax. Click variable chips to override fallback values. Save overrides as named mappings and export as JSON for your team.